Cards
Containers that group related content and actions.
Overview
Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Cards can contain text, images, actions, and UI controls. They provide a flexible container for displaying content in a variety of contexts.
Anatomy
Cards are composed of several optional elements that can be combined to create different variations.
Card Title
Card Description
Card content goes here...
Card footer goes here...
Card Elements
- Card: The container that wraps all card elements
- CardHeader: Contains the card title and description
- CardTitle: The title of the card
- CardDescription: A brief description of the card content
- CardContent: The main content area of the card
- CardFooter: Contains actions or additional information
Variants
Cards can be used in different ways to present content.
Basic Card
A simple card with a title and content.
Basic Card
This is a basic card with just a title and content. It's useful for simple information display.
Card with Description
A card with a title, description, and content.
Card with Description
A brief description of the card content
This card includes a description that provides additional context about the content.
Card with Footer
A card with a footer containing actions.
Card with Footer
A card with actions in the footer
This card includes a footer with actions. The footer is a good place to put buttons or other interactive elements.
Usage
Here are some examples of how to use cards in different contexts:
Feature 1
Description of feature 1...
Feature 2
Description of feature 2...
Feature 3
Description of feature 3...
Card with Image
A card with an image at the top
This card includes an image at the top. Images can help make cards more engaging and informative.
Best Practices
Do
- Use cards to group related content
- Keep card content concise and focused
- Use consistent spacing within and between cards
- Ensure card titles are descriptive
- Use images when they add value to the content
Don't
- Overcrowd cards with too much content
- Use cards for single, simple elements
- Mix too many different card styles in one view
- Use cards when a simpler component would suffice
- Nest cards within cards