In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Card

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

Base

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

You can also use a colored background for specific needs. 

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

Picture shows an elevation for the base of a card.

Behaviours

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

Picture shows the different interactive states of a card.

Desktop

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.

Picture shows a layout with cards with padding positioned.

Mobile

The default margin on mobile is 24px.

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

Picture shows a mobile with a skeleton of card.
Best practices
do don't about the assembly of a card.

You can assemble any atom to build any card.

do don't about the assembly of a 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.

do don't about the consistency between cards.

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.

do don't about the consistency between cards.

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

do don't about the usage of call to action between cards.

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.

do don't about the usage of call to action between cards.

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

do don't about the usage of card on layout and grid.

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.

do don't about the usage of card on layout and grid.

Don’t use cards inside cards inside cards.

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