Design System
Playground Zur Vorlage

Sektionen · HaltungIntegrationen-Grid

Sektion · 4 Varianten

Integrationen-Grid

sections/IntegrationsGrid.astro

Bento. Anschluss, nicht Adapter. 01 Mosaik, 02 Kopf, 05 Raster, 06 Steg. 03 Split und 04 Kante nicht aufgenommen. Nacht und Paper.

Props

Name Typ Default Notiz
variant "mosaik" | "kopf" | "raster" | "steg" "mosaik" 01, 02, 05, 06. 03 Split und 04 Kante nicht aufgenommen.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
label string? "Integrationen" Section-Label.
title string? — Nur 02 Kopf.
lead string? — Nur 02 Kopf. nw-lead, max. 65 Zeichen. 
<IntegrationsGrid variant="mosaik" surface="nacht" />
<IntegrationsGrid variant="steg" surface="paper" />

01 · Mosaik

Sechs Spalten, Hero 2×2

Apple-Geometrie. Hero invertiert. Proof Oliv.

Nacht

Integrationen

  • API

    Knoten, offene Stave.

  • Systeme

    12+ Systeme am Draht

  • Draht

    1 Draht, kein Adapter

  • Kein Adapter.

    Die Fläche spricht mit dem Werk. Was nicht trägt, bleibt draußen.

  • Index

    Die Suche hängt.

  • Sechs Felder.

    CMS, Shop, CRM, Index, Feed, Host — ein Anschluss.

  • Anschluss

    Ein Draht. Die Fläche spricht mit dem Werk.

  • CMS

    Satz sitzt im System.

  • Shop

    Ware, keine Folien.

  • CRM

    Ein Slot, ein Name.

  • Feed

    Was rausgeht, steht.

  • Suche

    1 Index, keine Kampagne

  • Start

    Host, DNS, TLS — der Start hängt.

  • Suche

    Schema, Index, Query — die Fläche wird gefunden.

Paper

Integrationen

  • API

    Knoten, offene Stave.

  • Systeme

    12+ Systeme am Draht

  • Draht

    1 Draht, kein Adapter

  • Kein Adapter.

    Die Fläche spricht mit dem Werk. Was nicht trägt, bleibt draußen.

  • Index

    Die Suche hängt.

  • Sechs Felder.

    CMS, Shop, CRM, Index, Feed, Host — ein Anschluss.

  • Anschluss

    Ein Draht. Die Fläche spricht mit dem Werk.

  • CMS

    Satz sitzt im System.

  • Shop

    Ware, keine Folien.

  • CRM

    Ein Slot, ein Name.

  • Feed

    Was rausgeht, steht.

  • Suche

    1 Index, keine Kampagne

  • Start

    Host, DNS, TLS — der Start hängt.

  • Suche

    Schema, Index, Query — die Fläche wird gefunden.

02 · Kopf

Label, Satz, dann das Mosaik

H2 und Lead über derselben Geometrie.

Nacht

Integrationen

Anschluss, nicht Adapter.

CMS, Shop, Index, Draht. Was die Fläche braucht, hängt. Was nicht trägt, bleibt draußen.

  • API

    Knoten, offene Stave.

  • Systeme

    12+ Systeme am Draht

  • Draht

    1 Draht, kein Adapter

  • Kein Adapter.

    Die Fläche spricht mit dem Werk. Was nicht trägt, bleibt draußen.

  • Index

    Die Suche hängt.

  • Sechs Felder.

    CMS, Shop, CRM, Index, Feed, Host — ein Anschluss.

  • Anschluss

    Ein Draht. Die Fläche spricht mit dem Werk.

  • CMS

    Satz sitzt im System.

  • Shop

    Ware, keine Folien.

  • CRM

    Ein Slot, ein Name.

  • Feed

    Was rausgeht, steht.

  • Suche

    1 Index, keine Kampagne

  • Start

    Host, DNS, TLS — der Start hängt.

  • Suche

    Schema, Index, Query — die Fläche wird gefunden.

Paper

Integrationen

Anschluss, nicht Adapter.

CMS, Shop, Index, Draht. Was die Fläche braucht, hängt. Was nicht trägt, bleibt draußen.

  • API

    Knoten, offene Stave.

  • Systeme

    12+ Systeme am Draht

  • Draht

    1 Draht, kein Adapter

  • Kein Adapter.

    Die Fläche spricht mit dem Werk. Was nicht trägt, bleibt draußen.

  • Index

    Die Suche hängt.

  • Sechs Felder.

    CMS, Shop, CRM, Index, Feed, Host — ein Anschluss.

  • Anschluss

    Ein Draht. Die Fläche spricht mit dem Werk.

  • CMS

    Satz sitzt im System.

  • Shop

    Ware, keine Folien.

  • CRM

    Ein Slot, ein Name.

  • Feed

    Was rausgeht, steht.

  • Suche

    1 Index, keine Kampagne

  • Start

    Host, DNS, TLS — der Start hängt.

  • Suche

    Schema, Index, Query — die Fläche wird gefunden.

05 · Raster

Vier Spalten, Hero oben links

2×2 Anschluss, acht Zeichen.

Nacht

Integrationen

  • Anschluss

    Ein Draht. CMS, Shop, Index.

  • API

    Knoten am Draht.

  • CMS

    Satz im System.

  • Shop

    Ware, keine Folien.

  • CRM

    Ein Name, ein Slot.

  • Index

    Die Suche hängt.

  • Feed

    Was rausgeht, steht.

  • Host

    Start, TLS, DNS.

  • Schema

    Knoten, Bindung.

Paper

Integrationen

  • Anschluss

    Ein Draht. CMS, Shop, Index.

  • API

    Knoten am Draht.

  • CMS

    Satz im System.

  • Shop

    Ware, keine Folien.

  • CRM

    Ein Name, ein Slot.

  • Index

    Die Suche hängt.

  • Feed

    Was rausgeht, steht.

  • Host

    Start, TLS, DNS.

  • Schema

    Knoten, Bindung.

06 · Steg

Drei Bahnen

Icons links, Hero Mitte, Belege rechts.

Nacht

Integrationen

  • CMS

    Satz im System.

  • Shop

    Ware, keine Folien.

  • CRM

    Ein Name, ein Slot.

  • Feed

    Was rausgeht, steht.

Anschluss, nicht Adapter.

Die Fläche spricht mit dem Werk. Ein Draht, sechs Felder.

  • 12+ Systeme am Draht
  • 1 Draht, kein Adapter

  • Index

    Die Suche hängt.

Paper

Integrationen

  • CMS

    Satz im System.

  • Shop

    Ware, keine Folien.

  • CRM

    Ein Name, ein Slot.

  • Feed

    Was rausgeht, steht.

Anschluss, nicht Adapter.

Die Fläche spricht mit dem Werk. Ein Draht, sechs Felder.

  • 12+ Systeme am Draht
  • 1 Draht, kein Adapter

  • Index

    Die Suche hängt.