Card UI Design: Spacing, Media and Clickable Cards

A card should answer three questions quickly: what is this item, why does it matter, and what happens if I select it? Rounded corners cannot compensate for an unclear title or a click target that behaves differently from its neighbors. Start with the information and interaction, then give the container enough structure to support both.

Define the card before decorating it

Write a content contract for each card family: title, optional thumbnail, supporting detail, metadata, and destination or action. Decide which fields are required and what happens when optional fields disappear. A product card and an account summary can share surface tokens without sharing the same layout.

Use the box shadow generator to compare a subtle raised surface against a border-only version on your actual page background. Keep the content identical while changing elevation; otherwise, you cannot tell which treatment improved grouping. Save the chosen CSS as a reusable surface style rather than tuning individual cards.

A card is not automatically a button. A report preview usually navigates, a selected plan changes a value, and a financial summary might be entirely static. Set that behavior before drawing hover states. For broader layout decisions, consult the dashboard grid and flexbox guide.

Establish spacing that reveals relationships

Treat internal spacing and the gap between cards as separate decisions. As a starting point, try 20–24 pixels of padding on a comfortable desktop card and 16 pixels on compact mobile cards. These are working defaults, not universal minimums. Increase them when content or touch interactions need more room.

Use smaller gaps for related information: perhaps 8 pixels from title to description, 12 from description to metadata, and 20 before an independent action row. Equal gaps everywhere make the card read like unrelated fragments. Repeated spacing communicates structure before someone reads the copy.

Set a deliberate density budget. A directory might need a name, role, location, and availability; a discovery feed might only need a title and image. Removing lower-value content often improves scanning more than reducing padding. Do not squeeze five lines into a layout designed around two.

Test a short title, a three-line title, missing metadata, and a translated action label together. Avoid fixed card heights unless the content contract guarantees they work. In a comparison grid, align action rows with layout rather than inserting empty paragraphs. Equal-height containers should not require clipped information.

Separate borders, elevation, and interaction

A surface boundary groups content; elevation suggests layering. Start with one quiet border when cards already sit on a distinct background. Add shadow when separation genuinely helps, not because every component needs depth. The soft shadow guide explains layered shadows if a single blur looks muddy.

Keep border width stable between default, hover, selected, and focused states. Changing from one to three pixels can shift content or alter perceived size. Use an outline or inset treatment for added emphasis. A selected card should have a persistent indicator, such as a checkmark and label, rather than merely borrowing its hover appearance.

Make focus visibility independent of the shadow. A faint lifted edge is a poor keyboard cue, especially on dark surfaces. Review the WCAG focus-visible explanation when defining the focus treatment. Avoid suppressing the browser outline until a clear replacement exists.

Hover should confirm the target without causing the grid to jump. Small changes to border color or background are usually enough. Do not imply clickability on static summaries by giving them the same pointer cursor and lift effect as navigational cards.

Give media a consistent job

Choose a media ratio by content type. A landscape article preview might use 16:9, while an object catalog could use a square. Consistent frames stabilize the grid, but identical cropping is not always appropriate. Use cover for editorial photography and consider contain for products whose complete shape matters.

Document the focal point, background, and fallback behavior. A portrait cropped through the eyes is a content problem, not just a CSS problem. Ask editors to preview narrow cards as well as wide ones. The MDN object-fit reference describes the available fitting behaviors.

Reserve image space before loading so text and controls do not unexpectedly move. Keep useful text outside the image when possible. If a title must overlay photography, provide a dependable scrim and test both bright and dark images rather than checking one attractive sample.

Missing media should not resemble a failed download forever. Use an intentional neutral fallback, or remove the media region consistently for that card family. Decorative images can use empty alternative text; meaningful images need an alternative that adds information instead of repeating the nearby title.

Make the whole card clickable safely

For a simple card with one destination, wrapping its noninteractive content in a single native link is often the clearest implementation. It preserves keyboard activation, browser status previews, copy-link behavior, and opening in a new tab. Do not replace these features with a click handler on a generic container.

The MDN anchor reference documents content restrictions: a link must not contain other interactive controls. This compact pattern therefore assumes there are no save buttons, menus, or additional links inside the card.

<a class="card" href="/reports/quarterly-review">
<h3>Quarterly review</h3>
<p>Revenue trends and operating highlights.</p>
<span>Read report</span>
</a>

.card {
display: block;
padding: 1.25rem;
border: 1px solid #cbd5e1;
border-radius: 0.75rem;
color: inherit;
text-decoration: none;
}
.card:hover { background: #f8fafc; }
.card:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

When the card includes independent controls, use a title link and separate sibling buttons. A stretched-link overlay can enlarge the main target, but it complicates text selection and stacking. Prefer explicit targets when users need to select content, compare values, or activate multiple actions. Never solve nested controls by merely stopping event propagation.

Before shipping, verify the interaction contract with mouse, touch, and keyboard. Tab through a full grid, open a destination in a new tab, and test a long link label. Check that secondary controls never trigger navigation. Confirm that focus is not clipped by rounded overflow containers and that the destination remains understandable without seeing the image.

Key takeaways

• Define required content and behavior before choosing the surface style.
• Use spacing to express relationships, not just create breathing room.
• Keep borders, selection, hover, and keyboard focus visually distinct.
• Set media ratios and crop rules using realistic content extremes.
• Use one native link for simple cards and separate controls for complex ones.