CSS Card Designs

Cards organize related content into a visual unit: heading, description, supporting details and a clear action.

Use a semantic <article> when the content can stand alone, with a heading and readable body text. Spacing and a gentle border distinguish the card; use a shadow sparingly for elevation.

Cards must remain usable at narrow widths. Give text containers min-width:0 when placed inside Grid or Flexbox, and avoid fixed heights on content cards.

The card box establishes a visual surface and padding; hierarchy comes from heading size, muted description, and a recognizable link.

Create a compact bordered article.

HTML

<article class="info-card"><h3>City walking tour</h3><p>Explore the neighborhood at your own pace.</p><a href="#tour">View details</a></article>

CSS

.info-card { max-width: 340px; padding: 18px; border: 1px solid #cbd5e1; border-radius: 10px; } .info-card h3 { margin: 0 0 8px; } .info-card p { color: #475569; line-height: 1.5; } .info-card a { color: #1d4ed8; }

Rendered output

Observe: The article uses whitespace and hierarchy instead of a decorative background.

Add a price row, status badge and controlled shadow.

HTML

<article class="info-card"><span class="badge">Popular</span><h3>Starter camera</h3><p>Compact design for everyday adventures.</p><div class="card-bottom"><strong>$149</strong><a href="#camera">View product</a></div></article>

CSS

.info-card { max-width: 340px; padding: 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 8px 24px rgb(15 23 42 / 10%); } .badge { display: inline-block; padding: 4px 9px; border-radius: 999px; color: #115e59; background: #ccfbf1; font-size: 12px; } .info-card h3 { margin: 12px 0 7px; } .info-card p { color: #475569; line-height: 1.5; } .card-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .card-bottom a { color: #1d4ed8; }

Rendered output

Observe: The badge, heading, description, price and link form a readable visual hierarchy.

The card box establishes a visual surface and padding; hierarchy comes from heading size, muted description, and a recognizable link.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• A fixed card height may clip expanded or translated text.

• A clickable-looking div is not a substitute for a real link or button.

Add a second card and place both in an auto-fit CSS Grid.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Keep cards semantically meaningful, readable, and flexible in height.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.