Cards

A card is a surface for a unit of content — a content panel, or a whole clickable link.

Plain card

A plain card is a div class="panel" (a surface) or an article class="card" (a content unit) — a titled box of text, a form, a table, anything. It isn't interactive.

A non-linkable card

Just a panel of content sitting on the page.

Linkable cards

Make the whole card an a class="card" and it becomes a single link — ideal for a set of links to articles.

Getting started

Link one file and write semantic HTML.

The page shell

Header, main and footer — one of each.

Layout primitives

Rows, grids and flows, spaced by the container.

<a class="card" href="/article/">
  <strong>Title</strong>
  <p>Summary…</p>
</a>