Card Layout
A UI pattern that groups related information in a visually bounded rectangular container.
Plain English
Cards are the workhorse of modern UI design. They package a self-contained piece of content (a product, a post, a contact) into a scannable unit that works in grids, lists, and feeds. A well-designed card has a clear hierarchy (image → title → supporting text → action), consistent padding, and a predictable size. The most common mistake is inconsistent card heights — cards in a grid should be equal-height or use a masonry layout, not random heights that create a ragged, accidental look.
Technical
Card implementation: position: relative, border-radius, box-shadow or border, overflow: hidden (for image clipping), padding for content. In grids, equal-height cards require CSS Grid or Flexbox with align-items: stretch (default). Use aspect-ratio on the image container for consistent media heights. A card as a link: wrap in <a> with display: block; style the inner <div>. Interactive cards: hover lifts (transform + shadow upgrade), cursor: pointer. For accessibility: if the card is a link, use a single <a> rather than multiple nested links.
Live Demo
Card Layout Variations
1. Horizontal card
Designing for Trust
How visual design signals credibility and builds user confidence in digital products.
Sarah Chen · May 2026
2. Vertical card
Designing for Trust
How visual design signals credibility and builds user confidence in digital products.
Sarah Chen · May 2026
3. Minimal card — no image
Designing for Trust
PsychologyHow visual design signals credibility and builds user confidence in digital products.
Sarah Chen · May 2026
Cards should have consistent height within a grid. Use min-h or aspect-ratio to enforce it.
Usage
✓ Good usage
A product card with 20px padding, 12px radius, a 16:9 image at the top, a 2-line title, a 3-line description (clamped), and a text-link CTA at the bottom — consistent and scannable.
✗ Bad usage
Cards with random content lengths showing at wildly different heights in a grid — some 180px, some 420px — destroying the grid rhythm.
Recommended values
- Padding: 16-24px
- Border radius: 8-16px (matching design system radius)
- Shadow: soft shadow at rest, lifted on hover
- Image: aspect-ratio: 16/9 or 1/1, object-fit: cover
- Min-height: avoid — let content determine height
- Grid: repeat(auto-fill, minmax(280px, 1fr)) for responsive grid
Common mistakes
- No consistent image aspect ratio — card heights vary dramatically.
- Interactive elements within a linked card — creates nested links.
- No hover state on clickable cards — users cannot tell they are interactive.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Cards: 20px padding, 12px border radius, 1px border (#E2E8F0), soft shadow. Image container: aspect-ratio 16/9, object-fit cover. Title: 2-line clamp. Description: 3-line clamp. Hover: shadow lifts + translateY(-2px). Cursor: pointer. All cards in a grid are equal-height.