CSS: page-layout

div[class~="instui-page-layout"] — Standard tre-kolonne sideoppsett med topptekst, sidefelt og hovedinnhold.

✅ Bruk Page-Layout når:

• Du trenger en klassisk sidestruktur med navigasjon og innholdsområder

• Siden har et tydelig hovedinnholdsområde flankert av komplementære regioner

• Du ønsker konsistent avstand og justering gjennom hele oppsettet 🚫 Ikke bruk Page-Layout når:

• Du bygger en en-kolonne-side — bruk et enklere oppsett i stedet

• Sidefeltet konkurrerer med hovedinnholdet om viktighet

Tilgjengelighet

• Knytt hovedinnholdsområdet til et <main>-landemerke
• Gi sidefeltet role="navigation" eller role="complementary" etter behov
• Sørg for at landemerkeregioner har distinkte aria-labels

Bruk

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

Deler

Del	Beskrivelse
.instui-body	Hoveddel som inneholder sidefelt og innhold.
.instui-footer	Bunntekstområde.
.instui-header	Topptekstområde.
.instui-main	Sentralt innholdsområde.
.instui-sidebar	Venstre navigasjons- eller hjelpekolonne.

Tilstander

Tilstand	Beskrivelse
:optional	—

Forbrukte tokens

Token	Type	Verdi
--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	—	—

Relatert

• wrapper