Card
Superficie clicable para listados de contenido
Preview
12 mayo 2026
Horizontal: imagen 120×120 a la izquierda
Vertical: imagen arriba
Text-only
Subtítulo de ejemplo
Sin imagen. Para contextos de decisión, como Signal.
Componente real del canon. Horizontal y vertical con href (toda la superficie es link, hover real); text-only sin href renderiza <article>: ambas formas son del componente.
Variantes
| Variante | Layout | Uso |
|---|---|---|
| Horizontal | Imagen izquierda (120×120), texto derecha | Listados de artículos |
| Vertical | Imagen arriba, texto debajo | Casos de estudio, portfolio |
| Text-only | Sin imagen. Título, subtítulo, descripción | Contextos de decisión (Signal) |
Props
| Prop | Tipo | Nota |
|---|---|---|
variant | 'horizontal' | 'vertical' | 'text-only' | Requerida |
href | string | Opcional: sin href renderiza <article> en vez de <a> |
title | string | Requerida |
image, imageAlt | string | Horizontal / vertical |
date | string | Caption sobre el título (horizontal) |
subtitle, description, footer | string | Text-only |
Tokens
| Propiedad | Valor |
|---|---|
| Card-title | Aleo 22px / 600 (--text-card-title, fijo, independiente de escala) |
| Borde | 1px solid --color-border al 30% |
| Border-radius | sm (4px) |
| Hover | Borde se oscurece, background tint sutil. 0.2s ease. |
| Sombra | Ninguna. En ningún estado. |
Restricciones
- Sin texto CTA. Toda la superficie es el link.
- Card-title a 22px fijo. No sigue la escala Major Third.
- Horizontal pasa a vertical en mobile.
Decisiones
| Decisión | Por qué |
|---|---|
| Sin "Read more" | Toda la card es link. El texto sería ruido. |
| 22px fijo | Elemento de UI, no heading de contenido |
| 120×120 thumbnails | Proporción limpia, consistente entre listados |