Card Layout

When to Use a Card Layout

Use card layouts to visually group related content. Unlike box layouts, card layouts don’t have a separate title bar. Cards also allow you to choose a background color to help highlight their contents.

A set of four cards is used in this example dashboard to highlight four performance metrics. The card background colors can help viewers differentiate poor- and strong-performing metrics.

Like section, box, and billboard layouts, cards span the full width of their containers. Use columns to arrange groups of cards; the containing column width will determine the width of each card.

Each card may also be associated with a link to allow user interaction. Consider cards as a richer alternative to form input choices like buttons and radio buttons.


Use linked cards to present a set of clear and prominent choices to users


Avoid using interactive components, such as links or buttons, within the contents of the card when the card itself has a link. This may make it difficult for the user to differentiate between clicking on the card or one of the components within the card.

Open in Github Built: Wed, Aug 16, 2023 (04:37:39 PM)

On This Page