Limit the number of action icons on the card to 3, ensuring a clean and intuitive interface. Utilize an overflow menu for additional actions.
Don’t clutter the card interface with excessive action icons, as this can overwhelm users and detract from the overall user experience.
Limit the number of action buttons on the card to three (3) to ensure a clean and intuitive interface. Utilize an overflow menu on top right for additional actions.
Don’t use more than three (3) buttons on the card. Avoid cluttering the card interface with an excessive number of action buttons.
Maintain consistency in card sizes across the section for visual harmony.
Don’t use multiple card sizes within the same section or dataset.
Use sidebar in cards to represent a status. There should be only one (1) sidebar per card and it should extend from top to bottom of the card.
Don’t use sidebar just as a decorative element unless there is a status to convey. Don’t incorporate multiple sidebars within a single card and don’t use a sidebar that is smaller in height than the card itself.
When stacking multiple cards on top of a big single other, conceal shadows for the uppermost cards to ensure a cleaner visual presentation and prevent shadow overlap.
Don't display shadows for the cards placed on top of another big card.
The text can be configured to be one or two lines of text depending on the use case and layout of the card chosen. A tooltip appears when hovering over the footer so that the user can read the full footer text.
Limit the number of text lines to a maximum of two.
Highlighted values are meant to be kept short and will truncate when bounded by a certain width. In this case, a tooltip displaying the full label can be displayed upon hover.
Don’t have highlighted values that are too long in card header or card footer.
The alignment of the identifiers - icon, avatar or image will be center to the Heading label value.
Don’t top align the identifiers - icon, avatar or image to the Heading label value.