Blog Media List

Fetch pattern JSON: curl https://webspire.de/patterns/blog/media-list.json

media-list.html

<section class="ws-blog bg-[var(--ws-blog-bg)] py-20">
  <div class="mx-auto max-w-5xl px-6">
    <div class="max-w-2xl">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]">Editorial Feed</p>
      <h2 class="mt-3 text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl">Thoughtful writing, text first</h2>
      <p class="mt-3 text-base text-[var(--ws-blog-text-soft)]">A text-dominant listing where the image acts as an anchor, not as the main story.</p>
    </div>

    <div class="mt-12 space-y-8">
      <article class="group border-b border-[var(--ws-blog-border)] pb-8">
        <a href="#" class="flex flex-col-reverse gap-4 md:flex-row md:items-start md:gap-8">
          <div class="min-w-0 flex-1">
            <span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Design Systems</span>
            <h3 class="mt-2 text-2xl font-semibold leading-tight text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Wie man aus fragmentierten UI-Bausteinen eine konsistente Registry fuer Teams und Agents baut</h3>
            <p class="mt-3 line-clamp-2 text-base text-[var(--ws-blog-text-soft)]">Ein pragmischer Blick auf Benennung, Inhaltsqualitaet, Vorschau-Logik und die Frage, wann ein Snippet zu einem Pattern werden sollte.</p>
            <div class="mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--ws-blog-text-muted)]">
              <span>21. Maerz 2026</span>
              <span>9 Min Lesezeit</span>
              <span>Registry</span>
            </div>
          </div>
          <div class="w-full shrink-0 md:w-32 lg:w-40">
            <div class="aspect-square overflow-hidden rounded-2xl bg-[var(--ws-blog-card-bg)]">
              <div class="h-full w-full bg-gradient-to-br from-indigo-100 to-purple-100 transition duration-300 group-hover:scale-105"></div>
            </div>
          </div>
        </a>
      </article>

      <article class="group border-b border-[var(--ws-blog-border)] pb-8">
        <a href="#" class="flex flex-col-reverse gap-4 md:flex-row md:items-start md:gap-8">
          <div class="min-w-0 flex-1">
            <span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">CSS Effects</span>
            <h3 class="mt-2 text-2xl font-semibold leading-tight text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Warum gute Effekt-Demos die Mechanik zeigen muessen und nicht nur visuell beeindrucken sollen</h3>
            <p class="mt-3 line-clamp-2 text-base text-[var(--ws-blog-text-soft)]">Parallax, reveal, hover und glow wirken erst dann hochwertig, wenn der Einsatzzweck in der Vorschau unmittelbar lesbar wird.</p>
            <div class="mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--ws-blog-text-muted)]">
              <span>17. Maerz 2026</span>
              <span>6 Min Lesezeit</span>
              <span>Preview Design</span>
            </div>
          </div>
          <div class="w-full shrink-0 md:w-32 lg:w-40">
            <div class="aspect-square overflow-hidden rounded-2xl bg-[var(--ws-blog-card-bg)]">
              <div class="h-full w-full bg-gradient-to-br from-emerald-100 to-teal-100 transition duration-300 group-hover:scale-105"></div>
            </div>
          </div>
        </a>
      </article>

      <article class="group">
        <a href="#" class="flex flex-col-reverse gap-4 md:flex-row md:items-start md:gap-8">
          <div class="min-w-0 flex-1">
            <span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Workflow</span>
            <h3 class="mt-2 text-2xl font-semibold leading-tight text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Welche Inhalte auf Startseiten gehoeren, wenn eine Registry nicht wie eine generische Tailwind-Sammlung wirken soll</h3>
            <p class="mt-3 line-clamp-2 text-base text-[var(--ws-blog-text-soft)]">Messaging, Kategorielogik und Featured-Content muessen dieselbe semantische Schicht abbilden wie die eigentliche Anwendung.</p>
            <div class="mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--ws-blog-text-muted)]">
              <span>12. Maerz 2026</span>
              <span>7 Min Lesezeit</span>
              <span>Content Strategy</span>
            </div>
          </div>
          <div class="w-full shrink-0 md:w-32 lg:w-40">
            <div class="aspect-square overflow-hidden rounded-2xl bg-[var(--ws-blog-card-bg)]">
              <div class="h-full w-full bg-gradient-to-br from-amber-100 to-orange-100 transition duration-300 group-hover:scale-105"></div>
            </div>
          </div>
        </a>
      </article>
    </div>
  </div>
</section>

Details

Family

blog

Tier

enhanced

Kind

section

Extends

blog/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

blogeditorialmedialisttext-firstfeed

Slots

Name	Required	Description
heading	No	Optional heading block for the list.
posts	Yes	Editorial rows with dominant text and compact images.

Text-first editorial list with a supporting image on the right. It gives long titles and subtitles room to breathe while still keeping a small visual anchor in each row. Works especially well for long-form German titles and company blogs with serious copy.