Cards contain content and actions about a single subject.
Status:
Draft: Do not use
About this element
A card is often a subset or summary of a larger idea. It acts as an entry point to more detailed information. This summary can contain a variety of content types, such as text, images, and multimedia, or buttons and links.
An individual card is typically a member of a collection of similar cards, not a single card in isolation. A card is distinguished from others in its collection by its content, and cards are distinguished from the broader page context in form — usually with a border or a shadow.
Examples and code
Examples and code
[ See USDS site for good examples (they use images) ]
Maybe these are also examples? https://library.virginia.edu/about-uva-library and https://library.virginia.edu/services
Guidance
When to use
- Collections of related content. Cards help present a collection of related groups of content, like resources on a theme or sections of a website.
When to consider something else
- Tabular data. Don’t use a card as a substitute for a table row.
- Simple calls to action. Use a button instead.
- Standalone content. Consider an aside or another standalone element.
- Sequential, continuous text. Cards should be self-contained and modular. If the reader is meant to read from card to card, consider a list or simple body text and headings.
Usability guidance
- Make cards actionable. Since cards are used as a summary of more detailed information, any individual card should link out to that information.
- Don’t use the card component only for decoration. Use the card component for cards, not for any type of content that’s designed to have a border around it.
- Include unique content. Don’t repeat images or content common to all or most cards in a collection. Repeated information (like using the same image for each card in a collection) makes it more difficult to distinguish cards from one another.
- Make sure images are properly sized. Cards often change size depending on the device. Make sure you use an image that works well on any device at any size.
Accessibility guidance
[NEEDS CHECK FROM DESIGN]
- Use unordered lists and list items. Use a ul for a card group and an li for each card. This formatting allows screen readers to enumerate the items in the card group and allows shortcuts between list items.
- Use the appropriate heading level for your page. Update heading level based on the content of your page to make sure card headings are in the correct, logical outline order.
- Use CSS to order the media element. Logically, the media element should follow the header element. Don’t re-organize the markup to reverse their order.