Card

Anatomy

import {Card} from '@staffbase/design';

<Card />

API reference

Card

When to use

• To group related content and actions into a single contained surface on the page.
• To section a dashboard or overview page into distinct areas, such as an insights panel or a summary widget.
• When a set of items belongs together and needs a visual boundary against the page background.
• When the content stays in place on the page — a Card is a static surface, never an overlay.

When not to use

• Don’t use a Card as an overlay anchored to a trigger — use Popover instead.
• Don’t use a Card as a modal surface that blocks the page — use Dialog instead.
• Don’t use a Card for a destructive or critical confirmation — use AlertDialog instead.
• Don’t use a Card as a panel that slides up from the bottom of the screen — use BottomSheet instead.
• Don’t use a Card to communicate a status, warning, or system message — use Banner instead.
• Don’t attach the click handler to the Card element itself — a Card is not focusable, so use Button instead.
• Don’t use a Card as a decorative frame around a single control or a single paragraph — use plain layout spacing instead.

How to use

Structure

• Card renders one container element with a border, a surface background, and an 8px corner radius; compose everything inside it yourself.
• Start each card with a heading that names the content grouped inside it.
• Keep one topic per card, and split unrelated content into separate cards.
• Place card actions together in one area, usually at the bottom or next to the heading.
• Don’t nest a card inside another card; separate content within a single card with spacing or a Separator instead.

Padding

• Card ships without padding, so always add padding to the card yourself.
• Use padding from the 8px grid — 16px for compact cards and 24px for content-heavy cards.
• Use the same padding on all four sides so the content sits evenly inside the card.
• Use the same padding for every card in the same layout.

Layout & spacing

• Space adjacent cards at least 24px apart so each surface reads as separate.
• Let a card fill the width of its layout column instead of setting a fixed width.
• Give cards in the same row equal height so their edges align.

Nested elements

• Give elements nested inside a card a smaller corner radius than the card’s 8px, such as 6px or 4px.
• Don’t give a nested element the same or a larger corner radius than the card.
• Inset nested surfaces by the card padding rather than letting them touch the card border.

Background

• Place cards only on the neutral base background, which is the default page background.
• Don’t place a card on the neutral surface background — the card shares that background and loses its boundary.
• Don’t place a card on a colored or image background, and don’t stack a card on top of another elevated surface.

Styling

• Keep the default card styling — don’t add shadows, custom borders, or a custom background color.
• Don’t change the card’s 8px corner radius.
• Keep every card in the same layout visually identical, and let only the content differ.

Accessibility

• Card has no ARIA role and communicates grouping visually only, so the content inside must stand on its own.
• Use a real heading element inside the card that fits the page’s heading hierarchy, so the grouping is announced to screen readers.
• Card is not focusable — give every action inside the card its own focusable control.
• Order the content inside the card so the focus order matches the visual reading order.

Content & UX copy

• Use Title Case for card headings.
• Keep card headings to 1–4 words that name what is grouped inside.
• Don’t repeat the page title as a card heading.
• Label card actions with the outcome they produce, such as View All or Add Member.