card

A card groups content about one thing in a framed panel, often under a short title. It is the usual container for grouped content.

when to use

• To group content about one thing under a short title: a volume's details, a run's summary, a section of settings.
• To give a table or a list a frame and a title, with a flush card.
• As a sunken card, for a panel inside another panel.

when to use something else

• For something people open or launch. A card isn't clickable. An entry on the home page is a tile; an action is a button.
• For padding or a background without a title. Use a box.
• For a message, such as a save that worked, a list that could not load, or something that needs attention. Use a banner.
• For content that has to interrupt people. Use a modal.

anatomy

1. Frame. A square panel with a thin border.
2. Header (when there is a title or an aside). A row across the top, with a thin line below it: the title on the left, the aside on the right, and a gap between them.
3. Title. A short name for what's inside, in monospace and lowercase. It can shrink, and it wraps onto a second line when it is long.
4. Aside (optional). The card's own actions, or a count, at the right end of the header. It never shrinks.
5. Body. The content, with space around it. A flush card leaves that space out.
6. Footer (optional). A row across the bottom, with a thin line above it.

variants and states

With no title, aside or footer, a card is a framed panel with space inside.

A title goes above the body, and a footer below it.

The aside holds the card's own actions and a count. When the header gets crowded, the title gives way to it.

A sunken card sits on a darker shade of the canvas. Use it for a panel inside another panel, so the two read apart.

A flush card leaves out the space around its body, so a table meets the frame. The card's frame is then the only one: the table inside draws none of its own.

When people should be able to find a card by its heading, give it a real heading as its title, and name the card as a region by that heading (see accessibility).

behaviour

• A card has no click, no look under the pointer, and no selected or disabled state. It takes no focus; the controls inside it do.
• The header comes first. So tab reaches the actions in the header before the body, and the footer last.

The full keyboard map is on the card's React page.

accessibility

• A card has no role and no name of its own.
• An action in the aside that is only an icon needs a name. Use an icon button, which requires one.
• The title is lowercase only in its look. A screen reader reads it as you wrote it.

Today: the title isn't a heading, and it doesn't name the card. When people should find the card by its heading, make its title a real heading; it can keep the title's look. Then make the card a region named by that heading, as the last example above does.

content

• The title. A short noun phrase in lowercase that names what's inside: “volumes”, “last backup”, “storage-01”. No verbs, and no full stop.
• The body. The reader's text, written in sentence case.
• The aside. One or two actions, or a count. Anything more goes into an action menu.
• The footer. A summary, such as “3 of 12 shown”, or the card's closing actions.

do and don't

related

• Box: padding and a background, without a header.
• Table: the usual body of a flush card.
• Tile: an entry on the home page that people click.
• Heading: the titles of pages and sections, above the cards.

specs

• Order: the header, then the body, then the footer, so tab reaches the aside's controls first.
• Role and name: none of its own. The title renders in a div, not a heading.