Developer TIP
In the last major update, component was divided into two parts: Header and Body. It was done to make it easier to use the component. Also, Card now has a white background.
Description
Card is a component for visually grouping data and other components into widgets.
Component composition
Component consists of the following:
Card.HeaderCard.BodyCard.TitleCard.Description
Appearance
| Size | Example |
|---|---|
| Small |  |
| Big |  |
Card.Header
Card.Header includes:
- Title (
margin-bottom: 8px) - Optional additional information below the title (
margin-bottom: 8px) - Optional general widget controls (for example, export or view settings)
Title
For the card title use 16px text (--fs-300, --lh-300) with font-weight: var(--bold).
Description
The card may have a description. It usually contains an explanation of what the data is based on, interesting insight/advice on the visualized data, etc.
Margins and paddings
Card.Body
Card.Body includes:
- Optional top controls (for example, filters, buttons)
- Content (
margin-top: 20px) - Optional bottom controls (
margin-top: 20px)
TIP
The presence of optional elements depends on the specific interface case.
Paddings
| Case | Paddings |
|---|---|
| Chart |  |
| Table |  |
Margins
Layout
You can divide content into sections if needed.
Interaction
By default, the card is non-clickable. But you can use --intergalactic-box-shadow-card-hover token for hover state and make title a clickable link if necessary.
