CSS: two-column ​

div[class~="instui-two-column"] — To-kolonneoppsett med venstre og høgre innhaldsområde.

✅ Bruk Two-Column når:

  • Du har to innhaldsområde med om lag lik betydning

  • Sammenlikne eller kontrastere to sett med innhald ved sida av kvarandre

  • Lage eit responsivt oppsett som stablar seg på mobil 🚫 Ikkje bruk Two-Column når:

  • Éi kolonne dominerer sida — bruk asymmetrisk oppsett i staden

  • Innhaldet tener ikkje på side‑ved‑side-presentasjon

Tilgjenge ​

  • Sørg for at begge kolonnene er synlege og brukbare på smale skjermar
  • Bruk semantiske landemerke (t.d., <section>) for å omslutte kolonneinnhald
  • Oppretthald tilstrekkeleg avstand og kontrast mellom kolonnene

Bruk ​

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

Døme ​

Delar ​

DelSkildring
.instui-dividerValfri visuell skilje mellom kolonnene.
.instui-leftInnhaldsområde i venstre kolonne.
.instui-rightInnhaldsområde i høgre kolonne.

Tilstandar ​

TilstandSkildring
:optional—

Vilkår ​

TypeFørespurnadSkildring
media(max-width: 768px)—

Token brukt ​

TokenTypeVerdi
--instui-color-border——
--instui-space-large——
--instui-space-medium——

Relatert ​