Skip to main content

Patterns: Cards

Standard

A header and some paragraphs of text.

<aside class="card" style="width: 13rem;">
  <h2 class="card__header">This is a card</h2>
  <div class="card__body">
    <p>And this is the card's text. It goes on for a while like this you see.</p>
    <p>It might have another paragraph <a href="#">with a link</a>.</p>
  </div>
</aside>

<aside class="card" style="width: 13rem;">
  <div class="card__body">
    <p>With no header. And so we can see how two look together.</p>
  </div>
</aside>

Lists

They can have lists instead of paragraphs. Heaaders are always optional.

<aside class="card" style="width: 13rem;">
  <ul>
    <li>About me</li>
    <li><a href="#">About my work</a></li>
    <li><a href="#">Timeline of things I’ve done</a></li>
    <li>And:
      <ul>
        <li>A sub list</li>
        <li>Is shown here</li>
      </ul>
    </li>
  </ul>
</aside>

<aside class="card" style="width: 13rem;">
  <h2 class="card__header">Most-used tags</h2>
  <ol>
    <li><a href="#">webdevelopment</a> (1,234)</li>
    <li><a href="#">london</a> (923)</li>
    <li><a href="#">uk</a> (831)</li>
    <li><a href="#">music</a> (719)</li>
    <li><a href="#">javascript</a> (612)</li>
  </ol>
  <p><a href="#">More tags</a></p>
</aside>

Inline list

Lists can be inline and unstyled.

<aside class="card" style="width: 13rem;">
  <h2 class="card__header">Years of Writing</h2>
  <ul class="list--inline list--unstyled">
    <li><a href="#">2000</a></li>
    <li><a href="#">2001</a></li>
    <li><a href="#">2002</a></li>
    <li><a href="#">2003</a></li>
    <li><a href="#">2004</a></li>
    <li><a href="#">2005</a></li>
    <li><a href="#">2006</a></li>
  </ul>
</aside>

Definition list

<aside class="card" style="width: 13rem;">
  <h2 class="card__header">My other sites</h2>
  <dl>
    <dt><a href="#">Pepys’ Diary</a></dt>
    <dd>17th century diary</dd>
    <dt><a href="#">Today’s Guardian</a></dt>
    <dd>Easy to read</dd>
    <dt><a href="#">Our Incredible Journey</a></dt>
    <dd>Acqui-hires</dd>
    <dt><a href="#">Crazy Walls</a></dt>
    <dd>Paper and string</dd>
    <dt><a href="#">Whit Stillman</a></dt>
    <dd>The film director</dd>
  </dl>
</aside>

Card body

Adding the .card__body class to any element will make it use small mixed-case text.

<aside class="card" style="width: 13rem;">
  <ul class="card__body">
    <li>About me</li>
    <li><a href="#">About my work</a></li>
    <li><a href="#">Timeline of things I’ve done</a></li>
  </ul>
</aside>

<aside class="card" style="width: 13rem;">
  <h2 class="card__header">My other sites</h2>
  <dl class="card__body">
    <dt><a href="#">Pepys’ Diary</a></dt>
    <dd>17th century diary</dd>
    <dt><a href="#">Today’s Guardian</a></dt>
    <dd>Easy to read</dd>
    <dt><a href="#">Our Incredible Journey</a></dt>
    <dd>Acqui-hires</dd>
    <dt><a href="#">Crazy Walls</a></dt>
    <dd>Paper and string</dd>
    <dt><a href="#">Whit Stillman</a></dt>
    <dd>The film director</dd>
  </dl>
</aside>

Media

Cards can contain .media-list and .media items. Here the .media-list also has .card__body.

<aside class="card" style="width: 13rem;">
  <h2 class="card__header">Currently reading</h2>
  <ol class="media-list card__body">
    <li class="media">
      <div class="media__body">
        <h2 class="media__header">
          <a href="#"><cite>The Diary of Samuel Pepys: 1664 v. 5</cite></a>
        </h2>
        <p>by <a href="#">Samuel Pepys</a> (Author), <a href="#">Robert Latham</a> (Editor) and <a href="#">William Matthews</a> (Editor)</p>
      </div>
    </li>
    <li class="media">
      <div class="media__body">
        <h2 class="media__header">
          <a href="#"><cite>The Destructives</cite></a>
        </h2>
        <p>by <a href="#">Matthew de Abaitua</a></p>
      </div>
    </li>
    <li class="media">
      <div class="media__body">
        <h2 class="media__header">
          <a href="#"><cite>London Review of Books</cite>, Vol. 39 No. 18, 21 September 2017</a>
        </h2>
      </div>
    </li>
  </ol>
</aside>

No borders

Remove top and bottom borders by adding .card--no-border.

<aside class="card card--no-border" style="width: 13rem;">
  <h2 class="card__header">This is a card</h2>
  <div class="card__body">
    <p>And this is the card's text. It goes on for a while like this you see.</p>
    <p>It might have another paragraph <a href="#">with a link</a>.</p>
  </div>
</aside>