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.

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.

Random quote

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.

Random quote

He is my favorite smell, my favorite sound, my favorite sight. He will never know how much I love him because he does not remember the day Darrow and I conceived him, or the months I carried him inside me, or the minute he came into the world, the moment he said his first word or took his first step, or made me laugh for the first time.

Featured card with text on right (standard)

Featured cards provide potentially larger images with the image sitting next to it on larger screens.

Subsection heading

Content heading

She told stories, gave them news, went errands in the town, and on the sly lent the big girls some novel, that she always carried in the pockets of her apron, and of which the good lady herself swallowed long chapters in the intervals of her work. They were all love, lovers, sweethearts, persecuted ladies fainting in lonely pavilions, postilions killed at every stage, horses ridden to death on every page, sombre forests, heartaches, vows, sobs, tears and kisses, little skiffs by moonlight, nightingales in shady groves, “gentlemen” brave as lions, gentle as lambs, virtuous as no one ever was, always well dressed, and weeping like fountains. For six months, then, Emma, at fifteen years of age, made her hands dirty with books from old lending libraries.

Card footer

Featured card with text on left

Featured cards provide potentially larger images with the image sitting next to it on larger screens.

Content heading for Ulysses

Suppose that communal kitchen years to come perhaps. All trotting down with porringers and tommycans to be filled. Devour contents in the street. John Howard Parnell example the provost of Trinity every mother’s son don’t talk of your provosts and provost of Trinity women and children cabmen priests parsons fieldmarshals archbishops. From Ailesbury road, Clyde road, artisans’ dwellings, north Dublin union, lord mayor in his gingerbread coach, old queen in a bathchair. My plate’s empty.