Home / UI Patterns / Card Component
6.6 · UI Pattern

Card Component.

The most universal building block. Image, tag, line-clamped title, excerpt, meta row. Hover any card to feel the lift.

What it is

A card is a self-contained rectangular container that groups related information about a single subject — a blog post, a product, a team member, a project. Cards are the most universal building block of web UI design. They create visual separation between items without requiring hard dividers, and they make complex pages scannable.

How it works

A basic card has: a visual area at the top, a content area with title, description, optional metadata (date, author, tags), and sometimes a CTA. Cards are grouped in grids (2, 3, or 4 columns) and often have a hover state — a subtle lift effect (translateY(-4px) with increased shadow) that signals interactivity.

Visual areaTop section: image, video thumbnail, illustration, or solid color block
Content areaPadded section below the visual: title, description, meta info, CTA
Hover lifttranslateY(-4px) + increased box-shadow — signals the card is clickable
aspect-ratioe.g. 16/9 on the image keeps cards consistent height
Tip. Three things make or break a card grid: consistent image aspect ratios (aspect-ratio: 16/9 on the image container), comfortable internal padding (20–24px), and a clear hover state. Without a hover state, cards feel static and users don't know they're clickable.

Live demo

Hover any card. Notice the consistent aspect ratio and clamped text.

Live · hover

From the journal.

View all posts →
Essay
The quiet art of building software no one notices
When a tool does its job perfectly, it disappears. We've forgotten how to design for invisibility — and it's costing every product team more than they realize.
HK
Hannah K.·May 30·7 min
Notes
A short list of details we got wrong on launch day
Honest hand-written notes after batch 12 shipped. What broke, what surprised us, what we'd do differently in batch 13.
TM
Theo M.·May 28·4 min
Design
Why we picked Fraunces and Inter Tight (and not the obvious ones)
Designing for an editorial-feeling product reference site without using the same six fonts every other AI-built site uses.
SN
Soraya N.·May 25·6 min
Engineering
Scroll-snap is doing more than you think it is
A short tour of CSS scroll-snap features beyond the basics — and where the browser surprises you with native momentum behavior.
DK
Dev K.·May 22·9 min
Field notes
Two weeks in Reykjavík with a camera and a sketchbook
A travel journal as a design exercise. What changed about my work when I let it be slow for fourteen days in a row.
MR
Maya R.·May 19·8 min
Design
An apology for the loading skeleton
The shimmering grey shapes you see while data loads are not lazy filler. They're a quiet promise about what's about to arrive.
RB
Rauno B.·May 16·5 min

Copy this prompt

Prompt · 6.6 Card Component 
Build a blog post card grid with 3 columns. Each card: white background (#FFFFFF), border:1px solid #E5E7EB, border-radius:12px, overflow:hidden, cursor:pointer. Hover state: transform:translateY(-4px), box-shadow:0 12px 30px rgba(0,0,0,0.1), border-color:#D0D0D0. All transitions: 0.25s ease. Card structure: image container (aspect-ratio:16/9, background:#F0F0F0 as placeholder) → content area with padding:20px containing: category tag (small pill, colored background, 11px uppercase text), H3 title (18px, font-weight:600, 2-line clamp with -webkit-line-clamp:2), excerpt paragraph (14px, muted gray, 3-line clamp), bottom meta row (author avatar 28px circle + name + date + reading time, all 13px muted). Entire card is wrapped in an <a> tag. On mobile (under 768px): 1 column. Tablet (768-1024px): 2 columns.

Example sites to study