CSS: two-column

div[class~="instui-two-column"] — Tvåkolumnslayout med vänster och höger innehållsområden.

✅ Använd Two-Column när:

• Du har två innehållsområden med ungefär lika stor betydelse

• Jämför eller kontrastera två uppsättningar innehåll sida vid sida

• Skapar en responsiv layout som staplas på mobil 🚫 Använd inte Two-Column när:

• En kolumn dominerar sidan — använd istället en asymmetrisk layout

• Innehållet tjänar inte på en sida‑vid‑sida‑presentation

Tillgänglighet

• Se till att båda kolumner är uppfattbara och användbara på smala visningsytor
• Använd semantiska landmärken (t.ex. <section>) för att omsluta kolumninnehåll
• Behåll tillräckligt med utrymme och kontrast mellan kolumnerna

Användning

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

Exempel

Delar

Del	Beskrivning
.instui-divider	Valbar visuell avgränsare mellan kolumnerna.
.instui-left	Vänster kolumns innehållsområde.
.instui-right	Höger kolumns innehållsområde.

Tillstånd

Tillstånd	Beskrivning
:optional	—

Villkor

Typ	Fråga	Beskrivning
media	(max-width: 768px)	—

Förbrukade tokens

Token	Typ	Värde
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Relaterat

• page-layout