HTML Recipes

Cards and Card Lists

Since a card is usually a self-contained, complete composition, and could be reused in various document contexts, article is an appropriate element to wrap it.

We use header and footer for header and footer areas of the card.

<article>
  <header>
    <h2>Order #123</h2>
  </header>
  <p>Large pepperoni pizza.</p>
  <footer>
    <a href="...">Order This Again</a>
  </footer>
</article>

Lists of cards, such as in search results, are marked up as either ol or ul depending on if the order of the list matters. For example, if the list is sortable then use ol.

<ol>
  <li>
    <article>
      ...
    </article>
  </li>
  <li>
    <article>
      ...
    </article>
  </li>
</ol>