Card

Usage

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.

Use Cases

• 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)

Accessibility Requirements

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.