CSS: page-layout

div[class~="instui-page-layout"] — Mise en page standard à trois colonnes avec en-tête, barre latérale et contenu principal.

✅ Utiliser Page-Layout lorsque :

• Vous avez besoin d'une structure de page classique avec des zones de navigation et de contenu

• La page a une zone de contenu principale claire entourée de régions complémentaires

• Vous voulez un espacement et un alignement cohérents dans la mise en page 🚫 Ne pas utiliser Page-Layout lorsque :

• Construction d'une page à une seule colonne — utiliser plutôt une mise en page plus simple

• La barre latérale entre en concurrence avec le contenu principal pour l'importance

Accessibilité

• Map the main content area to a <main> landmark
• Give the sidebar role="navigation" or role="complementary" as appropriate
• Ensure landmark regions have distinct aria-labels

Utilisation

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

Parties

Partie	Description
.instui-body	Corps principal contenant la barre latérale et le contenu.
.instui-footer	Région du pied de page.
.instui-header	Région de l'en-tête.
.instui-main	Zone de contenu centrale.
.instui-sidebar	Colonne de navigation gauche ou colonne auxiliaire.

États

État	Description
:optional	—

Tokens consommés

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

Connexe

• wrapper