Skip to main content

Card

Example
Live

The Card example visually groups related content or tasks.

Usage​

Cards provide a structured and visual way to present content in an interface. Cards help to organise and group related content for users, helping them quickly scan, digest information and engage with call to actions.

When to use​

Use Cards when you have a group of related content of equal importance to present to the user. They are particularly useful for displaying items such as articles and products.

When to avoid​

Avoid using Cards for presenting unrelated or standalone pieces of content that don't benefit from being grouped together.

Do

  • Ensure consistency in the design and layout of Cards for a cohesive user experience.
  • Use appropriate spacing, typography, and visual hierarchy within Cards to guide user attention effectively.
  • Only use graphics where they add value and support the message.
  • Consider responsiveness and adaptability across different screen sizes and devices.

Don't

  • Overcrowd Cards with excessive content or elements, as it can overwhelm users and detract from readability.
  • Use Cards inconsistently in an interface, as it can lead to confusion and make navigation more challenging for users.