Cards

Cards are for repeated items or framed tools. Avoid nesting cards inside cards, and keep border, padding, and hierarchy consistent across a set. Template-rendered cards on this system are linked grid tiles: a bordered block whose whole surface is one anchor, with an accent border on hover. For cards typed into Markdown, the card and cards shortcodes are the authoring interface — see Shortcodes.

The card/cards shortcodes are the authoring-side equivalent — not yet used in published content, but styled and ready. This is the same live demo, run through the shortcode instead of hand-written HTML:

When to use#

• Use cards for repeated items of the same kind, where each item leads to one destination
• The whole card is a single link — do not put competing links or controls inside a card
• Do not nest a card inside another card
• Keep border, padding, and type hierarchy consistent across a set; the site’s cards are square-cornered, border border-line, accent on hover
• When readers compare values across items rather than navigate to them, use a table instead
• An author writing Markdown reaches for the card/cards shortcodes to drop an ad-hoc grid into a blog post, without templating a new list layout the way the four rendered-by-template variants below require

Implementation#

<div class="talks-link-grid">
  <a class="talks-link-card" href="/en/talks/archive/">
    <span class="talks-link-card-label">Archive</span>
    <span class="talks-link-card-summary">Previous talks, workshops, webinars, panels, and public appearances.</span>
  </a>
</div>

Card styling is component classes in assets/css/site.css; there is no card partial — each list template writes its own markup on the shared pattern, and each context defines its own grid container. The card is the anchor itself, the label and summary are <span> elements inside it, and the summary self-aligns to the bottom of the tile. The shortcode’s card-item/card-inner/card-title classes reuse the same border-line box and accent-on-hover treatment rather than a separate visual language — the exact Markdown syntax is on Shortcodes, generated from the templates themselves so it cannot go stale.

Variants#

Accessibility#

• A card is one anchor: its accessible name is computed from everything inside it — label, summary, image alt — so a screen reader announces the whole card in DOM order and Tab lands on it once
• Labels and summaries are <span> elements, not headings; structure comes from the surrounding section — the talks grid is a <nav> with an aria-label, and only the non-linked bento cards carry <h3> headings
• Image tiles keep an accessible name when the visual carries the meaning: book covers use alt="… cover", mindmap tiles set aria-label on the link, and the fallback cover initial is aria-hidden
• No card manages focus or listens for keys — activation is the anchor’s native Enter
• Avoid placing a second link or a button inside a card: interactive content nested in an anchor is invalid HTML and unreachable by keyboard