Article header

Post titles with date, image or object variants.

Date & title

Default for blog posts, slides, and most written content. A .published-date aside sits above a .post-title heading. The wrapping header uses the grid so the title drops back to the content column via subgrid.

<header class="grid collection--blogpost post-title">
  <aside class="published-date">
    <time datetime="2026-04-17" class="published-datetime dt-published">
      <a href="/2026/04/17/a-week-of-small-wins/" class="u-url post-published-date">17 April 2026</a>
    </time>
  </aside>
  <h1 class="post-title p-name">A week of small wins</h1>
</header>

Date, title & composite image

An .overlay image floats on top of a full-bleed .background picture.

I listened to every Eurovision 2024 entry, so you don't have to

composite:
  overlay:
    image: "/images/posts/2024-04-16-eurovision-2024.svg"
    alt: "The Eurovision 2024 logo"
    blur: 5
  background:
    source: "/images/posts/2024-04-16-eurovision-northern-lights.webp"
    image: "/images/posts/2024-04-16-eurovision-northern-lights.gif"
    alt: "A burst of bright colours symbolising the Northern Lights"

Image & title

Used when the post has an object in its frontmatter. The decorative SVG sits above the title; an optional subtitle sits below.

<header class="grid collection--blogpost post-title">
  <div class="object object--game-boy">
    {% include "components/objects/game-boy.svg" %}
  </div>
  <div class="object-metadata">
    <h1 class="p-name align-center">The Legend of Zelda: Link's Awakening</h1>
    <p class="sr-only">by</p>
    <p class="lead secondary-text">Nintendo</p>
  </div>
</header>