A card contains content about a single subject. It acts as an entry point to more detailed information.
Each card includes a headline linked to the original source and a description. It can include an optional image and metadata such as date, byline, or tags.
Use it to
- Highlight an entry point for more details about a subject
- Emphasize important actions
- Feature internal website sections on a landing page
- Spotlight popular content
Do not use it
- As a substitute for a table row
- When you have content that must go in order
- For a simple call to action
- To decorate with a box style
Follow these rules
Headings
- Limit to 60 characters.
- Use the correct heading level based on where the card is on the page.
- Add an external website indicator under the heading when you direct users to a different website.
Card content
- Limit description to 160 characters.
- Summarize the topic and link to in-depth information.
- Include one link or call to action per card.
- Use a different image and content for each card.
Design and functionality
- Separate multiple groups of cards with proper headings.
- Set cards in fractions of a page width (1/4, 1/3, 1/2, or 2/3).
- Size card images properly.
