Card
Usage
Cards are one of the most common components to use if you want to create separation between actionable topics in an interface.
They should be easy to identify and structured with a title or image to ensure ease of understanding.
A card is self-describing. It does not necessarily need a context around it to explain the information it gives or the action it leads to.
Several cards can be used in an interface, as in the case of a dashboard, but it is important that they include an action. Thus, their use is not suitable if the objective is limited to adding a simple surface.
Color usage
The color of the Background is white, it can be exceptionally changed for another color which is not defined by our design system.
The Presence of a Border or an elevation depend on the type of card you want to use (see “Type” section).
The color of the border is fixed on Border/Neutral/Decorative.
The render of the elevation is fixed by the design system.
Typography
The typography within the card is not fixed and can be challenged. However, there are standards that can be used for many applications either if it is a title, a subtitle or copy.
For more information see the Typography guideline.
Types
The design system includes two types of cards: Filled and Outlined. Each of these styles can be used in many different situations, and it is the responsibility of the designer to decide which one will be the most suitable for their interface.
Filled
This style includes a native elevation without any border, it is can be perceived as less "rigid”.
The level of elevation is 1dp, but it can be changed if a better level of differentiation is needed.
Outlined
This style includes a native grey border and no elevation, which can sometimes be perceived as more structuring.
Border details: inside solide stroke of 1px, color is Border/Neutral/Decorative
Predefined types of cards
Our design system includes 3 predefined types of cards: "card", "card large" and "card largest". These predefined designs can be customized to suit your interface.
Anatomy and content
Container (or surface)
The container is the area which limits the total size of the card, and whose elements cannot exceed.
Top content
Composed by a title, a subtitle and possibly an additional component, it is the area that will allow the user to understand the subject of a card.
Card title
The title of the card is the most common element of this component. It contextualizes the card and allows to quickly differentiate the various cards displayed on an interface.
Subheader
The subtitle is not mandatory and is used to provide more information on the subject. It can be used, for example, to indicate a date, a place, a folder size …
Thumbnail or checkbox/ radio button (…):
Contextualizes the subject of the card or marks the possible interaction for the user.
Other types of content
Media
Media such as an image, illustration or video can be used depending on the needs of the product.
An image is frequently positioned at the top or middle of the card and runs the width of the card.
Button
Buttons can be integrated, often at the bottom of the card, to indicate to the user that an important action is required.
Card components initially include 2 buttons and even if no limit has been set, more than 2 actions could be handled by an Action Menu.
It is therefore up to the designer to think about the importance of these actions and their impact on the user in order to define how many actions should be carried by buttons within their card.
Divider
A divider in a card is used to split and level any type of information and content.
Icons & Icon button
There are no rules regarding the use of icons in a card, but it is common for some to be used in specific cases, while others should be avoided because another existing component would be more appropriate.
For example :
Using a light bulb to assist the user or an arrow to access another interface is possible and is already part of our interfaces.
On the other hand, using a chevron positioned at the top right side of the card is not acceptable because the Accordion component already sets the behavior of an expandable container.
Chips
A chip can be used within a card and is often used when, on an interface, several cards share a common subject.
In this way, the user will be able to differentiate the cards on the screen by means of the chips attached to them.
NB : It is not advisable to display more than 3 chips to avoid information overload. It would be more effective to differentiate the information in various ways and/or to revisit the importance of the information contained in the chips.
For more information, please refer to the Chips guideline.
Tabs
Its use is very rare and must meet a strong navigational need.
Even if it is considered, this usage has never been implemented in Cegid interfaces and no examples are available. It would therefore be interesting to discuss its use with other designers to see if it is the best option available.
Caution : Be careful to limit the number of usable tabs to avoid them becoming a constraint.
Behaviour and interaction
A card must always be actionable to avoid misunderstanding from users.
The behaviour of a card is not fixed and depends on the action that follows it or on what it is made of.
It is up to the designer to choose the behaviour that is appropriate to the situation.
Some examples:
A card associated with an expand icon is frequently associated with a stretch animation, and an animation that causes the card to stretch up the page is one of the most common ways to do this.
Several possible cards in an interface : Example of a dashboard.
Responsiveness and density
The card adapts to the screen (the grid) in which it will be displayed.
It can be useful to test the behaviour of your cards according to different screen sizes to ensure a responsive fit.
Also the maximum card size and the way the responsive works will depend on the elements that surround it as well as what makes up the card.