Cards

When to use

Use cards to:

• Group related information that needs visual separation from the surrounding content.
• Display a collection of similar items, like products, articles, or users, as repeatable, scannable units that are easy to compare at a glance.
• Present a self-contained piece of content with its own action, like view, edit, or select.
• Create a consistent, repeatable structure for content that recurs throughout the interface.

When not to use

Don’t use cards for:

• A single block of unstructured content. Don’t wrap it in a card just for a border. Use utility classes for border, radius, and padding directly, or use no container at all.
• A simple list of static text items. Use a semantic HTML list instead of boxing each item in a card.
• Complex data with multiple columns to compare. Use a table instead. Cards make row-to-row comparison harder.
• A complex form. Use form components directly.
• Checkbox or radio selection. Use Selectable Cards instead.
• A container that should be interactive itself, like a link or button, for navigating to other pages or modals, or for link hubs. Use Tiles instead.
• Secondary content or actions on demand. Use a dialog instead. Cards don’t carry the elevation needed for temporary or overlay content.
• Full-width callouts. Use a banner instead of a card.

Considerations

Layout constraints

• Cards need page margin. Ensure it’s added to the page or container if it spans the page.
• Always put cards in a grid or space where the width is constrained.

Consistent structure

• Keep headers concise and consistent across similar cards so a set stays scannable. A title should tell users what the card is about at a glance.
• Keep media consistent too, matching aspect ratio and treatment across a set of cards so a grid or list stays visually aligned.
• Don’t vary the structure, order, presence of image, or number of actions, between cards in the same set. Inconsistent structure breaks the visual rhythm that makes a card grid easy to scan and compare.

Clear actions

• Give each card a single, clear primary action. If a card needs more, make one action primary and move the rest to a secondary link or overflow menu.
• Don’t stack multiple competing calls to action of equal visual weight on one card. It’s unclear what the user is meant to do.
• Don’t wrap the whole card in a single link if it contains more than one interactive element, like a title link plus a separate button. Nested or duplicated links create confusing keyboard and screen reader behavior.

Concise content

• Keep card content short and skimmable: a title, brief supporting text, optional media, and an action. Truncate or summarize long text rather than letting cards grow to arbitrary heights.
• Don’t nest a card inside another card, or nest complex components like tables, forms, or tabs inside a card. It adds visual noise and makes the containment hierarchy unclear.