Figma component
A link to the Figma library where the component lives.
The new card border-radius is still currently in development and is not published in the repository as of now.
Component checklist
Repository
A link to the repo where the component lives.
Usage
Group related content and actions
Do
Use cards to group content or actions related to a single subject.
Caution
Use caution when grouping content in a card container; implying connection between unrelated pieces of content by grouping them together results in a confusing experience.
Don't nest too many cards
Do
Nested cards can be useful for building information hierarchies.
Don't
Creating too many nested layers can lead to complex interfaces that erode the benefits of grouping related content. Use discretion when nesting cards.
Keep content left-aligned
Do
In general, keep content within cards left-aligned to ensure consistency and legibility.
Caution
Using cards with centre or right alignments can cause page layouts to be messy and confusing. Avoid using these alignments.
Cards should not be scrollable
Do
Present all essential information within the card's visible area; avoid hiding content that users need to see and interact with.
Don't
Hiding content within a card can be confusing and may result in a user missing important information. Try to avoid hidden overflow within cards.
These are mainly suggestions for consistent use cases, although design may vary on a case by case scenario.