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.
Text Content
To ensure a consistent and readable experience, the textual content of cards must be concise and easy to scan. Well-structured text helps maintain visual hierarchy and prevents information overload.
Titles and subtitles must fit in a single line;
Descriptions are limited to two lines if there is a subtitle;
If there is no subtitle, descriptions can be up to three lines long.
This limit promotes clarity, readability and visual consistency between the components. Text that is too long makes it difficult to read quickly, creates visual clutter, and compromises the overall harmony of the layout.
Using the lanscape variation only with a title. Use the compact variation instead.
Variations
Portrait;
Landscape;
Compact.
To meet the different needs of the products, the Card pattern has been divided into three variations:
Portrait variation cardsLandscape variation cards
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.
Portrait variation applied at Docs
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.
Landscape variation applied at Digital Sign
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.
Compact variation applied at Ekon Dashboard
Behavior
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.
The Multi Selection feature allows users to select multiple cards simultaneously, which can be useful for actions such as organizing, moving or deleting items in bulk.
This interaction is particularly effective when visual distinction is important – for example, when selecting folders or content types, where a visual representation helps the user to identify and select items more intuitively.
However, this feature should only be used when it truly enhances the user experience. In cases where the visual context is less important, such as forms, it’s more appropriate to use components such as select boxes or checkboxes.
Multi-selected cards
Chips VS Status Indicators
Chips are used to represent categories, filtering, or additional metadata. They help to classify or provide quick context for the user.
Status Indicators are used to visually represent the current status of an item, often with an associated color mode.
Card with a Chip
Card with a Status Indicator
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.
