CSS: two-column

div[class~="instui-two-column"] — Lay-out met twee kolommen met linker- en rechterinhoudsgebieden.

✅ Gebruik Two-Column wanneer:

• Je twee inhoudsgebieden hebt die ongeveer even belangrijk zijn

• Je twee sets inhoud naast elkaar wilt vergelijken of contrasteren

• Je een responsieve lay-out bouwt die op mobiele apparaten stapelt 🚫 Gebruik Two-Column niet wanneer:

• Één kolom de pagina domineert — gebruik in plaats daarvan een asymmetrische lay-out

• Inhoud geen baat heeft bij een presentatie naast elkaar

Toegankelijkheid

• Zorg dat beide kolommen zichtbaar en bruikbaar zijn op smalle weergavevensters
• Gebruik semantische landmarks (bijv. <section>) om kolominhoud te omsluiten
• Zorg voor voldoende ruimte en contrast tussen de kolommen

Gebruik

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

Onderdelen

Onderdeel	Beschrijving
.instui-divider	Optionele visuele scheiding tussen kolommen.
.instui-left	Inhoudsgebied van de linker kolom.
.instui-right	Inhoudsgebied van de rechter kolom.

Staten

Toestand	Beschrijving
:optional	—

Voorwaarden

Type	Zoekopdracht	Beschrijving
media	(max-width: 768px)	—

Gebruikte tokens

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

Gerelateerd

• page-layout