Related posts

Polka + card + key-value list.

Composed from existing primitives: a .polka full-width background holds a .card, inside which a .key-value list renders each post with its date as the value and title as the key.

<aside id="related-posts" class="grid polka padding-top" style="background-position: top; --mult: 2;">
  <div class="card margin-top margin-bottom" style="--mult: 1;">
    <h1 class="key-value--heading key-value--heading--small">Related posts</h1>
    <ul class="related-posts key-value">
      <li class="key-value--item">
        <a class="key-value--link" href="/2024/04/16/eurovision-first-listens/">
          <p class="key-value--value small-text secondary-text">
            <time datetime="2024-04-16">16 April 2024</time>
          </p>
          <p class="key-value--key">I listened to every Eurovision 2024 entry, so you don't have to</p>
        </a>
      </li>
    </ul>
  </div>
</aside>