Nutze l-section--m für einen Seitenabschnitt, l-stack für Elemente untereinander und l-cluster für Elemente nebeneinander.
Die drei Bausteine
| Klasse | Was sie tut |
|---|---|
l-section |
Begrenzt die Inhaltsbreite, zentriert und setzt seitlichen Abstand |
l-stack |
Elemente untereinander mit gleichmäßigem Abstand |
l-cluster |
Elemente nebeneinander, brechen bei Platzmangel um |
Abstände oben und unten
l-section gibt es in Größenstufen. Sie bestimmen, wie viel Luft der Abschnitt oben und unten hat:
l-section--xxs · --xs · --s · --m · --l · --xl · --xxl
Der Standard ist l-section--m. Nimm --l oder --xl, wenn ein Abschnitt bewusst Raum bekommen soll, und --s oder --xs bei dicht aufeinanderfolgenden Blöcken.
Alle Stufen skalieren mit der Bildschirmbreite — auf dem Handy automatisch weniger Abstand als am Monitor. Du stellst nichts für Mobil ein.
Abstände innerhalb steuern
l-stack und l-cluster haben einen voreingestellten Abstand. Ändern kannst du ihn mit einem u-gap---Helfer:
Beide Klassen bringen die passende Anzeige (Grid bzw. Flex) mit — dort wirkt u-gap-- sofort. An einem gewöhnlichen Div-Block passiert nichts, bis du ihn auf Flex oder Grid stellst: hier erklärt.
l-stack u-gap--xs — dicht
l-stack u-gap--s — kompakt
l-stack u-gap--l — luftig
Ein typischer Abschnitt
- Container:
l-section--m - Darin Container:
l-stack u-w--m u-gap--s— stapelt die Inhalte und begrenzt die Lesebreite - Darin: Überschrift
t-heading--l, Textt-text--m, Buttonc-btn--primary
Lesebreite begrenzen
Text ist am besten lesbar bei etwa 60–75 Zeichen pro Zeile. In einem breiten Abschnitt werden Zeilen zu lang. Dafür gibt es die Breiten-Helfer:
| Klasse | Wofür |
|---|---|
u-w--m |
Lesetext — der häufigste Fall |
u-w--l |
Breitere Inhalte, Listen, Tabellen |
u-w--full |
volle Breite |
u-p--0, statt eine 0 in die Padding-Felder zu tippen. Eine eingetippte 0 landet in der lokalen Klasse und steht dort dauerhaft über jeder Klasse; u-p--0 ist im Klassen-Feld sichtbar und austauschbar. Den Innenabstand regelst du danach mit u-p--s bis u-p--5xl.