Card
Clickable surface for content listings
Preview
12 May 2026
Horizontal: 120×120 image on the left
Vertical: image on top
Text-only
Sample subtitle
No image. For decision contexts, like Signal.
The real canon component. Horizontal and vertical with href (the whole surface is the link, real hover); text-only without href renders <article>: both forms belong to the component.
Variants
| Variant | Layout | Use |
|---|---|---|
| Horizontal | Image left (120×120), text right | Article listings |
| Vertical | Image on top, text below | Case studies, portfolio |
| Text-only | No image. Title, subtitle, description | Decision contexts (Signal) |
Props
| Prop | Type | Note |
|---|---|---|
variant | 'horizontal' | 'vertical' | 'text-only' | Required |
href | string | Optional: without href it renders <article> instead of <a> |
title | string | Required |
image, imageAlt | string | Horizontal / vertical |
date | string | Caption above the title (horizontal) |
subtitle, description, footer | string | Text-only |
Tokens
| Property | Value |
|---|---|
| Card-title | Aleo 22px / 600 (--text-card-title, fixed, independent of the scale) |
| Border | 1px solid --color-border at 30% |
| Border-radius | sm (4px) |
| Hover | Border darkens, subtle background tint. 0.2s ease. |
| Shadow | None. In any state. |
Constraints
- No CTA text. The whole surface is the link.
- Card-title fixed at 22px. It doesn't follow the Major Third scale.
- Horizontal becomes vertical on mobile.
Decisions
| Decision | Why |
|---|---|
| No "Read more" | The whole card is the link. The text would be noise. |
| Fixed 22px | A UI element, not a content heading |
| 120×120 thumbnails | Clean proportion, consistent across listings |