Content & display

Card

Q: How do people describe a Card in plain words?

those boxed chunks of content in a grid a mini panel with image, title, and a couple lines the rectangular block I click to open a project

Q: How do I implement a Card?

Build a project card with cover image, title, one-line description, and a primary Open action; entire card may be clickable but keep nested buttons from conflicting.

A contained surface grouping related content and actions as one unit.

Also known as tile · content card · panel

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Card".

Build a project card with cover image, title, one-line description, and a primary Open action; entire card may be clickable but keep nested buttons from conflicting.

Anatomy:
- media: Optional image or preview on top.
- body: Title, meta, and supporting text.
- actions: Optional buttons or menu; don't nest competing full-card links carelessly.

Preferred API / pattern: `shadcn Card`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Nested interactive elements fighting one big link
○Avoid: Inconsistent padding across card types in the same grid.
○Avoid: Card as the only structure for a full settings form

In plain wordsHow people search for it

“those boxed chunks of content in a grid”“a mini panel with image, title, and a couple lines”“the rectangular block I click to open a project”

AnatomyOpen for part names

media: Optional image or preview on top.
body: Title, meta, and supporting text.
actions: Optional buttons or menu; don't nest competing full-card links carelessly.

How to write itOpen for stack patterns

Web (HTML/CSS)article / section surface

React + Tailwind + shadcn/uishadcn Card

SwiftUIrounded Rectangle + VStack

Ant Design<Card>

Notes

Cards cluster information for scanning in grids. One primary action per card is easier than nested clickables. Prefer consistent heights in a row or allow natural height with clear alignment rules.

Common mistakesHumans and models trip here

Nested interactive elements fighting one big link: use one click target pattern carefully.
Inconsistent padding across card types in the same grid.
Card as the only structure for a full settings form: use a plain form layout.

More failure symptoms on AI broke it.

Related patterns

Button / Action ButtonA semantic control for an action, with hierarchy expressed through its visual variant.AvatarA compact image or initials representing a person or entity.Empty StateA deliberate screen when a list or view has no items—guidance, not a blank void.

Spotted a wrong name or missing pattern?

Message on X