Sektion · 6 Varianten
Header v2
sections/HeaderV2.astro
Header mit drei Zuständen: transparent über dem Hero, solid, kompakt (h-12). Scroll schaltet sie mit 300 ms. Menüpunkte, Slot-Pille und Button immer sichtbar ab lg; Menü-Panel als Variante.
Notizen
- Entscheidung: neues Stück, bestehender Header bleibt. Infinite: Status-Badge = Slot-Pille rechts.
- Scroll-Schwellen 80 / 240 px, data-state trägt den Zustand, Tailwind data-[state]-Varianten stylen.
Props
| Name | Typ | Default | Notiz |
|---|---|---|---|
| variant | "solid" | "transparent" | "kompakt" | "scroll" | "mit-panel" | "mit-cta" | "solid" | 01–06. |
| surface | "nacht" | "paper" | "nacht" | Pflicht-Paar. |
<HeaderV2 variant="solid" surface="nacht" />01 · Solid
Fond, Haarlinie unten
Header. h-16.
Nacht
Paper
02 · Transparent
Über dem Hero-Bild
Liberate. Kein Fond, keine Linie.
Nacht
Paper
03 · Kompakt
h-12
Anfrage. —
Nacht
Paper
04 · Scroll
Transparent → solid → kompakt
Anfrage. sticky, 160vh Demo.
Nacht
Paper
05 · Mit Panel
Menü-Panel darunter
Menü-Panel featured. Statisch offen.
Nacht
Slot
Ein Auftrag zur Zeit. Nächster Slot Oktober.
Seite unter dem Header · Zustand solid
Paper
Slot
Ein Auftrag zur Zeit. Nächster Slot Oktober.
Seite unter dem Header · Zustand solid