CSS: page-layout

div[class~="instui-page-layout"] — Standaard indeling met drie kolommen: header, zijbalk en hoofdinhoud.

✅ Gebruik Page-Layout wanneer:

• Je hebt een klassieke paginaverdeling nodig met navigatie- en inhoudsgebieden

• De pagina heeft een duidelijk hoofdinhoudsgebied met complementaire zijgebieden

• Je wilt consistente afstand en uitlijning in de lay-out 🚫 Gebruik Page-Layout niet wanneer:

• Je bouwt een pagina met één kolom — gebruik in plaats daarvan een eenvoudigere lay-out

• De zijbalk concurreert met de hoofdinhoud om belangrijkheid

Toegankelijkheid

• Koppel het hoofdinhoudsgebied aan een <main> landmark
• Geef de zijbalk role="navigation" of role="complementary" waar van toepassing
• Zorg dat landmark-regio's unieke aria-labels hebben

Gebruik

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

Voorbeelden

Onderdelen

Onderdeel	Beschrijving
.instui-body	Hoofdgedeelte met zijbalk en inhoud.
.instui-footer	Onderste voettekstgebied.
.instui-header	Bovenste headergebied.
.instui-main	Centraal inhoudsgebied.
.instui-sidebar	Linker navigatie- of hulpkolom.

Staten

Toestand	Beschrijving
:optional	—

Gebruikte tokens

Token	Type	Waarde
--instui-color-border	—	—
--instui-color-footer-background	—	—
--instui-color-footer-text	—	—
--instui-color-header-background	—	—
--instui-color-sidebar-background	—	—
--instui-font-size-small	<length>	—
--instui-space-medium	—	—

Gerelateerd

• wrapper