Design System
Playground Zur Vorlage

Sektionen · VertrauenValue-Prop

Sektion · 6 Varianten

Value-Prop

sections/ValueProp.astro

Erklärung & Vertrauen. Drei Kernaussagen. 01 Bild, 02 Kompakt, 03 Tabs, 04 Sticky, 05 Stapel, 06 Display. Nacht und Paper.

Props

Name Typ Default Notiz
variant "bild" | "kompakt" | "tabs" | "sticky" | "stapel" | "display" "bild" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
label string? "Die Lösung" Section-Label.
title string? — H2. 06 als nw-display.
lead string? — Nur 03 Tabs, 05 Stapel, 06 Display.
items ValueItem[]? — Drei. Icon, Titel, Base, Caption, Bild.
link string? "Zum Werk" Nur 01 Bild und 06 Display. nw-link.
href string? "/system" Ziel des nw-link.
<ValueProp variant="bild" surface="nacht" />
<ValueProp variant="tabs" surface="paper" />

01 · Bild

Großes Foto, drei Sätze daneben

Unsplash. IO wechselt das Foto, Pixel-Reveal.

Nacht

Die Lösung

Drei Sätze, die tragen.

  • 01 · Auftrag

    Form folgt Auftrag.

    Kein Theme, kein Stecksystem. Die Fläche wird gelegt, nicht zusammengesetzt.

    Ein Slot. Was nicht trägt, bleibt draußen.

  • 02 · Index

    Die Fläche wird gefunden.

    Index, Query, Nachweis. Nicht die Kampagne behauptet Sichtbarkeit — der Satz steht.

    Suche vor Ads.

  • 03 · Draht

    Ein Draht, eine Stimme.

    Kein Account dazwischen. Briefing und Werk sitzen auf einer Leitung.

    Vierzehn Tage. Ein Slot.

  • Zum Werk

Paper

Die Lösung

Drei Sätze, die tragen.

  • 01 · Auftrag

    Form folgt Auftrag.

    Kein Theme, kein Stecksystem. Die Fläche wird gelegt, nicht zusammengesetzt.

    Ein Slot. Was nicht trägt, bleibt draußen.

  • 02 · Index

    Die Fläche wird gefunden.

    Index, Query, Nachweis. Nicht die Kampagne behauptet Sichtbarkeit — der Satz steht.

    Suche vor Ads.

  • 03 · Draht

    Ein Draht, eine Stimme.

    Kein Account dazwischen. Briefing und Werk sitzen auf einer Leitung.

    Vierzehn Tage. Ein Slot.

  • Zum Werk

02 · Kompakt

Ein Streifen, drei Schläge

Wenig Luft. Nur Index, Titel, Caption.

Nacht

Die Lösung

Drei Sätze, die tragen.

  • 01

    Form folgt Auftrag.

    Ein Slot. Was nicht trägt, bleibt draußen.

  • 02

    Die Fläche wird gefunden.

    Suche vor Ads.

  • 03

    Ein Draht, eine Stimme.

    Vierzehn Tage. Ein Slot.

Paper

Die Lösung

Drei Sätze, die tragen.

  • 01

    Form folgt Auftrag.

    Ein Slot. Was nicht trägt, bleibt draußen.

  • 02

    Die Fläche wird gefunden.

    Suche vor Ads.

  • 03

    Ein Draht, eine Stimme.

    Vierzehn Tage. Ein Slot.

03 · Tabs

Klappe links, Bild rechts

Pixel-Reveal beim Wechsel. Unsplash je Aussage.

Nacht

Die Lösung

Drei Sätze, die tragen.

Auftrag, Index, Draht. Was dazwischen saß, ist weg.

Kein Theme, kein Stecksystem. Die Fläche wird gelegt, nicht zusammengesetzt.

Ein Slot. Was nicht trägt, bleibt draußen.

Paper

Die Lösung

Drei Sätze, die tragen.

Auftrag, Index, Draht. Was dazwischen saß, ist weg.

Kein Theme, kein Stecksystem. Die Fläche wird gelegt, nicht zusammengesetzt.

Ein Slot. Was nicht trägt, bleibt draußen.

04 · Sticky

Foto klebt, Sätze laufen

IO wechselt das Foto, Pixel-Reveal.

Nacht

Die Lösung

Drei Sätze, die tragen.

  • 01 · Auftrag

    Form folgt Auftrag.

    Kein Theme, kein Stecksystem. Die Fläche wird gelegt, nicht zusammengesetzt.

    Ein Slot. Was nicht trägt, bleibt draußen.

  • 02 · Index

    Die Fläche wird gefunden.

    Index, Query, Nachweis. Nicht die Kampagne behauptet Sichtbarkeit — der Satz steht.

    Suche vor Ads.

  • 03 · Draht

    Ein Draht, eine Stimme.

    Kein Account dazwischen. Briefing und Werk sitzen auf einer Leitung.

    Vierzehn Tage. Ein Slot.

Paper

Die Lösung

Drei Sätze, die tragen.

  • 01 · Auftrag

    Form folgt Auftrag.

    Kein Theme, kein Stecksystem. Die Fläche wird gelegt, nicht zusammengesetzt.

    Ein Slot. Was nicht trägt, bleibt draußen.

  • 02 · Index

    Die Fläche wird gefunden.

    Index, Query, Nachweis. Nicht die Kampagne behauptet Sichtbarkeit — der Satz steht.

    Suche vor Ads.

  • 03 · Draht

    Ein Draht, eine Stimme.

    Kein Account dazwischen. Briefing und Werk sitzen auf einer Leitung.

    Vierzehn Tage. Ein Slot.

05 · Stapel

Drei Reihen, Bild wechselt die Seite

Pixel-Reveal beim Reinscrollen. Unsplash.

Nacht

Die Lösung

Drei Sätze, die tragen.

Auftrag, Index, Draht. Was dazwischen saß, ist weg.

  • 01 · Auftrag

    Form folgt Auftrag.

    Kein Theme, kein Stecksystem. Die Fläche wird gelegt, nicht zusammengesetzt.

    Ein Slot. Was nicht trägt, bleibt draußen.

  • 02 · Index

    Die Fläche wird gefunden.

    Index, Query, Nachweis. Nicht die Kampagne behauptet Sichtbarkeit — der Satz steht.

    Suche vor Ads.

  • 03 · Draht

    Ein Draht, eine Stimme.

    Kein Account dazwischen. Briefing und Werk sitzen auf einer Leitung.

    Vierzehn Tage. Ein Slot.

Paper

Die Lösung

Drei Sätze, die tragen.

Auftrag, Index, Draht. Was dazwischen saß, ist weg.

  • 01 · Auftrag

    Form folgt Auftrag.

    Kein Theme, kein Stecksystem. Die Fläche wird gelegt, nicht zusammengesetzt.

    Ein Slot. Was nicht trägt, bleibt draußen.

  • 02 · Index

    Die Fläche wird gefunden.

    Index, Query, Nachweis. Nicht die Kampagne behauptet Sichtbarkeit — der Satz steht.

    Suche vor Ads.

  • 03 · Draht

    Ein Draht, eine Stimme.

    Kein Account dazwischen. Briefing und Werk sitzen auf einer Leitung.

    Vierzehn Tage. Ein Slot.

06 · Display

Ein Satz, drei Belege

nw-display oben. Proof 01–03, Base, Caption.

Nacht

Die Lösung

Drei Sätze, die tragen.

Auftrag, Index, Draht. Was dazwischen saß, ist weg.

  • 01

    Form folgt Auftrag.

    Kein Theme, kein Stecksystem. Die Fläche wird gelegt, nicht zusammengesetzt.

    Ein Slot. Was nicht trägt, bleibt draußen.

  • 02

    Die Fläche wird gefunden.

    Index, Query, Nachweis. Nicht die Kampagne behauptet Sichtbarkeit — der Satz steht.

    Suche vor Ads.

  • 03

    Ein Draht, eine Stimme.

    Kein Account dazwischen. Briefing und Werk sitzen auf einer Leitung.

    Vierzehn Tage. Ein Slot.

Zum Werk

Paper

Die Lösung

Drei Sätze, die tragen.

Auftrag, Index, Draht. Was dazwischen saß, ist weg.

  • 01

    Form folgt Auftrag.

    Kein Theme, kein Stecksystem. Die Fläche wird gelegt, nicht zusammengesetzt.

    Ein Slot. Was nicht trägt, bleibt draußen.

  • 02

    Die Fläche wird gefunden.

    Index, Query, Nachweis. Nicht die Kampagne behauptet Sichtbarkeit — der Satz steht.

    Suche vor Ads.

  • 03

    Ein Draht, eine Stimme.

    Kein Account dazwischen. Briefing und Werk sitzen auf einer Leitung.

    Vierzehn Tage. Ein Slot.

Zum Werk