Cards

Cards offer a summary of content for a given topic, allowing an author to pull different elements together to form that snapshot.

Card decks (default)

To create a card deck, determine the best element to describe the content. In most cases, cards are best represented as <article>s, and the card deck layout, called with the cards class, on the parent element. In some cases, the cards represent a list of items, so use <ul>. To affect a card layout, add a class .cards to the list.

Card anatomy

Cards have several pieces that can come together to suit the content. They are presented in the visual order the card presents.

Subsection heading
Optional
Use sparingly. When a card represents an entire section of content, the subsection heading may be included.
Image
Optional
Use an image if it helps understand the content of the card. Prefer the most optimized level with grayscale.
Content heading
Required
The heading summarizes the content in the card.
Card body
Required
The card body holds the primary content of the card. It may consist of paragraphs, lists, or list groups. List groups are different from lists by providing more visual separation from each bullet. Use it if the bullets are more separate ideas than a visual breakdown of a composite sentence.
Related content footer
Optional, cannot be paired with the action link
Content that is related but separate enough from the primary card content. The content in the footer is not the same, including links, to the content in the card body.
Action link
Optional, cannot be paired with the related content footer
The card on the content has an immediate action, such as requesting or reserving the service. The link is not the same as the card body link.

Standard deck

Contained content with related

The heading isn’t linked, most of the content is contained within the card but has a footer with related content or link to related content.

Contained content, sectioned bullets, with related content

The heading isn’t linked, most of the content is contained within the card but has a footer with related content or link to related content.

  • Individual bullet
  • Standalone but related content
  • More bulleted content

Contained content preview with action link

The content on the card contains the bulk of the content. The content has an additional immediate action such as requesting a consultation or reserving a room.

Do something

Contained content, summarizing bullets, and related content

This content preview card does not have an image and utilizes bullets to make the content itself stand out more. It includes:

  • important points,
  • summarized brief snippets, and
  • visually-drawing bullets.

Content preview

This content preview card does not have an image and has only a basic content summary.

Contained unlinked content

This is as basic a card as one can get.

Card deck with suit example

Content preview

The content on the card contains the bulk of the content.

Content preview

The content on the card contains the bulk of the content.

Supported spaces

  • Data + Visualization Lab

    Find computing tools and expertise to develop and apply data science and visual communication skills.

  • Faculty Commons

    Connect with a broad community of librarians, instructional designers, teaching experts, and technology leaders to support educational goals.

  • Makerspace

    Use equipment, materials, and tools to prototype ideas and build problem-solving skills.

  • Virtual Reality Studio

    Explore how virtual worlds can support education, research, and patient care.

Connect with an expert

Ebooks

  • Libraries search

    Find ebooks by limiting the search results to “Available Online” under “Availability” and “Books” under “Material Type”.

  • Ebook proxy linker

    Generate durable links to specific sections of ebooks.

Portrait card decks

Preferred image orientation is landscape. In the case images must be portrait, currently an additional class must be added, code-portrait, to set the grid’s default width narrower.

A more elegant solution is being sought.

Kitten overload

An example where the image is decorative. They may look adorable, but inside they are waiting for the right moment to pounce and sink their claws in.

Horizontal card deck

These look less like cards and are long rather than tall.

Kitten overload

An example where the image is decorative. They may look adorable, but inside they are waiting for the right moment to pounce and sink their claws in.