Design System
Playground Zur Vorlage

Sektionen · VertrauenProblem-Section

Sektion · 6 Varianten

Problem-Section

sections/Problem.astro

Erklärung & Vertrauen. Drei Pain-Points. 01 Zellen, 02 Raster, 03 Kopf, 04 Reihe, 05 Split, 06 Nummer. Nacht und Paper.

Props

Name Typ Default Notiz
variant "zellen" | "raster" | "kopf" | "reihe" | "split" | "nummer" "zellen" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
label string? "Das Problem" Section-Label.
title string? — Nur 03 Kopf und 05 Split.
lead string? — Nur 03 Kopf und 05 Split.
items PainPoint[]? — Drei. Icon, Titel, Base, Caption.
<Problem variant="zellen" surface="nacht" />
<Problem variant="split" surface="paper" />

01 · Zellen

Drei Kacheln, Abstand

Fill Granit. Index oben, Icon xl, Base, Caption.

Nacht

Das Problem

  • 01

    Der Baukasten

    Ein Theme, drei Plugins, der Slot bleibt leer. Was nicht zum Auftrag gehört, wird trotzdem geliefert — und trägt nicht.

    Form ohne Auftrag. Die Fläche wird gesteckt, nicht gelegt.

  • 02

    Die Kampagne

    Ads laufen, der Satz nicht. Ohne Index, ohne Query, ohne Nachweis bleibt die Fläche unsichtbar — teuer und still.

    Gefunden wird behauptet. Der Index bleibt leer.

  • 03

    Der Account

    Folien, Abstimmung, ein zweiter Ton. Der Draht zum Werk reißt. Was ankommt, ist nicht mehr die Stimme.

    Die Stimme versandet. Zwischen Briefing und Werk sitzt jemand.

Paper

Das Problem

  • 01

    Der Baukasten

    Ein Theme, drei Plugins, der Slot bleibt leer. Was nicht zum Auftrag gehört, wird trotzdem geliefert — und trägt nicht.

    Form ohne Auftrag. Die Fläche wird gesteckt, nicht gelegt.

  • 02

    Die Kampagne

    Ads laufen, der Satz nicht. Ohne Index, ohne Query, ohne Nachweis bleibt die Fläche unsichtbar — teuer und still.

    Gefunden wird behauptet. Der Index bleibt leer.

  • 03

    Der Account

    Folien, Abstimmung, ein zweiter Ton. Der Draht zum Werk reißt. Was ankommt, ist nicht mehr die Stimme.

    Die Stimme versandet. Zwischen Briefing und Werk sitzt jemand.

02 · Raster

Gemeinsame Haarlinie

Kein Fill, kein Doppelrahmen. Index trägt.

Nacht

Das Problem

  • 01

    Der Baukasten

    Ein Theme, drei Plugins, der Slot bleibt leer. Was nicht zum Auftrag gehört, wird trotzdem geliefert — und trägt nicht.

    Form ohne Auftrag. Die Fläche wird gesteckt, nicht gelegt.

  • 02

    Die Kampagne

    Ads laufen, der Satz nicht. Ohne Index, ohne Query, ohne Nachweis bleibt die Fläche unsichtbar — teuer und still.

    Gefunden wird behauptet. Der Index bleibt leer.

  • 03

    Der Account

    Folien, Abstimmung, ein zweiter Ton. Der Draht zum Werk reißt. Was ankommt, ist nicht mehr die Stimme.

    Die Stimme versandet. Zwischen Briefing und Werk sitzt jemand.

Paper

Das Problem

  • 01

    Der Baukasten

    Ein Theme, drei Plugins, der Slot bleibt leer. Was nicht zum Auftrag gehört, wird trotzdem geliefert — und trägt nicht.

    Form ohne Auftrag. Die Fläche wird gesteckt, nicht gelegt.

  • 02

    Die Kampagne

    Ads laufen, der Satz nicht. Ohne Index, ohne Query, ohne Nachweis bleibt die Fläche unsichtbar — teuer und still.

    Gefunden wird behauptet. Der Index bleibt leer.

  • 03

    Der Account

    Folien, Abstimmung, ein zweiter Ton. Der Draht zum Werk reißt. Was ankommt, ist nicht mehr die Stimme.

    Die Stimme versandet. Zwischen Briefing und Werk sitzt jemand.

03 · Kopf

Satz, dann drei Felder

H2 und Lead über den Zellen.

Nacht

Das Problem

Drei Dinge, die die Fläche nicht tragen.

Baukasten, Kampagne, Account. Was dazwischen sitzt, bleibt draußen.

  • 01

    Der Baukasten

    Ein Theme, drei Plugins, der Slot bleibt leer. Was nicht zum Auftrag gehört, wird trotzdem geliefert — und trägt nicht.

    Form ohne Auftrag. Die Fläche wird gesteckt, nicht gelegt.

  • 02

    Die Kampagne

    Ads laufen, der Satz nicht. Ohne Index, ohne Query, ohne Nachweis bleibt die Fläche unsichtbar — teuer und still.

    Gefunden wird behauptet. Der Index bleibt leer.

  • 03

    Der Account

    Folien, Abstimmung, ein zweiter Ton. Der Draht zum Werk reißt. Was ankommt, ist nicht mehr die Stimme.

    Die Stimme versandet. Zwischen Briefing und Werk sitzt jemand.

Paper

Das Problem

Drei Dinge, die die Fläche nicht tragen.

Baukasten, Kampagne, Account. Was dazwischen sitzt, bleibt draußen.

  • 01

    Der Baukasten

    Ein Theme, drei Plugins, der Slot bleibt leer. Was nicht zum Auftrag gehört, wird trotzdem geliefert — und trägt nicht.

    Form ohne Auftrag. Die Fläche wird gesteckt, nicht gelegt.

  • 02

    Die Kampagne

    Ads laufen, der Satz nicht. Ohne Index, ohne Query, ohne Nachweis bleibt die Fläche unsichtbar — teuer und still.

    Gefunden wird behauptet. Der Index bleibt leer.

  • 03

    Der Account

    Folien, Abstimmung, ein zweiter Ton. Der Draht zum Werk reißt. Was ankommt, ist nicht mehr die Stimme.

    Die Stimme versandet. Zwischen Briefing und Werk sitzt jemand.

04 · Reihe

Index, Zeichen, Titel, Satz

Volle Zeile, Haarlinie. Drei Schläge.

Nacht

Das Problem

  • 01

    Der Baukasten

    Ein Theme, drei Plugins, der Slot bleibt leer. Was nicht zum Auftrag gehört, wird trotzdem geliefert — und trägt nicht.

    Form ohne Auftrag. Die Fläche wird gesteckt, nicht gelegt.

  • 02

    Die Kampagne

    Ads laufen, der Satz nicht. Ohne Index, ohne Query, ohne Nachweis bleibt die Fläche unsichtbar — teuer und still.

    Gefunden wird behauptet. Der Index bleibt leer.

  • 03

    Der Account

    Folien, Abstimmung, ein zweiter Ton. Der Draht zum Werk reißt. Was ankommt, ist nicht mehr die Stimme.

    Die Stimme versandet. Zwischen Briefing und Werk sitzt jemand.

Paper

Das Problem

  • 01

    Der Baukasten

    Ein Theme, drei Plugins, der Slot bleibt leer. Was nicht zum Auftrag gehört, wird trotzdem geliefert — und trägt nicht.

    Form ohne Auftrag. Die Fläche wird gesteckt, nicht gelegt.

  • 02

    Die Kampagne

    Ads laufen, der Satz nicht. Ohne Index, ohne Query, ohne Nachweis bleibt die Fläche unsichtbar — teuer und still.

    Gefunden wird behauptet. Der Index bleibt leer.

  • 03

    Der Account

    Folien, Abstimmung, ein zweiter Ton. Der Draht zum Werk reißt. Was ankommt, ist nicht mehr die Stimme.

    Die Stimme versandet. Zwischen Briefing und Werk sitzt jemand.

05 · Split

Diagnose links, Liste rechts

5 + 6. Layout gelesen, nicht kopiert.

Nacht

Das Problem

Drei Dinge, die die Fläche nicht tragen.

Baukasten, Kampagne, Account. Was dazwischen sitzt, bleibt draußen.

  • 01

    Der Baukasten

    Ein Theme, drei Plugins, der Slot bleibt leer. Was nicht zum Auftrag gehört, wird trotzdem geliefert — und trägt nicht.

    Form ohne Auftrag. Die Fläche wird gesteckt, nicht gelegt.

  • 02

    Die Kampagne

    Ads laufen, der Satz nicht. Ohne Index, ohne Query, ohne Nachweis bleibt die Fläche unsichtbar — teuer und still.

    Gefunden wird behauptet. Der Index bleibt leer.

  • 03

    Der Account

    Folien, Abstimmung, ein zweiter Ton. Der Draht zum Werk reißt. Was ankommt, ist nicht mehr die Stimme.

    Die Stimme versandet. Zwischen Briefing und Werk sitzt jemand.

Paper

Das Problem

Drei Dinge, die die Fläche nicht tragen.

Baukasten, Kampagne, Account. Was dazwischen sitzt, bleibt draußen.

  • 01

    Der Baukasten

    Ein Theme, drei Plugins, der Slot bleibt leer. Was nicht zum Auftrag gehört, wird trotzdem geliefert — und trägt nicht.

    Form ohne Auftrag. Die Fläche wird gesteckt, nicht gelegt.

  • 02

    Die Kampagne

    Ads laufen, der Satz nicht. Ohne Index, ohne Query, ohne Nachweis bleibt die Fläche unsichtbar — teuer und still.

    Gefunden wird behauptet. Der Index bleibt leer.

  • 03

    Der Account

    Folien, Abstimmung, ein zweiter Ton. Der Draht zum Werk reißt. Was ankommt, ist nicht mehr die Stimme.

    Die Stimme versandet. Zwischen Briefing und Werk sitzt jemand.

06 · Nummer

Proof als Index

01–03 in Oliv. Base und Caption darunter.

Nacht

Das Problem

  • 01

    Der Baukasten

    Ein Theme, drei Plugins, der Slot bleibt leer. Was nicht zum Auftrag gehört, wird trotzdem geliefert — und trägt nicht.

    Form ohne Auftrag. Die Fläche wird gesteckt, nicht gelegt.

  • 02

    Die Kampagne

    Ads laufen, der Satz nicht. Ohne Index, ohne Query, ohne Nachweis bleibt die Fläche unsichtbar — teuer und still.

    Gefunden wird behauptet. Der Index bleibt leer.

  • 03

    Der Account

    Folien, Abstimmung, ein zweiter Ton. Der Draht zum Werk reißt. Was ankommt, ist nicht mehr die Stimme.

    Die Stimme versandet. Zwischen Briefing und Werk sitzt jemand.

Paper

Das Problem

  • 01

    Der Baukasten

    Ein Theme, drei Plugins, der Slot bleibt leer. Was nicht zum Auftrag gehört, wird trotzdem geliefert — und trägt nicht.

    Form ohne Auftrag. Die Fläche wird gesteckt, nicht gelegt.

  • 02

    Die Kampagne

    Ads laufen, der Satz nicht. Ohne Index, ohne Query, ohne Nachweis bleibt die Fläche unsichtbar — teuer und still.

    Gefunden wird behauptet. Der Index bleibt leer.

  • 03

    Der Account

    Folien, Abstimmung, ein zweiter Ton. Der Draht zum Werk reißt. Was ankommt, ist nicht mehr die Stimme.

    Die Stimme versandet. Zwischen Briefing und Werk sitzt jemand.