Card

Cards can be used in light and dark themes. They act as a blank canvas where elements and styles can be placed inside.

All card variants are available in light and dark theme.

Cards are secondary layouts that shouldn’t command too much attention and blend in with whatever background they’re placed on. The card container is the only required element and it consists of a background color, rounded corners, and a thin border.

A card features header, body, and footer sections. Those sections should include a limited amount of content to ensure that the card doesn’t become too tall.

The header section is required, it introduces what the content is and shouldn’t be hidden.

The body section can include a headline, text, an icon, or sometimes an image. The body section describes the content in more detail and shouldn’t be hidden.

The footer section can include normal links or a call to action. It can be hidden if necessary if there’s content included where a user can take an action.

Cards will get thinner or move below each other on smaller screens.

Container padding defines how far away content is from the edges of the component. When cards become wider, the container padding increases. When they become thinner, the container padding decreases.