💠 Card

Displays a card with header, content, and footer.

Usage

The Card component is a versatile container used to group related pieces of information together within a distinct visual block. It usually consists of a header, content area, and footer.

Cards are commonly used in interfaces to display information in a digestible format, making it easy for users to scan and interact with data, such as products, articles, or profiles.

When to use

• Content segmentation: Use Cards to segment content into manageable chunks, making complex information easier to understand at a glance.
• Interactive elements: Employ Cards when the grouped information needs to be interactive, such as clickable entities that lead to detailed views.
• Visual consistency: Utilize Cards to create a uniform appearance for different pieces of content that belong to the same category, ensuring a cohesive look and feel.
• Responsive layouts: Cards can be easily rearranged to fit different screen sizes and layouts, making them ideal for responsive design.

Avoid using Cards to contain a single piece of information with no contextual relationship to other elements; simpler UI elements may suffice. Do not overload Cards with too much information or too many actions, as this can lead to a cluttered appearance and cognitive overload for users.

Examples

Default

With mapping

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: