Card – Design

​

Anatomy

The Card consists of two primary elements that work together to group related content together.

1. Container
2. Content

​

Options

The Card supports flexible content, padding, and background configurations to accommodate various grouping scenarios.

​

Content

​

Padding

​

AI Mark

Use the AI Mark with Text variant="headline" when the card title should indicate AI-generated content.

​

Backgrounds

​

Behavior

The Card responds to interactivity requirements while maintaining consistent content grouping.

​

Usage Guidelines

Use the Card when a self-contained group needs its own surface to stand apart from the rest of the page: a metric tile in a row of peer tiles, a chart, or a group with no section heading above it. Most page content does not need a Card. Structure pages with a Layout, section headings, and spacing, and leave the Card out of page sections, whole content areas, a lone Data Table, and other Cards.

​

When to Use

Use the Card when:

• Peer tiles – Sibling blocks of equal weight sit side by side, such as KPI or metric tiles. Use one Card per tile, never one Card around the whole row.
• Charts – A chart is a self-contained unit. Wrap each chart in one Card and place the chart title inside that Card.
• Isolated groups without a section heading – A group needs a distinct surface and has no section heading above it on the page. A short label inside the Card, such as “On-hand value”, is not a section heading.

​

When not to use

Avoid using the Card for:

• Page sections – A headed text, list, or form section on a page does not need a Card. Introduce the section with a heading and separate it from the next section with spacing.
• Whole content areas – Do not wrap Page content, a Layout Item, or a full row of tiles in a single Card. The page already provides the surface.
• A lone Data Table – Place the Data Table directly in the page content. The Data Table has its own border and background.
• Content inside another Card – Do not nest Cards. Use headings, body text, and a Divider to structure the content of a single Card.
• Every block “to be safe” – When a Card is not clearly one of the cases in When to Use, leave it out. Extra Cards add borders and padding that flatten the page hierarchy.

​

Alternatives

​

Section headings vs Card

Use a headline Text with spacing to group page content. This is the default way to structure a page: inside a Page, section headings start at h2 because the Page Header renders the h1. Use a Card only when the group must stand apart on its own surface.

​

Divider vs Card

Use a Divider to separate adjacent sections when whitespace alone does not provide enough grouping, such as in high-density layouts and lists.

​

Details vs Card

Use Details to show or hide supplementary information in a collapsible section instead of placing it in a Card.

​

Page Panel vs Card

Use a Page Panel for content that sits beside the main content, such as details for a selected item or a live activity feed, instead of a column of Cards.

​

Edit Card vs Card

Use an Edit Card when a summary of grouped settings needs a toggleable editing state.

​

Interactive Card vs Card

Use Interactive Card when the card itself needs an interaction. If no interaction is needed, or only an inner element needs an interaction, use Card instead.

​

How to Use

​

Structure page sections with headings, not Cards

Introduce each page section with a heading and separate sections with spacing. Do not wrap each section in a Card.

​

Group related content

Group related content and actions within a single container. Don’t add unrelated content to a card.

​

Nesting cards within cards

Don’t nest cards within cards. Use headings, body text, and actions to provide structure to your layout.

​

Adding interactive elements to a Card

Inner content of a Card can add interactive elements. Do not make the Card itself interactive, use the Interactive Card component instead.

​

Content

Content within the Card should be clearly organized and focused on a single purpose.

• Place a heading inside the Card to make its purpose clear, following the heading structure of the page. Do not repeat the same heading as a section heading above the Card.
• Avoid too many call-to-actions in a single card.
• Cards should have an intentional focus, avoid overloading a single card with too much or unrelated information.
• Cards of similar importance should be structured in the same way.