Design System
GitHub
FigmaPropósito
Mostrar el precio
El precio del pack, con precio anterior y descuento opcionales.
Precio por unidad
Aclara cuánto sale cada unidad dentro del pack.
Tres tamaños
sm, md y lg según el lugar: card, carrito o ficha.
Anatomía
Cada número es una parte del componente real: hacé clic para ver sus propiedades y tokens.
Hacé clic en un número para ver las propiedades y los tokens de esa parte.
Configuración
El componente real, en vivo.
Tamaño
La prop size. Los valores de ejemplo son ficticios.
size="sm".
Con descuento
El precio anterior se anuncia a lectores de pantalla con texto oculto.
Solo precio actual.
Tokens
Los tokens globales que usa el CSS real del componente.
| Token | Valor |
|---|---|
| 14px | |
| 20px | |
| #6b6b6b | |
| 8px | |
| 600 | |
| #1a1a1a | |
| 20px | |
| 32px | |
| 30px | |
| 40px | |
| #6b6b6b |