CSS: two-column

div[class~="instui-two-column"] — To-kolonners oppsett med venstre og høyre innholdsregioner.

✅ Bruk Two-Column når:

• Du har to innholdsområder med omtrent lik betydning

• Sammenligner eller kontrasterer to sett med innhold side om side

• Bygger et responsivt oppsett som stabler på mobil 🚫 Ikke bruk Two-Column når:

• Én kolonne dominerer siden — bruk i stedet et asymmetrisk oppsett

• Innholdet har ingen fordel av side-til-side presentasjon

Tilgjengelighet

• Sørg for at begge kolonnene er synlige og brukbare på smale visningsflater
• Bruk semantiske landemerker (f.eks. <section>) for å omslutte kolonneinnhold
• Oppretthold tilstrekkelig avstand og kontrast mellom kolonnene

Bruk

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

Eksempler

Deler

Del	Beskrivelse
.instui-divider	Valgfri visuell skillelinje mellom kolonnene.
.instui-left	Innholdsområde for venstre kolonne.
.instui-right	Innholdsområde for høyre kolonne.

Tilstander

Tilstand	Beskrivelse
:optional	—

Betingelser

Type	Spørring	Beskrivelse
media	(max-width: 768px)	—

Forbrukte tokens

Token	Type	Verdi
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Relatert

• page-layout