Design System
Playground Zur Vorlage

Sektionen · HaltungFeature-Tabs

Sektion · 6 Varianten

Feature-Tabs

sections/FeatureTabs.astro

Tab-Wechsel mit Visual. Oliv-Linie füllt, Canvas tauscht das Bild. 01 Leiste, 02 Split, 03 Kopf, 04 Linie, 05 Nummer, 06 Duo. Nacht und Paper.

Props

Name Typ Default Notiz
variant "leiste" | "split" | "kopf" | "linie" | "nummer" | "duo" "leiste" 01–06. Pixel, Streifen oder Nebel sitzen an der Variante.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
label string? "Haltung" Section-Label.
title string? — Nur 03 Kopf.
lead string? — Nur 03 Kopf.
items TabItem[]? — Drei Tabs.
autoplay boolean? true Oliv-Linie füllt. Pause bei Hover, Fokus, außerhalb. 
<FeatureTabs variant="leiste" surface="nacht" />
<FeatureTabs variant="linie" surface="paper" />

01 · Leiste

Linie oben, Marke darunter

Pixel tauschen das Visual.

Nacht

Haltung

Mandat vor Fläche

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

Paper

Haltung

Mandat vor Fläche

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

02 · Split

Linie links, Visual rechts

Streifen senkrecht. 4 + 8 Spalten.

Nacht

Haltung

Mandat vor Fläche

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

Paper

Haltung

Mandat vor Fläche

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

03 · Kopf

Satz, dann die Linie

H2 und Base. Nebel.

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.

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.

04 · Linie

Haarlinie, Split-Karte wechselt

Die Tab-Sprache. Streifen quer.

Nacht

Haltung

Mandat vor Fläche

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

Paper

Haltung

Mandat vor Fläche

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

05 · Nummer

Index vor dem Wort

01 Mandat. Pixel.

Nacht

Haltung

Mandat vor Fläche

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

Paper

Haltung

Mandat vor Fläche

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

06 · Duo

Linie, dann Karte und Marke

Zwei Visuals. Nebel.

Nacht

Haltung

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.

Paper

Haltung

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.