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

Cards

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

Usage

Use the card to show a variety of content (e.g.: text, photos, data, tables, buttons, selection controls, etc.). The card is not a fixed format, its layout and format adapted in relation to the contents.

 

Best Practices

  • The contents of a same card must be linked to each other.
  • Cards having similar subjects on a same page must be consistent in size and types of elements (e.g.: product lists, query lists, dashboard lists, etc.).
  • Always use a clear title that expresses the nature of the card and its usage.
  • Cards can be entirely clickable. 
  • If a call to action is required, opt for a secondary button, a ghost button or a link. 
  • Only use one call to action and place it at the bottom right of the card.
  • Repeated optional actions may be added (edit, bookmark, help, zoom, etc.) and must be place to the upper right of the card.
  • Sort the information by order of priority by using different text styles to rank the elements.

 

Placement

The cards should be placed on the page according to the chosen grid system. They can be layed out in a row, or a column, or even occupy the entire page.

Cards@2x
Visual

Appearance

For better readability, the cards must appear on a gray background (for example: #EFF1F4). A padding of 16px is recommended, but it adapts itself to the contents. The card is white by default, but colored cards may be used for specific needs.

Behavior

The cards exhibit three behaviors: normal, focus and hover.

Card System@2x
Back to top