CSS: page-layout

div[class~="instui-page-layout"] — Standard trekolonne-sideopbygning med header, sidepanel og hovedindhold.

✅ Brug Page-Layout når:

• Du har brug for en klassisk sidestruktur med navigation og indholdsområder

• Siden har et tydeligt hovedindholdsområde flankeret af supplerende områder

• Du ønsker konsekvent afstand og justering i hele layoutet 🚫 Brug ikke Page-Layout når:

• Du bygger en en-kolonne-side — brug i stedet et simplere layout

• Sidepanelet konkurrerer med hovedindholdet om vigtighed

Tilgængelighed

• Kortlæg hovedindholdsområdet til et <main>-landmark
• Giv sidepanelet role="navigation" eller role="complementary", efter behov
• Sørg for at landmark-regioner har entydige aria-labels

Brug

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

Eksempler

Dele

Del	Beskrivelse
.instui-body	Hoveddel indeholdende sidepanel og indhold.
.instui-footer	Bundfodsområde.
.instui-header	Øverste headerområde.
.instui-main	Centralt indholdsområde.
.instui-sidebar	Venstre navigations- eller hjælpekolonne.

Tilstande

Tilstand	Beskrivelse
:optional	—

Forbrugte tokens

Token	Type	Værdi
--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	—	—

Relateret

• wrapper