Skip to main contentCarbon Design System

Cards

Specs

Cards have 16px | 1 rem margins all around, including dashboard widgets.

Cards should have 16px margins all around

Structure and spacing measurements for small side panels | px | rem.

Typography

All card titles, captions and labels are set in sentence case. Set body text appropriately based on content.

Cards should have 16px margins all around

Structure and spacing measurements for small side panels | px | rem.

Double heading

TypeCarbon tokenrempx
Titleproductive-heading-05232
Caption / subtitlelabel-01116

Large heading

TypeCarbon tokenrempx
Titleheading-031.2520

Small heading (heading and caption)

TypeCarbon tokenrempx
Titleproductive-heading-010.87514
Caption / subtitlelabel-01116

Body

Body text / DescriptionsCarbon tokenrempx
Cards with < 4 lines)body-short-010.87514
Cards with > 4 lines)body-long-010.87514

Color

For general card usage, use a white card when the page background color is gray 10.

If you need to draw attention to a card with unique content such as a special offering on the catalog page, use a gray 90 or gradient color background for the card. Please refrain from using marketing messages that may cause the user to percieve the card as an advertisement.

Card colors

On gray 10 page/section backgrounds use white cards.
On white page/section backgrounds or places where you want to draw attention use gray 90 cards.

Cards use floating default buttons (primary, secondary, ghost, etc.) Arrow icons can also be used in cards on overview pages.