A self-contained unit
Content that would still make sense lifted out of the page and shown on its own.
Cards
card is a styling class, not an element. It paints a bordered, padded
surface and nothing else. Its children flow at the same --gap as the rest of
the page, so adding or removing card never reflows the content. Put it on the
element that already carries the meaning.
<article class="card">
<h3>Title</h3>
<p>Body…</p>
</article>
<div class="grid cols-3">
<div class="card">A tile</div>
</div>Article card
An article is a self-contained, syndicatable unit: a blog post, a product,
a document tile. Add card to box it; it needs its own heading. A list of
articles without the class stays a plain list of text.
Another unit
Each article is independent; the box is opt-in, one class at a time.
<article class="card">
<h3>Title</h3>
<p>Body…</p>
</article>Section card
A section is a titled thematic group. As a card it's a boxed group, and its
heading drops a level like any nested section, because it's a section, not
because it's a card.
A titled group
A run of related content gathered under one heading, set on its own surface.
<section class="card">
<h3>Group title</h3>
…
</section>Content card
A p as a card is a single run of prose set apart from the flow: a note or
callout. One paragraph: if it needs a title use a section card, if it's self-contained use
an article card.
A note, boxed off from the surrounding text, the same paragraph you would write anyway, just given a surface.
<p class="card">A note…</p>Layout card
A div is the box with no standalone meaning, a surface placed by a layout,
such as a cell in a row or grid. Reach for it only when
none of the others fit: if it gains a title it becomes a section card, a single paragraph
is a content card.
Tiles
A box positioned by the grid.
Panels
Grouping controls with no heading.
Surfaces
Meaning stays out of it on purpose.
<div class="grid cols-3">
<div class="card">…</div>
</div>Card links
Two ways to make a whole card clickable.
Boxed link
The whole card is a single a class="card". Simplest, and the entire surface
is one link, but it can't contain any other link or button, because an
anchor can't nest interactive content.
Getting started
Link one file and write semantic HTML.
The page shellHeader, main and footer, one of each.
<a class="card" href="/article/">
<strong>Title</strong>
<p>Summary…</p>
</a>Stretched title link
A card whose heading is the link; add stretch-link and that link is
stretched over the whole surface. The card opens from anywhere, inner links and buttons
still work, and the card keeps its hover. Trade-off: text in the card isn't selectable
(the overlay is the link), so use it for teasers, not cards you'd copy from.
Quarterly report
Edited 2 days ago. Opens from anywhere on the card, yet this tag still works on its own.
Design notes
The heading link fills the surface; a secondary link sits above it.
<article class="card stretch-link">
<h4><a href="/doc/">Title</a></h4>
<p>Summary, with an <a href="/tag/">inner link</a>…</p>
</article>