CSS: two-column

div[class~="instui-two-column"] — Zwei-Spalten-Layout mit linken und rechten Inhaltsbereichen.

✅ Two-Column verwenden, wenn:

• Sie zwei Inhaltsbereiche von ungefähr gleicher Bedeutung haben

• Zum Vergleichen oder Gegenüberstellen von zwei Inhaltsgruppen nebeneinander

• Sie ein responsives Layout erstellen, das auf Mobilgeräten gestapelt wird 🚫 Two-Column nicht verwenden, wenn:

• Eine Spalte die Seite dominiert — stattdessen ein asymmetrisches Layout verwenden

• Der Inhalt profitiert nicht von einer Nebeneinander-Darstellung

Barrierefreiheit

• Sicherstellen, dass beide Spalten auf schmalen Ansichten wahrnehmbar und nutzbar sind
• Semantische Landmarken verwenden (z. B. <section>), um Spalteninhalte zu umschließen
• Ausreichenden Abstand und Kontrast zwischen den Spalten beibehalten

Verwendung

@import "@pantoken/plugin-layouts/layouts.css";

Beispiele

Teile

Teil	Beschreibung
.instui-divider	Optionaler visueller Trenner zwischen den Spalten.
.instui-left	Inhaltsbereich der linken Spalte.
.instui-right	Inhaltsbereich der rechten Spalte.

Zustände

Zustand	Beschreibung
:optional	—

Bedingungen

Typ	Abfrage	Beschreibung
media	(max-width: 768px)	—

Verbrauchte Tokens

Token	Typ	Wert
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Verwandt

• page-layout