Foundation · 6 Varianten
Sektions-Intro
components/system/foundations/SektionsIntro.astro
Abstand um Section-Label, H2 und Lead. Vollflächig: mt-12 und mb-20 lg:mb-24. In Spalte: Grid pt-8. Werte in der 128er-Leiter.
Notizen
- Regel seit 2026-09-02 in AGENTS.md, in 16 Sektionen umgesetzt. Hier als Foundation sichtbar, damit sie in die Spacing-Docs wandern kann.
- Liberate: Label weit über dem Satz, Satz weit über der Fläche. Luft ist Teil der Sprache.
- Offen: ob 144 / 240 / 288 als Tokens (--space-intro-*) in global.css sollen oder Utility-Klassen bleiben.
Props
| Name | Typ | Default | Notiz |
|---|---|---|---|
| variant | "voll" | "voll-lead" | "spalte" | "sticky" | "display" | "mass" | "voll" | 01–06. |
| surface | "nacht" | "paper" | "nacht" | Pflicht-Paar. |
<SektionsIntro variant="voll" surface="nacht" />01 · Voll
Label, H2, Inhalt
Problem, Warum-wir. mt-12, mb-20 lg:mb-24.
Nacht
Section-Label
H2 mit mt-12 zum Label.
Paper
Section-Label
H2 mit mt-12 zum Label.
02 · Voll mit Lead
Label, H2, Lead, Inhalt
Value-Prop. Lead mt-4 im Block.
Nacht
Section-Label
H2 mit mt-12 zum Label.
Lead mit mt-4. Der Block trägt mb-20 lg:mb-24.
Paper
Section-Label
H2 mit mt-12 zum Label.
Lead mit mt-4. Der Block trägt mb-20 lg:mb-24.
03 · Spalte
Intro links, Inhalt rechts
Problem Split. H2 mt-8, Grid pt-8.
Nacht
Section-Label
H2 bleibt mt-8. Grid trägt pt-8.
Komposition, kein vollflächiges Intro.
Paper
Section-Label
H2 bleibt mt-8. Grid trägt pt-8.
Komposition, kein vollflächiges Intro.
04 · Sticky
Intro klebt
Timeline Register. wie 03, Spalte sticky.
Nacht
Section-Label
H2 bleibt mt-8. Grid trägt pt-8.
Komposition, kein vollflächiges Intro.
Paper
Section-Label
H2 bleibt mt-8. Grid trägt pt-8.
Komposition, kein vollflächiges Intro.
05 · Display
Display statt H2
Vergleich Display. mt-12, Inhalt mt-20 lg:mt-24.
Nacht
Section-Label
Display mt-12.
Lead mt-6.
Paper
Section-Label
Display mt-12.
Lead mt-6.
06 · Maß
Abstände markiert
Docs. Oliv-Balken zeigen 48 und 80/96.
Nacht
Section-Label
48 px über dem H2
Paper
Section-Label