Features Editorial Grid

Fetch pattern JSON: curl https://webspire.de/patterns/features/editorial-grid.json

editorial-grid.html

<section class="ws-features bg-[var(--ws-features-bg)] py-24">
  <div class="mx-auto max-w-6xl px-6">

    <!-- Section heading -->
    <div class="max-w-2xl">
      <p class="text-sm font-semibold uppercase tracking-[0.15em] text-[var(--ws-features-accent)]">Why us</p>
      <h2 class="mt-3 text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">
        Four things we believe in
      </h2>
    </div>

    <!-- 4-column editorial grid — no icons, pure typography -->
    <div class="mt-16 grid gap-x-12 gap-y-10 sm:grid-cols-2 lg:grid-cols-4">

      <div>
        <h3 class="text-lg font-semibold leading-snug text-[var(--ws-features-text)]">
          Clarity over complexity
        </h3>
        <p class="mt-3 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">
          Every message we write is tested against one question: does the reader understand what we mean immediately?
        </p>
      </div>

      <div>
        <h3 class="text-lg font-semibold leading-snug text-[var(--ws-features-text)]">
          Ideas packaged with care
        </h3>
        <p class="mt-3 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">
          Good design is not decoration. It is the vehicle that carries your message past the noise and into memory.
        </p>
      </div>

      <div>
        <h3 class="text-lg font-semibold leading-snug text-[var(--ws-features-text)]">
          Rooted in your audience
        </h3>
        <p class="mt-3 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">
          We study who you are talking to before we write a single word — demographics, intent, language, objections.
        </p>
      </div>

      <div>
        <h3 class="text-lg font-semibold leading-snug text-[var(--ws-features-text)]">
          Results over aesthetics
        </h3>
        <p class="mt-3 text-sm leading-relaxed text-[var(--ws-features-text-soft)]">
          Beautiful work that does not perform is a hobby. We measure success by outcomes, not awards.
        </p>
      </div>

    </div>

    <!-- Optional divider + bottom link -->
    <div class="mt-16 flex items-center gap-6 border-t border-[var(--ws-features-border)] pt-8">
      <p class="flex-1 text-sm text-[var(--ws-features-text-soft)]">
        We have been applying these principles since 2007 — for clients in education, healthcare, and the public sector.
      </p>
      <a href="#" class="shrink-0 text-sm font-semibold text-[var(--ws-features-accent)] hover:underline">
        Read our story →
      </a>
    </div>

  </div>
</section>

Details

Family

features

Tier

base

Kind

section

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

featuresvaluesuspeditorialtypographyagencymanifestoconsulting

Slots

Name	Required	Description
eyebrow	No	Small label above the section heading.
heading	Yes	Section title.
blocks	Yes	Four content blocks with headline and paragraph each.
footer-bar	No	Thin divider row at the bottom with a supporting note and a text link.

Four-column grid of short headline + paragraph blocks — no icons, no numbers, no decorative elements. The typographic hierarchy does all the work. Inspired by agency and consulting “what we believe” sections where credibility comes from the words, not visual chrome. Optional footer row with a supporting note and arrow link. Scales to 2-col on mobile.