Card

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.

Card is a component for visually grouping data and other components into widgets.

Component consists of:

• Header (can have Title and Description inside);
• Divider (use only for big cards);
• Body.

For the card title use 16px text (--fs-300, --lh-300) with font-weight: var(--bold).

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.

You can divide content into sections if needed.

By default, the card is non-clickable. But you can use --box-shadow-card-hover token for hover state and make title a clickable link if necessary.