Insights Grid Base

Fetch pattern JSON: curl https://webspire.de/patterns/insights-grid/base.json
base.html
<section class="ws-insights-grid bg-[var(--ws-insights-grid-bg)] py-16">
  <div class="mx-auto max-w-6xl px-6">

    <!-- Section header -->
    <div class="mb-8 flex flex-wrap items-baseline justify-between gap-4">
      <h2 class="text-2xl font-bold text-[var(--ws-insights-grid-text)] sm:text-3xl">
        Aktuelle Einblicke<br>
        <span class="text-[var(--ws-insights-grid-text)]">und Innovationen</span>
      </h2>
      <a href="#" class="text-sm font-semibold text-[var(--ws-insights-grid-link)] hover:underline">
        Ausgewählte Themen →
      </a>
    </div>

    <!-- Main grid: articles (3/4) + sidebar (1/4) -->
    <div class="grid gap-6 lg:grid-cols-4">

      <!-- Articles column (spans 3 of 4) -->
      <div class="flex flex-col gap-6 lg:col-span-3">

        <!-- Article row: 2 side-by-side -->
        <div class="grid gap-6 sm:grid-cols-2">

          <!-- Article Card 1 -->
          <article class="flex flex-col overflow-hidden rounded-xl border border-[var(--ws-insights-grid-card-border)] bg-[var(--ws-insights-grid-card-bg)]">
            <!-- Thumbnail -->
            <div class="aspect-video w-full bg-gradient-to-br from-teal-600 to-cyan-500"></div>
            <div class="flex flex-1 flex-col gap-3 p-5">
              <span class="inline-block self-start rounded-full bg-[var(--ws-insights-grid-tag-bg)] px-3 py-1 text-xs font-semibold text-[var(--ws-insights-grid-tag-text)]">
                Whitepapers
              </span>
              <h3 class="text-sm font-semibold leading-snug text-[var(--ws-insights-grid-text)]">
                ServiceNow's Blueprint for Agentic Business
              </h3>
              <p class="text-xs text-[var(--ws-insights-grid-text-soft)]">
                Wie KI-Agenten selbstständig Workflows ausführen und Geschäftsprozesse transformieren.
              </p>
              <a href="#" class="mt-auto text-xs font-semibold text-[var(--ws-insights-grid-link)] hover:underline">
                Jetzt lesen →
              </a>
            </div>
          </article>

          <!-- Article Card 2 -->
          <article class="flex flex-col overflow-hidden rounded-xl border border-[var(--ws-insights-grid-card-border)] bg-[var(--ws-insights-grid-card-bg)]">
            <!-- Thumbnail -->
            <div class="aspect-video w-full bg-gradient-to-br from-violet-600 to-purple-500"></div>
            <div class="flex flex-1 flex-col gap-3 p-5">
              <span class="inline-block self-start rounded-full bg-[var(--ws-insights-grid-tag-bg)] px-3 py-1 text-xs font-semibold text-[var(--ws-insights-grid-tag-text)]">
                Berichte
              </span>
              <h3 class="text-sm font-semibold leading-snug text-[var(--ws-insights-grid-text)]">
                Risiko und Sicherheit 2026: Was KI-Agenten für ITSM bedeuten
              </h3>
              <p class="text-xs text-[var(--ws-insights-grid-text-soft)]">
                Neue Angriffsvektoren, Compliance-Anforderungen und wie moderne Plattformen schützen.
              </p>
              <a href="#" class="mt-auto text-xs font-semibold text-[var(--ws-insights-grid-link)] hover:underline">
                Bericht laden →
              </a>
            </div>
          </article>

        </div>

        <!-- Featured article (wide card) -->
        <article class="flex flex-col overflow-hidden rounded-xl border border-[var(--ws-insights-grid-card-border)] bg-[var(--ws-insights-grid-card-bg)] sm:flex-row">
          <!-- Thumbnail -->
          <div class="aspect-video w-full shrink-0 bg-gradient-to-br from-blue-700 to-indigo-600 sm:aspect-square sm:w-48"></div>
          <div class="flex flex-1 flex-col justify-center gap-3 p-5">
            <span class="inline-block self-start rounded-full bg-[var(--ws-insights-grid-tag-bg)] px-3 py-1 text-xs font-semibold text-[var(--ws-insights-grid-tag-text)]">
              2025 Gartner® Magic Quadrant™
            </span>
            <h3 class="font-semibold leading-snug text-[var(--ws-insights-grid-text)]">
              Gartner® Magic Quadrant™ für CRM Customer Engagement Center
            </h3>
            <p class="text-sm text-[var(--ws-insights-grid-text-soft)]">
              ServiceNow wurde erneut als Leader im Gartner CRM Magic Quadrant eingestuft.
              Laden Sie den vollständigen Bericht herunter.
            </p>
            <a href="#" class="text-sm font-semibold text-[var(--ws-insights-grid-link)] hover:underline">
              Bericht herunterladen →
            </a>
          </div>
        </article>

      </div>

      <!-- Sidebar: quick-action links -->
      <aside class="flex flex-col rounded-xl border border-[var(--ws-insights-grid-card-border)] bg-[var(--ws-insights-grid-sidebar-bg)] lg:col-span-1">

        <!-- Sidebar item 1 -->
        <a href="#" class="group flex items-start gap-4 border-b border-[var(--ws-insights-grid-sidebar-border)] p-5 transition hover:bg-[var(--ws-insights-grid-card-bg)]">
          <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-insights-grid-sidebar-icon-bg)] text-[var(--ws-insights-grid-sidebar-icon-color)]">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
          </span>
          <div class="flex-1">
            <p class="text-sm font-semibold text-[var(--ws-insights-grid-text)] group-hover:text-[var(--ws-insights-grid-link)]">Kontakt</p>
            <p class="mt-0.5 text-xs text-[var(--ws-insights-grid-text-soft)]">Nehmen Sie Kontakt mit uns auf</p>
          </div>
          <svg xmlns="http://www.w3.org/2000/svg" class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-insights-grid-text-soft)] transition group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
          </svg>
        </a>

        <!-- Sidebar item 2 -->
        <a href="#" class="group flex items-start gap-4 border-b border-[var(--ws-insights-grid-sidebar-border)] p-5 transition hover:bg-[var(--ws-insights-grid-card-bg)]">
          <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-insights-grid-sidebar-icon-bg)] text-[var(--ws-insights-grid-sidebar-icon-color)]">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0"/>
            </svg>
          </span>
          <div class="flex-1">
            <p class="text-sm font-semibold text-[var(--ws-insights-grid-text)] group-hover:text-[var(--ws-insights-grid-link)]">Community beitreten</p>
            <p class="mt-0.5 text-xs text-[var(--ws-insights-grid-text-soft)]">Verbinden Sie sich mit Experten weltweit</p>
          </div>
          <svg xmlns="http://www.w3.org/2000/svg" class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-insights-grid-text-soft)] transition group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
          </svg>
        </a>

        <!-- Sidebar item 3 -->
        <a href="#" class="group flex items-start gap-4 border-b border-[var(--ws-insights-grid-sidebar-border)] p-5 transition hover:bg-[var(--ws-insights-grid-card-bg)]">
          <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-insights-grid-sidebar-icon-bg)] text-[var(--ws-insights-grid-sidebar-icon-color)]">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9"/>
            </svg>
          </span>
          <div class="flex-1">
            <p class="text-sm font-semibold text-[var(--ws-insights-grid-text)] group-hover:text-[var(--ws-insights-grid-link)]">Partner finden</p>
            <p class="mt-0.5 text-xs text-[var(--ws-insights-grid-text-soft)]">Entdecken Sie unser globales Partner-Ökosystem</p>
          </div>
          <svg xmlns="http://www.w3.org/2000/svg" class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-insights-grid-text-soft)] transition group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
          </svg>
        </a>

        <!-- Sidebar item 4 -->
        <a href="#" class="group flex items-start gap-4 p-5 transition hover:bg-[var(--ws-insights-grid-card-bg)]">
          <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-insights-grid-sidebar-icon-bg)] text-[var(--ws-insights-grid-sidebar-icon-color)]">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
          </span>
          <div class="flex-1">
            <p class="text-sm font-semibold text-[var(--ws-insights-grid-text)] group-hover:text-[var(--ws-insights-grid-link)]">Demos erkunden</p>
            <p class="mt-0.5 text-xs text-[var(--ws-insights-grid-text-soft)]">Erleben Sie die Plattform in Aktion</p>
          </div>
          <svg xmlns="http://www.w3.org/2000/svg" class="mt-0.5 h-4 w-4 shrink-0 text-[var(--ws-insights-grid-text-soft)] transition group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
          </svg>
        </a>

      </aside>

    </div>
  </div>
</section>
Details

Family
insights-grid
Tier
base
Kind
section
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
insightsgridarticlesblogquick-linkssidebarcontent-hubresourcesservicenowenterprisesaas
Slots

Name	Required	Description
section-header	Yes	Section heading and optional "See all" link.
article-cards	Yes	Two-up article cards with thumbnail, tag badge, title, and link.
featured-card	No	Wide horizontal featured article card below the article grid.
quick-links	Yes	Sidebar with 4 action links — icon, title, description, chevron.
Content-hub section combining article cards with a utility sidebar. The 3/4 + 1/4 split keeps resources accessible while surfacing key conversion actions (contact, demos, community) without a dedicated CTA section.
Inspired by ServiceNow’s “Aktuelle Einblicke” homepage section. Swap thumbnails, tags, and titles for your own content — and update the quick-links to match your site’s navigation structure.