Examples · Layout
Column-Layouts
Alle Spalten werden auf Mobile automatisch einspaltig. Bilder stehen im HTML immer zuerst (gut für Screenreader).
.cols--2
Zwei gleiche Spalten (50 / 50)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi.
.cols--3070
Bild links, Text rechts (30 / 70)
Label
Passend für Personen & Profile
Das schmale linke Feld eignet sich gut für ein rundes Porträt, rechts läuft der Text. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
.cols--3070.cols--reverse
Bild rechts (Reihenfolge im HTML bleibt gleich)
Label
Visuell gespiegelt, semantisch identisch
Das Bild steht im Code weiterhin zuerst;
cols--reverse schiebt es nur optisch nach rechts.
Cras elementum ultrices diam.
.cols--7030
Breiter Text, schmale Nebenspalte (70 / 30)
Die breite Spalte trägt den Hauptinhalt. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
.cols--4
Vier Spalten (1 → 2 → 4)
Erst
Kurzer Text, oben bündig ausgerichtet.
Zweit
Responsiv: einspaltig, dann zwei, dann vier.
Dritt
Ideal für Leistungen oder Merkmale.
Viert
Gleiche Klassenlogik wie überall.
.media
Bild über die volle Breite (16:9)
Weiter