Card

Definition

A card is a bounded container that groups related content — title, description, media, and actions — into one scannable unit. Surface, border, or shadow separates it from the page around it.

The pattern is content grouping: one topic or object per card, so users can scan a grid or list and compare peers at a glance. Whether a card is static or interactive is a configuration choice — not a different component.

Also known as

People also call this a panel, tile, or content card.

Component Anatomy

When to use it

Use a card to present discrete, peer items with a shared structure:

• Product or content grids — thumbnail, title, price or excerpt in a repeatable tile
• Dashboard widgets — KPI, chart, or status in a bounded panel
• Settings or profile sections — group related fields or metadata
• Feed or list items — post preview, notification, or message summary
• Marketing features — icon, headline, and blurb in a three-up layout

Avoid a card when content is tabular or sequential (use a table or plain list), when there is only one line of text, or when the layout is full-page (page sections need no extra surface). Don't wrap every paragraph in a card — overuse flattens hierarchy and adds noise.

Static cards display information. Interactive cards navigate, select, or expand — make the affordance clear with hover, focus, and cursor. Horizontal cards place media beside text (feeds); vertical cards stack image above copy (grids).