The card is a flexible container composed of diverse elements and functionalities dealing with the same subject.

General guidelines

Cards are used to show different types of related content (e.g. text, photos, icons, charts, digital data, buttons, selection controls, etc). The layout and the format should adapt with the content.

Keep it consistent: cards with a similar content on the same page must be consistent in size and types/number of elements (e.g.: product lists, query lists, dashboard lists, etc.).

Sort the information by order of priority using different text styles to rank the elements.

Visual guidelines


Use a white background (with a light shadow) by default for the cards.

For the page background we recommend, when possible, to always use an off white background color to ensure the card stands out from the page. We recommend you use the Cool grey-10 color swatch or HEX code #EFF1F4 / rgb(239, 241, 244).

Always use our 3px-radius on the corner of the cards.



Cards have 4 states: default, hover, active and open.



Place the elements using the chosen desktop layout. Therefore, the margins are most of the time 32px and the padding 24px.

According to the content, this padding may evolve and could be reduced (e.g.: on a dense chart or on a stretched mobile).

A picture can be 100% in the container.



The default margin on mobile is 24px.

Use a minimum space of 16px for the margin and padding.

Best practices

You can assemble any atom to build any card.


Custom cards should not include more than 9 elements on it. If so, use a collapse feature, redirect to another page, a modal or use tooltips and popover or think about using alternatives like a panel or an accordion.


Cards can be used in lists. They can be laid out in a row, a column, or even fit the whole width of the page.


Don’t mix cards with inconsistent content on the same page.


Choose only one primary action, place it at the bottom right of the card. For secondary actions, opt for a secondary button, a ghost button or a link.


Don’t use more than one primary call to action.


Use the gutters provided by the layouts to let the content breath. Place the cards on the page according to the 8px grid system, and the chosen-12-columns layout.


Don’t use cards inside cards inside cards.

Responsive behaviours
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top