Skip to content

Latest commit

 

History

History
42 lines (29 loc) · 3.11 KB

1005-card-design-guidance.md

File metadata and controls

42 lines (29 loc) · 3.11 KB
category state created updated
component design guidance
approved
2024-10-30
2024-10-30

Card Design Guidance

Cards are containers that group related content and actions together, providing a cohesive way to present information in a visually appealing format.```

Guidance

Usage

  • Applications must use separate cards for distinct topics, differentiating content and actions, improving organization, and enhancing user comprehension.
  • Cards must be used to present high-level information and guide users toward related actions and details. This facilitates quick understanding and encourages user engagement with the content.
  • Clickable cards must be used when a card is intended to initiate an action. This clearly indicates to users that the card is interactive and provides a pathway to further engagement.
  • Cards may contain various content types, including text, images, dropdown menus, media blocks, lists, and list groups, enabling rich information presentation and actions within a cohesive space.

Anatomy

  • Buttons must be left-aligned in the card footer. This alignment maintains a consistent visual structure and enhances usability by making actions easy to find and access.
  • Dividers should be used in cards to separate different regions. This helps organize content visually, improving readability and allowing users to quickly identify distinct sections within the card.
  • Flat buttons should be used on cards to maintain their prominence relative to other information. This design choice helps ensure that the buttons are easily identifiable without overwhelming the card's content.
  • The card footer may include a primary action and a single additional (secondary) action, both left-aligned. This layout helps to prioritize the main action while still offering users an alternative option if needed.
  • The card footer may use a dropdown menu for more than two actions. This approach keeps the interface clean and organized, allowing users to access multiple actions without cluttering the card.

Placement

  • Cards must be grouped by theme or element. This organization helps users understand the relationships between different pieces of information and actions, enhancing the overall user experience.
  • Cards must not be nested within another card. This practice can lead to confusion and clutter, making it difficult for users to navigate and understand the content hierarchy.
  • Grids should be used to place cards in fixed rows and columns. This layout facilitates easy scanning of content, improving organization and enhancing user navigation through the information.
  • Cards should not be overloaded with excessive content, too many actions, or links within the content. Keeping cards concise ensures clarity and enhances usability.

Style

  • Titles should be used in 20px Metropolis Medium and content should be used in 14px Metropolis Regular. This maintains a clear visual hierarchy and improves readability, helping users navigate the card content more effectively.

Changelog

  • 2024-10-30: Initial guidance