Features Bento

Fetch pattern JSON: curl https://webspire.de/patterns/features/bento.json

bento.html

<section class="ws-features bg-[var(--ws-features-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mb-12 text-center">
      <p class="text-sm font-semibold uppercase tracking-widest text-[var(--ws-features-icon-color)]">Everything you need</p>
      <h2 class="mt-2 text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">A better workflow</h2>
      <p class="mx-auto mt-4 max-w-2xl text-lg text-[var(--ws-features-text-soft)]">Powerful features that help you ship faster and with confidence.</p>
    </div>

    <div class="grid auto-rows-[minmax(12rem,auto)] grid-cols-1 gap-4 md:grid-cols-3">
      <!-- Large card spanning 2 columns -->
      <div class="flex flex-col justify-end rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-8 md:col-span-2">
        <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600 text-white">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
        </div>
        <h3 class="text-lg font-semibold text-[var(--ws-features-text)]">Lightning fast builds</h3>
        <p class="mt-2 text-[var(--ws-features-text-soft)]">Incremental compilation and smart caching reduce build times by up to 10x compared to traditional toolchains.</p>
      </div>

      <!-- Tall card spanning 2 rows -->
      <div class="row-span-2 flex flex-col justify-end rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-8">
        <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-600 text-white">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
        </div>
        <h3 class="text-lg font-semibold text-[var(--ws-features-text)]">Enterprise security</h3>
        <p class="mt-2 text-[var(--ws-features-text-soft)]">SOC 2 compliant with end-to-end encryption, SSO, and granular role-based access controls built in from day one.</p>
      </div>

      <!-- Regular card -->
      <div class="flex flex-col justify-end rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-8">
        <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-violet-600 text-white">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg>
        </div>
        <h3 class="text-lg font-semibold text-[var(--ws-features-text)]">Developer-first API</h3>
        <p class="mt-2 text-[var(--ws-features-text-soft)]">RESTful and GraphQL endpoints with comprehensive SDKs for every major language.</p>
      </div>

      <!-- Regular card -->
      <div class="flex flex-col justify-end rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] p-8">
        <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-amber-600 text-white">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
        </div>
        <h3 class="text-lg font-semibold text-[var(--ws-features-text)]">Real-time analytics</h3>
        <p class="mt-2 text-[var(--ws-features-text-soft)]">Live dashboards and custom reports to track every metric that matters.</p>
      </div>
    </div>
  </div>
</section>

Details

Family

features

Tier

enhanced

Kind

section

Extends

features/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

featuresbentogridasymmetriccardslayout

Slots

Name	Required	Description
heading	Yes	Section title and subtitle.
cards	Yes	Feature cards of varying sizes.

Enhanced variant of features with a bento-grid layout. The large card spans 2 columns, one card spans 2 rows, creating visual hierarchy. Adjust grid-cols and row-span/col-span for different arrangements.