Related Articles Base

Fetch pattern JSON: curl https://webspire.de/patterns/related-articles/base.json

base.html

<section aria-label="Related articles" class="ws-related-articles mx-auto max-w-5xl px-4 py-12">
  <h2 class="mb-8 text-2xl font-bold text-[var(--ws-related-articles-text)]">Related Articles</h2>
  <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
    <article class="overflow-hidden rounded-lg border border-[var(--ws-related-articles-border)] bg-[var(--ws-related-articles-bg)]">
      <div class="p-5">
        <span class="inline-block rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">Design</span>
        <h3 class="mt-3 text-lg font-semibold text-[var(--ws-related-articles-text)]">Building Accessible Color Systems</h3>
        <p class="mt-2 line-clamp-2 text-sm text-[var(--ws-related-articles-text-soft)]">Learn how to create color palettes that meet WCAG contrast requirements while maintaining visual harmony across light and dark modes.</p>
        <div class="mt-4 flex items-center gap-2 text-xs text-[var(--ws-related-articles-text-muted)]">
          <span class="font-medium text-[var(--ws-related-articles-text-soft)]">Sarah Chen</span>
          <span aria-hidden="true">&middot;</span>
          <time datetime="2026-03-15">Mar 15, 2026</time>
        </div>
      </div>
    </article>
    <article class="overflow-hidden rounded-lg border border-[var(--ws-related-articles-border)] bg-[var(--ws-related-articles-bg)]">
      <div class="p-5">
        <span class="inline-block rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800">Engineering</span>
        <h3 class="mt-3 text-lg font-semibold text-[var(--ws-related-articles-text)]">Optimizing Web Font Loading</h3>
        <p class="mt-2 line-clamp-2 text-sm text-[var(--ws-related-articles-text-soft)]">Reduce layout shift and improve perceived performance with modern font loading strategies including font-display and preloading.</p>
        <div class="mt-4 flex items-center gap-2 text-xs text-[var(--ws-related-articles-text-muted)]">
          <span class="font-medium text-[var(--ws-related-articles-text-soft)]">Marcus Rivera</span>
          <span aria-hidden="true">&middot;</span>
          <time datetime="2026-03-12">Mar 12, 2026</time>
        </div>
      </div>
    </article>
    <article class="overflow-hidden rounded-lg border border-[var(--ws-related-articles-border)] bg-[var(--ws-related-articles-bg)]">
      <div class="p-5">
        <span class="inline-block rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-800">CSS</span>
        <h3 class="mt-3 text-lg font-semibold text-[var(--ws-related-articles-text)]">Container Queries in Production</h3>
        <p class="mt-2 line-clamp-2 text-sm text-[var(--ws-related-articles-text-soft)]">A practical guide to adopting CSS container queries for truly responsive component design beyond viewport-based media queries.</p>
        <div class="mt-4 flex items-center gap-2 text-xs text-[var(--ws-related-articles-text-muted)]">
          <span class="font-medium text-[var(--ws-related-articles-text-soft)]">Elena Kowalski</span>
          <span aria-hidden="true">&middot;</span>
          <time datetime="2026-03-08">Mar 8, 2026</time>
        </div>
      </div>
    </article>
  </div>
</section>

Details

Family

related-articles

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

related-articlesblogcardscontent-linksrecommendations

Slots

Name	Required	Description
category	No	Category tag label for each article card.
title	Yes	Article title text.
excerpt	No	Short description or excerpt of the article.
author	No	Author name.
date	No	Publication date.

A three-column grid of article cards, each showing a category tag, title, two-line excerpt, author name, and publication date. Use it at the bottom of blog posts or editorial pages to surface related content.