CSS: two-column

div[class~="instui-two-column"] — Postavitev z dvema stolpcema z levim in desnim vsebinskim območjem.

✅ Uporabite Two-Column, ko:

• Imate dve vsebinski področji približno enake pomembnosti

• Primerjate ali kontrastirate dve množici vsebine ena ob drugi

• Gradite odzivno postavitev, ki se na mobilnih napravah zlaga 🚫 Don't use Two-Column when:

• Eden izmed stolpcev prevladuje na strani — uporabite asimetrično postavitev

• Vsebina ne pridobi s predstavitvijo ena ob drugi

Dostopnost

• Poskrbite, da sta oba stolpca zaznavna in uporabna na ozkih zaslonih
• Uporabite semantične mejnike (npr. <section>) za ovijanje vsebine stolpcev
• Ohranjajte dovolj prostora in kontrasta med stolpcema

Uporaba

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

Primeri

Delii

Del	Opis
.instui-divider	Neobvezna vizualna ločnica med stolpcema.
.instui-left	Območje vsebine levega stolpca.
.instui-right	Območje vsebine desnega stolpca.

Stanja

Stanje	Opis
:optional	—

Pogoji

Tip	Poizvedba	Opis
media	(max-width: 768px)	—

Porabljeni žetoni

Token	Tip	Vrednost
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Sorodno

• page-layout