Design System
Playground Zur Vorlage

Sektionen · HaltungFeature-Sticky-Scroll

Sektion · 9 Varianten

Feature-Sticky-Scroll

sections/FeatureStickyScroll.astro

Text scrollt, Visual bleibt. CSS sticky, kein Scroll-Spy. 01–06 Kachel, 07–09 Satz. Scramble beim Reinscrollen. Oliv-Welle am Cursor, Display stanzt aus. Nacht und Paper.

Props

Name Typ Default Notiz
variant "split" | "rechts" | "kopf" | "nummer" | "kante" | "eng" | "satz" | "satz-rechts" | "satz-nummer" "split" 01–09. Kachel oder Satz.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
label string? "Haltung" Section-Label.
title string? — Kachel und 07–09.
lead string? — Kachel-Caption und 07–09.
items StickyItem[]? — Sechs Schritte.
knockout string? — Display im Effekt. Sonst der Kachel-Titel. aria-hidden.
<FeatureStickyScroll variant="split" surface="nacht" />
<FeatureStickyScroll variant="satz" knockout="Mandat." />

01 · Split

Visual links, Satz rechts

6+6. BentoTile-Marke bleibt, sechs Schritte laufen.

Nacht

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

Paper

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

02 · Rechts

Satz links, Visual rechts

Seite getauscht. Mobile: Visual zuerst.

Nacht

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

Paper

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

03 · Kopf

Label und Satz, dann Split

H2 und Base scrollen weg. Darunter bleibt die Marke.

Nacht

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

Mandat vor Fläche

Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

Paper

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

Mandat vor Fläche

Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

04 · Nummer

01–06 neben der Marke

nw-label vor dem Schritt.

Nacht

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  1. 01

    Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  2. 02

    Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  3. 03

    Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  4. 04

    Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  5. 05

    Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  6. 06

    Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

Paper

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  1. 01

    Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  2. 02

    Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  3. 03

    Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  4. 04

    Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  5. 05

    Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  6. 06

    Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

05 · Kante

Zellen bleibt, Kante läuft

Box klebt. Kante-Karten, Haarlinie links.

Nacht

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

    Mehr erfahren
  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

    Mehr erfahren
  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

    Mehr erfahren
  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

    Mehr erfahren
  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

    Mehr erfahren
  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

    Mehr erfahren

Paper

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

    Mehr erfahren
  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

    Mehr erfahren
  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

    Mehr erfahren
  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

    Mehr erfahren
  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

    Mehr erfahren
  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

    Mehr erfahren

06 · Eng

Vier plus acht

Enge Marke, breiter Satz. Base statt Caption.

Nacht

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

Paper

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

07 · Satz

H2 und Lead bleiben

Kein Tile. 7+4, Spalte 8 Pause. Satz zwei Drittel.

Nacht

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

Paper

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

08 · Satz-rechts

H2 und Lead rechts

Seite getauscht. Satz zwei Drittel, nach außen.

Nacht

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

Paper

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  • Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  • Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  • Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  • Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  • Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  • Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

09 · Satz-nummer

H2 und Lead, 01–06

Wie 07, mit Nummern. Haarlinie bündig.

Nacht

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  1. 01

    Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  2. 02

    Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  3. 03

    Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  4. 04

    Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  5. 05

    Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  6. 06

    Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.

Paper

Haltung

Das Werk, nicht die Kampagne.

Eine Stimme, ein Slot, keine Folien. Was nicht trägt, bleibt draußen.

  1. 01

    Mandat vor Fläche

    Wir setzen das Werk, nicht die Kampagne. Eine Stimme, ein Slot, keine Folien.

  2. 02

    Eine Stimme

    Ein Ton über alle Flächen — kein Folien-Deutsch, kein Baukasten.

  3. 03

    Kein Baukasten

    Form folgt Auftrag. Was nicht trägt, bleibt draußen.

  4. 04

    Takt, kein Sprint

    Vierzehn Tage, ein Slot. Dann steht es — nicht die nächste Folie.

  5. 05

    Nachweis statt Behauptung

    Zahl, Mandat, Werk. Proof sitzt in Oliv, nicht in der Überschrift.

  6. 06

    Direkt, nicht vermittelt

    Kein Account, keine Folie dazwischen. Der Draht geht zum Werk.