A Card component is a visually appealing box that you can use to organize various pieces of related information neatly on your webpage. Cards can include a mix of elements such as an image, a headline, some brief text, and possibly a link to more details.
Content Options
This card has a title
This card has no title
Title card has a subtitle
This card has no subtitle
This card has body text
This is body text
This card has no body text
This card has a CTA
This card has no CTA
This whole card is clickable
This whole card is not clickable
This card has an image
This card has no image
Layout and Styling Options
Orientation
Vertical
Vertical
Horizontal
Horizontal
Background Colors
White
Muted
Primary
Secondary
Tertiary
Text Alignment
Left aligned
body text
Center aligned
body text
Title centered
body text
Body centered
body text
CTA centered
body text
Sizes
Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Margin bottom
Margin bottom
Margin bottom
Margin bottom
Margin bottom
Margin bottom
Margin bottom
the end
Margin top
Margin top
Margin top
Margin top
Margin top
Margin top
Margin top
the end
Usage
Do
- Use cards to organize related items visually, enhancing user navigation and comprehension.
- Display specific content like featured news or resources on cards to highlight important information.
- Keep card titles and details brief for clarity.
- Limit card body text to a few sentences for quick readability.
Don't
- Avoid using cards for all page content; not all information suits this format.
- Do not group unrelated items in a single card, as it confuses users.
- Refrain from mixing different card styles in the same list or grid to maintain visual coherence.
- Don't use inconsistent image sizes.
- Avoid clickable card variants with multiple links to prevent navigation confusion.
Accessibility
- Ensure that you provide suitable alt text for the images on your cards. Alt text for images enhances web accessibility by offering a textual description for screen readers used by visually impaired users. See the a11yproject website for more information about writing alt text for images.