Mehrspaltige Layouts

Für Inhaltsseiten steht ein responsives Spaltenlayout bereit. Auf großen Bildschirmen kannst du Inhalte in zwei Spalten anordnen. Auf kleinen Bildschirmen werden die Spalten automatisch untereinander dargestellt. Die Elemente können natürlich auch untereinander und auch mit anderen Elementen geschachtelt werden.

Grundgerüst

<div class="spalten spalten--x-y">
    <div class="spalte">
        Inhalt links
    </div>
    <div class="spalte">
        Inhalt rechts
    </div>
</div>

Wähle für die Aufteilung eine der folgenden Klassen:

• spalten--1-2 für 1/3 : 2/3
• spalten--1-1 für 1/2 : 1/2
• spalten--2-1 für 2/3 : 1/3

Optional kannst du die Inhalte beider Spalten vertikal zentrieren:

• spalten--mitte für vertikale Ausrichtung zur Mitte

Beispiel 1/3 : 2/3

<div class="spalten spalten--1-2">
    <div class="spalte">
        <h4>Spalte 1</h4>
        <p>Kurzer Einleitungstext, Merksätze oder Metadaten.</p>
    </div>
    <div class="spalte">
        <h4>Spalte 2</h4>
        <p>Ausführlicher Hauptinhalt mit Bildern, Listen oder Boxen.</p>
    </div>
</div>

Beispiel 1/2 : 1/2

<div class="spalten spalten--1-1">
    <div class="spalte">
        <h4>Vorteile</h4>
        <ul>
            <li>Punkt A</li>
            <li>Punkt B</li>
        </ul>
    </div>
    <div class="spalte">
        <h4>Nachteile</h4>
        <ul>
            <li>Punkt C</li>
            <li>Punkt D</li>
        </ul>
    </div>
</div>

Beispiel 2/3 : 1/3

<div class="spalten spalten--2-1">
    <div class="spalte">
        <h4>Hauptteil</h4>
        <p>Hier steht der umfangreiche Inhalt.</p>
    </div>
    <div class="spalte">
        <h4>Nebeninhalt</h4>
        <p>Hier stehen Zusatzinfos, Hinweise oder Aufgaben.</p>
    </div>
</div>

Beispiel mit vertikaler Ausrichtung

<div class="spalten spalten--1-2 spalten--mitte">
    <div class="spalte">
        <img alt="Testbild" class="mitte" src="testbild.png" width="180"/>
    </div>
    <div class="spalte">
        <h4>Text mittig zur Bildhöhe</h4>
        <p>Durch das zusätzliche Attribut werden die Inhalte vertikal zentriert.</p>
    </div>
</div>