BentoGrid

Asymmetrisches Grid-Layout mit unterschiedlich großen, getönten Zellen — der "Bento"-Stil. Eignet sich für Hero-Sections, Feature-Showcases und Produkt-Uebersichten, in denen Hierarchie über Größe und Farbfläche statt über Typo-Skala kommuniziert wird.

Hauptbeispiel — Hero im Bento-Stil

Klassisches 5-Spalten-Bento mit drei Zellen: links eine große Headline-Cell mit Sage-Tone, darunter ein dunkler CTA-Block und rechts eine breite Showcase-Cell mit drei Produkt-Karten. Die Asymmetrie der Spalten (2/3) erzeugt sofort eine Lese-Hierarchie.

Hero-Bento mit Headline, CTA und Showcase

Weniger Klicks. Mehr Pflege.

Mehr Patienten aufnehmen, das Team entlasten und schneller abgerechnet werden — mit einem KI-nativen System für die ambulante Versorgung.

Emma Schmidt

Aufnahme angefragt

Therapieplan

Einzeltherapie

225.390 EUR

Gesamt-Umsatz

CRM EHR RCM

<BentoGrid columns={5} gap="md">
  <BentoCell colSpan={2} tone="sage" padding="xl">
    <h2 style="font-size: clamp(2rem, 6cqi, 3.5rem); line-height: 1.05;">
      Weniger Klicks. Mehr Pflege.
    </h2>
    <p>
      Mehr Patienten aufnehmen, das Team entlasten und schneller
      abgerechnet werden — mit einem KI-nativen System für
      die ambulante Versorgung.
    </p>
  </BentoCell>

  <BentoCell colSpan={3} rowSpan={2} tone="sky" padding="lg">
    <div class="auto-grid" data-cols="3">
      <article class="bento-mini">
        <strong>Emma Schmidt</strong>
        <Tag variant="success">Termin gebucht</Tag>
      </article>
      <article class="bento-mini">
        <strong>Therapieplan</strong>
        <p>Einzeltherapie · Notiz folgt</p>
      </article>
      <article class="bento-mini">
        <strong>225.390 EUR</strong>
        <Tag variant="success">+7 %</Tag>
      </article>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <Tag>CRM</Tag><Tag>EHR</Tag><Tag>RCM</Tag>
    </div>
  </BentoCell>

  <BentoCell colSpan={2} tone="foreground" padding="lg" align="center">
    <Button variant="primary" size="lg" icon>Demo anfordern</Button>
  </BentoCell>
</BentoGrid>

Tones — neun Surface-Varianten

Jede Cell wählt einen Tone als Hintergrundfarbe. Die Tones sind so abgestimmt, dass sie sowohl im Light- als auch im Dark-Mode genug Foreground-Kontrast erzeugen (WCAG 1.4.3 ≥ 4.5:1 für Body-Text). brand und primary übernehmen die Brand-Tokens — bei Theme-Wechsel passen sie sich automatisch an.

Alle Tones im 3x3-Grid

neutral

Surface-alt aus dem Token

surface

Brand-Surface mit Border

sage

Helles Salbeigrün

sky

Kuehles Hellblau

sunset

Warmer Apricot-Ton

lavender

Sanfter Lila-Ton

sand

Helles Sandgelb

primary

Brand-Primary, für Akzent-Cell

foreground

Dunkle Cell, hoher Kontrast

<BentoGrid columns={3}>
  <BentoCell tone="neutral">…</BentoCell>
  <BentoCell tone="surface">…</BentoCell>
  <BentoCell tone="sage">…</BentoCell>
  <BentoCell tone="sky">…</BentoCell>
  <BentoCell tone="sunset">…</BentoCell>
  <BentoCell tone="lavender">…</BentoCell>
  <BentoCell tone="sand">…</BentoCell>
  <BentoCell tone="primary">…</BentoCell>
  <BentoCell tone="foreground">…</BentoCell>
</BentoGrid>

Spans — Asymmetrie als Hierarchie

colSpan und rowSpan bestimmen, wie viele Spalten und Zeilen eine Cell belegt. Bewusst asymmetrisch komponieren: eine große Cell als Anker, kleinere Cells als Begleiter.

4-Spalten-Bento mit Asymmetrie

Anker-Cell

2x2 Spans — visueller Mittelpunkt der Section.

Sekundär

2x1 Spans

Klein

1x1

Klein

1x1

<BentoGrid columns={4}>
  <BentoCell colSpan={2} rowSpan={2} tone="primary">Anker</BentoCell>
  <BentoCell colSpan={2} tone="sage">Sekundär</BentoCell>
  <BentoCell tone="sky">Klein</BentoCell>
  <BentoCell tone="sunset">Klein</BentoCell>
</BentoGrid>

Klickbare Cells

Mit href wird die ganze Cell ein Link mit Hover-Lift, sichtbarem Focus-Ring und prefers-reduced-motion-Respekt. Praktisch für Produkt-Module oder Navigations-Tiles.

<BentoGrid columns={3}>
  <BentoCell href="/produkte/crm" tone="sage">
    <h3>CRM</h3>
    <p>Patienten-Beziehungen managen</p>
  </BentoCell>
  <BentoCell href="/produkte/ehr" tone="sky">
    <h3>EHR</h3>
    <p>Elektronische Patientenakte</p>
  </BentoCell>
  <BentoCell href="/produkte/rcm" tone="lavender">
    <h3>RCM</h3>
    <p>Abrechnung und Cashflow</p>
  </BentoCell>
</BentoGrid>

Padding-Stufen

Padding skaliert über Container Queries (cqi) — eine breite Cell bekommt mehr Innenabstand als eine schmale, ohne dass man Breakpoints schreiben muss. Stufen none / sm / md / lg / xl.

Padding-Vergleich

padding=sm

Knapp

padding=md

Default

padding=xl

Hero-Wuerdig

<BentoGrid columns={3}>
  <BentoCell tone="sage" padding="sm">sm</BentoCell>
  <BentoCell tone="sage" padding="md">md</BentoCell>
  <BentoCell tone="sage" padding="xl">xl</BentoCell>
</BentoGrid>

Redakteurshinweise

Wann einsetzen

Hero-Section: Headline-Cell + Visual-Cell, statt klassischem Hero mit Bild rechts
Feature-Showcase: 3-5 Module mit unterschiedlicher Wichtigkeit
Landingpage-Mid-Section: kombiniert Text-Pitch, Feature-Liste und CTA in einem Layout

Wann NICHT

Lange Listen (>6 Cells) — dafür ist Card-Grid besser
Datentabellen — Bento ist eine visuelle Gestaltungsform, keine Datenstruktur
Wenn alle Cells gleich gross sein sollen — dann ist es kein Bento, sondern ein Grid

Inhaltliche Empfehlung

Eine Cell ist der visuelle Anker (größte, hellste oder dunkelste) — der Rest dient ihr
Maximal 2-3 verschiedene Tones, sonst entsteht visuelle Unruhe
Headlines pro Cell kurz halten — Bento lebt von typografischer Präsenz
Kombinationen die gut funktionieren: sage+sky (ruhig), sunset+sand (warm), lavender+sky (kuehl-elegant)

Mobile / A11y

Container-Query unter 32rem: Layout klappt auf 1-Spaltig zusammen, alle Spans werden ignoriert
Tones erfüllen WCAG 1.4.3 (Body-Text 4.5:1) in Light + Dark
Link-Cells: sichtbarer Focus-Ring (2px), Hover-Lift respektiert prefers-reduced-motion
Heading-Hierarchie: pro Cell maximal eine h2/h3 — die DOM-Reihenfolge entspricht der Lese-Reihenfolge