CSS: two-column

div[class~="instui-two-column"] — To-kolonne-layout med venstre og højre indholdsområder.

✅ Brug Two-Column når:

• Du har to indholdsområder af omtrent lige vigtighed

• Sammenligning eller kontrast mellem to sæt indhold side om side

• Opretter et responsivt layout, der stables på mobil 🚫 Brug ikke Two-Column når:

• En kolonne dominerer siden — brug i stedet et asymmetrisk layout

• Indholdet har ikke fordel af side-om-side præsentation

Tilgængelighed

• Sørg for, at begge kolonner er opfattelige og brugbare på smalle visningsområder
• Brug semantiske landemærker (f.eks. <section>) til at indpakke kolonneindhold
• Oprethold tilstrækkelig plads og kontrast mellem kolonnerne

Brug

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

Eksempler

Dele

Del	Beskrivelse
.instui-divider	Valgfri visuel skillelinje mellem kolonnerne.
.instui-left	Indholdsområde for venstre kolonne.
.instui-right	Indholdsområde for højre kolonne.

Tilstande

Tilstand	Beskrivelse
:optional	—

Betingelser

Type	Forespørgsel	Beskrivelse
media	(max-width: 768px)	—

Forbrugte tokens

Token	Type	Værdi
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Relateret

• page-layout