Build Assets
UI Component
Content Card
Container for a discrete piece of content with optional action — the most reusable pattern in any product.
Platform: bothTags: card, content, list, grid
Purpose
Groups related content into a scannable unit. Name your card by its function (Promotional Card, Profile Card, Summary Card) — not its appearance.
Anatomy
- Container: white background, 1px border, 12–16px corner radius
- Optional: header image (16:9 or 1:1)
- Content area: 16–24px padding
- Title: 16px semibold
- Description: 14px secondary color, 2–3 line clamp
- Footer: metadata or action area, separated by 8px top margin
States
- Default: white background, 1px border
- Hover (if interactive): border accent color, slight elevation
- Selected: accent border, light accent background tint
- Loading: skeleton placeholder for each content zone
Tokens
spacing
padding: 16pximageGap: 0pxcontentGap: 8pxfooterGap: 12px
sizing
borderRadius: 12pxborderWidth: 1px
Do
- Name the card by what it does, not what it looks like
- Maintain consistent padding regardless of content length
- Clamp long text to preserve grid alignment
- Make the whole card clickable when linking to detail
Don't
- Nest cards within cards
- Mix card variants of different visual "loudness" at the same hierarchy level
- Let variable-length content break the grid — use line clamping
- Use cards for every content block — sometimes a simple list suffices
Accessibility
- If card is a link, wrap in <a> — not a div with onClick
- Provide sr-only context if the visible title is ambiguous out of context
- Ensure hover state is also visible on keyboard focus