Flex-Container mit l-section--m u-p--0 anlegen, darin einen zweiten Flex-Container mit l-stack u-w--m u-gap--s, dann Überschrift, Text und Button mit ihren Klassen. Kein einziger Pixel-Wert nötig.
Was wir bauen
Einen Standard-Abschnitt: kleine Zeile oben, Überschrift, Einleitung, Fließtext, Button. Das Muster passt für fast jede Seite.
Platzhalter — Bild wird nachgerüstet.
Schritt 1 — Sektion anlegen
- Neuen Flex-Container einfügen, Richtung vertikal.
- Reiter Stil → Feld Klassen:
l-section--meintippen und aus der Liste wählen. - Zweite Klasse dazu:
u-p--0. Damit ist das mitgelieferte Padding des Containers weg — den Abstand nach oben und unten setztl-section--m, den seitlichen Rand ebenfalls.
Trag die 0 nicht von Hand in die Padding-Felder ein. Ein eingetippter Wert landet in der lokalen Klasse und bleibt dort dauerhaft stehen; u-p--0 ist eine Klasse und damit im Klassen-Feld sichtbar und austauschbar.
Schritt 2 — Inhalts-Container
- Innerhalb der Sektion einen zweiten Flex-Container, ebenfalls vertikal.
- Klassen:
l-stack u-w--m u-gap--s
Was die drei tun: l-stack stapelt die Inhalte untereinander, u-w--m begrenzt die Lesebreite, u-gap--s setzt den Abstand zwischen den Elementen. Damit brauchst du an den Inhalten selbst keine Abstände mehr.
u-gap-- setzt die CSS-Eigenschaft gap, und die wirkt nur bei display: flex oder display: grid. Ein Div-Block ist standardmäßig ein Block-Element — dort passiert nichts, bis du die Anzeige umstellst. Ausführlich: u-gap zeigt keine Wirkung.Schritt 3 — Inhalte einfügen
Vier Elemente, jeweils eine Klasse:
| Element | HTML-Ebene | Klasse |
|---|---|---|
| Absatz | — | t-label--s |
| Überschrift | H2 | t-heading--l |
| Absatz | — | t-text--l |
| Absatz | — | t-text--m |
| Button | — | c-btn--primary |
Die HTML-Ebene der Überschrift stellst du unter Allgemein ein, nicht über die Klasse — siehe Warum eine H1 klein aussehen darf.
Schritt 4 — Fertig
Speichern und die veröffentlichte Seite ansehen. Du hast keine Schriftgröße, keine Farbe, keinen Abstand und keinen Hover-Zustand eingestellt — und der Abschnitt sieht aus wie der Rest der Website. Auch auf dem Handy, ohne eine einzige Extra-Einstellung.
Prüf zum Schluss das Feld Klassen an beiden Containern: Dort darf nur die lokale Klasse ohne eigene Werte und deine vergebenen Klassen stehen. Ist local pink und trägt Einstellungen, hast du unterwegs etwas direkt gesetzt.
Varianten
| Wenn du willst … | Ändere … |
|---|---|
| mehr Luft um den Abschnitt | l-section--l statt --m |
| abgesetzten Hintergrund | l-section--m u-p--0 u-bg--muted |
| zentrierten Text | t-text--center am Inhalts-Container |
| zwei Buttons nebeneinander | Flex-Container (horizontal) mit l-cluster u-gap--s um beide |
| breiteren Inhalt | u-w--l statt u-w--m |