DesignDojo
1.2-components · 09-card

Estimated time: 6 min

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.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Badge