CSS: page-layout

div[class~="instui-page-layout"] — Disseny de pàgina estàndard de tres columnes amb capçalera, barra lateral i contingut principal.

✅ Utilitza Page-Layout quan:

• Necessites una estructura de pàgina clàssica amb àrees de navegació i de contingut

• La pàgina té una àrea de contingut principal clara flanquejada per regions complementàries

• Vols espaiat i alineació consistents a tot el disseny 🚫 No utilitzis Page-Layout quan:

• Estàs construint una pàgina d'una sola columna — utilitza un disseny més senzill en canvi

• La barra lateral competeix amb el contingut principal per importància

Accessibilitat

• Assigna l'àrea de contingut principal a un punt de referència <main>
• Dona a la barra lateral role="navigation" o role="complementary" segons correspongui
• Assegura't que les regions de referència tinguin aria-labels diferents

Ús

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

Parts

Part	Descripció
.instui-body	Cos principal que conté la barra lateral i el contingut.
.instui-footer	Regió de peu de pàgina inferior.
.instui-header	Regió de capçalera superior.
.instui-main	Àrea de contingut central.
.instui-sidebar	Columna esquerra de navegació o auxiliar.

Estats

Estat	Descripció
:optional	—

Tokens consumits

Token	Tipus	Valor
--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	—	—

Relacionat

• wrapper