Component Card

Card

Group related information into a bounded, scannable surface.

Card anatomy

When to Use

Feed or dashboard summaries where each item has similar fields.
Product or content collections that repeat preview patterns.
Settings groups when controls need one visual container.

When NOT to Use

Use cards for repeatable chunks that share title, metadata, and actions.

For a single uninterrupted reading flow, use simple sections and spacing instead.

Variants

Media card

Stats card

Action card

Confused?

Use Card for persistent layout blocks, and use Modal for temporary interruptive decisions.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Create a reusable card component with title, supporting text, and action row, including hover elevation and a selected state.

Pencil Prompt

Design a content card with clear padding zones for title, body, and actions, then show default and selected variants side by side.

Next Lesson

Badge