VOL. III · CH. 3.9 · COMPONENT
Cards
A self-contained unit for previewing something bigger — an article, a product, a record.
1 min read · 123 words
3.9.1Definition & Anatomy
A card groups related content (image, title, metadata, action) into one visually bounded, often clickable unit, typically repeated in a grid or list.
3.9.2Common Mistakes
- Nested interactive elements inside a fully clickable card, creating ambiguous or conflicting click targets.
- Inconsistent card heights within a grid caused by variable content length, producing a ragged layout.
3.9.3Best Practices
- Pick one clear interaction model per card — either the whole card is clickable, or specific elements are, not an ambiguous mix.
- Truncate variable-length text consistently to keep grid rows visually aligned.
ExampleProduct grid cards on e-commerce sites keep a fixed image aspect ratio and truncated title length specifically so the grid stays visually even regardless of product name length.