Cards
Cards are boxes that group together a set of related information.
- Overview
- Specs
- Guidelines
Pattern
Cards are boxes that group together a set of related information.
A Card can contain different types of elements, from images and icons to actions, and is used to provide an overview of more detailed information.
They should be easy to analyze in order to obtain relevant and actionable information..
- A: Portrait style
- B: Lanscape style
- 1: Image or Adornment
- 2: Title
- 3: Subtitle
- 4: Description
- 5: Informative Chip
- 6: Color bar
- 7: Status indicators
- 8: Additional actions
- 9: Buttons
Used for:
Favorites
Display the user’s favorites on the product dashboard.
File Management
Cards can represent individual files or stored documents.
Don’t use for:
Complex data visualization
Do not use cards as the only method for presenting complex data visualizations or analyses.
Demo
Access the Figma file and inspect the element using Dev Mode.
What’s New?
- Added color bar;
- Added status indicator;
- Added fix action;
- Removed selectable chip variation;
- Updated guidelines.
Related
States
Enabled
.enabled {
border: 1px solid var(--Greys-Grey-5, #CBD3DB);
background: var(--Greys-Grey-1, #FEFEFE);
}Hover
.hover {
border: 1px solid var(--Greys-Grey-6, #ADB7C5);
background: var(--Greys-Grey-2, #F7F8F9);
}Selected
.selected {
border: 1px solid var(--Theme-100, #ADB7C5);
background: var(--Theme-10, #F7F8F9);
}Focus
.focus{
border: 1px solid var(--Theme-100, #ADB7C5);
background: var(--Greys-Grey-1, #FEFEFE);
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Behavior
The Card pattern has at least two compulsory elements, namely the title and an image/adornment to make a visual distinction between other cards.
Here are some complementary elements that cards can have:
- Subtitle;
- Description;
- Chip Informative;
- Status Indicators;
- Actions.
Variations
- Portrait;
- Landscape;
- Compact.
To meet the different needs of the products, the Card pattern has been divided into three variations:
Portrait
The name of this variation derives from the display style of the card. In this case, portrait means that the elements will be placed vertically.
This variation is for cases with a lot of content on a card.
Landscape
The name of this variation derives from the display style of the card. In this case, landscape means that the elements will be placed horizontally.
This variation is for cases without too much information or to be displayed as a list.
Compact
Compared to the two previous variations, the compact variation can only be applied if the content type is an adornment, but it can be applied in portrait or landscape style.
This variation is more common in cases where a large number of cards need to be shown, for example in the case of Ekon’s favorites.
Scaling & Alignment
Cards can be resized to fit the screen and should not exceed 1/3 of the screen.
Cards and text elements must always be left-aligned. Only actions should be right-aligned.
For more than two additional actions, use the overflow menu instead of buttons.
Use more than two buttons.
Use buttons with more than 180 px of text.
Organization
To meet the need to organize the cards for specific cases, a color bar has been added to the left-hand side of the card. This color bar can be used in all variations (portrait, landscape and compact) and styles (adornment and image).
This color bar is only used for the purpose of organizing shared folders. For example, if you want to add a status to a card, a status indicator would be recommended.
The colors applied are the accent colors, which are adapted to either light or dark mode.
Case Studies
Enhancing Lists within Flyouts with image previews
