CSS: page-layout

div[class~="instui-page-layout"] — Layout di pagina standard a tre colonne con header, barra laterale e contenuto principale.

✅ Usa Page-Layout quando:

• Hai bisogno di una struttura di pagina classica con aree di navigazione e contenuto

• La pagina ha un'area di contenuto principale chiara affiancata da regioni complementari

• Vuoi spaziatura e allineamento coerenti in tutto il layout 🚫 Non usare Page-Layout quando:

• Stai costruendo una pagina a colonna singola — usa invece un layout più semplice

• La barra laterale compete con il contenuto principale in termini di importanza

Accessibilità

• Mappa l'area del contenuto principale a un landmark <main>
• Assegna alla barra laterale role="navigation" o role="complementary" secondo necessità
• Assicurati che le regioni landmark abbiano aria-label distinti

Uso

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

Esempi

Parti

Parte	Descrizione
.instui-body	Corpo principale contenente la barra laterale e il contenuto.
.instui-footer	Regione footer inferiore.
.instui-header	Regione header superiore.
.instui-main	Area di contenuto centrale.
.instui-sidebar	Colonna sinistra di navigazione o ausiliaria.

Stati

Stato	Descrizione
:optional	—

Token consumati

Token	Tipo	Valore
--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	—	—

Correlati

• wrapper