Card

Cards preview a grouping of content so someone can decide where to go next.

When to use

Use cards to help someone choose where to go next.

A card is the preview layer of more content, not the whole of it. It shows just enough for a person to judge what sits underneath and decide whether they open it. The page it points to carries additional detail. See the content layering principle for the why.

Cards work as a set. Put them in a grid so someone can scan a few groupings side by side and compare them.

Skip the card when the text is the point. If someone can act on what the card says without following it, put that content on the page instead.

How to use

Lead with the words someone is scanning for. People read headings first, so put the distinguishing words at the front.

Give the heading the level that fits the page. A card heading is a real heading, so pick the level that follows from the outline and size it with a heading class such as pl-h3. On this site cards sit directly under the page title and use an h2 styled as pl-h3; under a section heading they step down to h3.

Write a description that adds context. The heading names the destination and the description adds to what someone will find there. Give them enough to feel sure this is a card link they want to follow. See wayfinding and sense of place.

Grid

.pl-cards lays out cards in a grid that reflows as the viewport changes.

<div class="pl-typeset pl-reset pl-margin-l">
  <ul class="pl-cards">
    <li class="pl-card">
      <pennlibs-iiif-img uuid="68006c1e-b071-4a5f-be43-3f98b20dfd2c" alt="" class="pl-card__img"></pennlibs-iiif-img>
      <h2 class="pl-card__heading pl-h3"><a class="pl-card__link" href="https://digitalcollections.library.upenn.edu/items/f0e135c9-6af4-4966-abd3-dfbe4148635b?asset-id=68006c1e-b071-4a5f-be43-3f98b20dfd2c">The Record: 1930.</a></h2>
      <p class="pl-card__description">University of Pennsylvania student yearbooks</p>
    </li>
    <li class="pl-card">
      <pennlibs-iiif-img uuid="93445488-7d7a-406f-9dc7-e1e61e754e80" alt="" class="pl-card__img hydrated"></pennlibs-iiif-img>
      <h2 class="pl-card__heading pl-h3"><a class="pl-card__link" href="https://digitalcollections.library.upenn.edu/items/c2db79cd-92a4-4d05-a2fc-e626367a67b9?asset-id=93445488-7d7a-406f-9dc7-e1e61e754e80">The Record of the class of 1923.</a></h2>
      <p class="pl-card__description">University of Pennsylvania student yearbooks</p>
    </li>
  </ul>
</div>

Callout cards

Use .pl-card--callout to give extra visual attention.

<div class="pl-typeset pl-reset pl-margin-l">
  <h2>My account</h2>
  <ul class="pl-cards pl-margin-y-xl">
    <li class="pl-card pl-card--callout">
      <h3 class="pl-card__heading">
        <a class="pl-card__link" href="#">
          Shelf
        </a>
      </h3>
      <p class="pl-card__description">Renew items you've loaned and see when they're due.</p>
    </li>
    <li class="pl-card pl-card--callout">
      <h3 class="pl-card__heading">
        <a class="pl-card__link" href="#">
          Request an item
        </a>
      </h3>
      <p class="pl-card__description">Describe what you need and we'll get it to you.</p>
    </li>
    <li class="pl-card pl-card--callout">
      <h3 class="pl-card__heading">
        <a class="pl-card__link" href="#">
          Bookmarks
        </a>
      </h3>
      <p class="pl-card__description">Create citations and email bookmarked items.</p>
    </li>
    <li class="pl-card pl-card--callout">
      <h3 class="pl-card__heading">
        <a class="pl-card__link" href="#">
          Fines and fees
        </a>
      </h3>
      <p class="pl-card__description">View fines for overdue, lost, or damanged items.</p>
    </li>
    <li class="pl-card pl-card--callout">
      <h3 class="pl-card__heading">
        <a class="pl-card__link" href="#">
          Settings
        </a>
      </h3>
      <p class="pl-card__description">Your account details and request item delivery address.</p>
    </li>
  </ul>
</div>

Clamping long descriptions

Cards in a grid line up better when their descriptions are the same height. Add the pl-line-clamp utility to hold a description to two lines and end it with an ellipsis.

<div class="pl-typeset pl-reset pl-margin-l">
  <ul class="pl-cards">
    <li class="pl-card">
      <h2 class="pl-card__heading pl-h3"><a class="pl-card__link" href="#">Philadelphia Society for Promoting Agriculture records</a></h2>
      <p class="pl-card__description pl-line-clamp">Minute books, correspondence, membership records, and printed matter documenting the society's work across nearly two centuries of farming in the region.</p>
    </li>
    <li class="pl-card">
      <h2 class="pl-card__heading pl-h3"><a class="pl-card__link" href="#">Barry-Hayes papers</a></h2>
      <p class="pl-card__description pl-line-clamp">Correspondence and business records of Commodore John Barry and the Hayes family.</p>
    </li>
  </ul>
</div>

We use a pseudo-content trick by Inclusive Components to make the entire card clickable.