A card is a modular container that features a specific topic and is typically presented as part of a collection with other cards that contain related information.
Simple link card
Simple card with primary and secondary actions
Link card with attached media
Media Aspect Ratio
Card with attached media and primary and secondary actions
Media Aspect Ratio
Cards are used to display content or actions on a single topic. Cards work well for grouping information. Cards can present a summary and a link for more details. Cards also allow for flexible layouts on the page.
- When a user needs independent content highlighted (notable alumni spotlights, notable professor spotlights)
- When displaying independent statistics (admissions statistics, statistics on financial aid, student)
- When user wants to preview an article before clicking (article blurb with a read more button on the news page)
- When a user wants a preview of a post (post blurb on blogs)
- When a user wants a preview of a page (page blurb with link to the page)
- When displaying quotes (student testimonials, quotes from an event)
- When highlighting important content or calls-to-action (contact cards, survey information with a button, forms, search, support)
Cards should be easy to scan for relevant and actionable information. It should be a single contained unit that stands independent, without relying on other content for clarity.
Beware making the entire card clickable. By adding the content after the
<a> tag, screen readers will not be able to differentiate the link from the rest of the card content, lessening the experience for these users. If you wrap the content in the
<a> tag, be sure to use the aria-label attribute to highlight the title of the card. Elements should be placed on them in a way that clearly indicates hierarchy – this is important for users using assistive devices.