CSS: page-layout

div[class~="instui-page-layout"] — Diseño de página estándar de tres columnas con encabezado, barra lateral y contenido principal.

✅ Usar Page-Layout cuando:

• Necesitas una estructura de página clásica con áreas de navegación y contenido

• La página tiene un área principal de contenido claramente delimitada flanqueada por regiones complementarias

• Quieres espaciado y alineación consistentes en todo el diseño 🚫 No uses Page-Layout cuando:

• Estás creando una página de una sola columna — usa en su lugar un diseño más simple

• La barra lateral compite con el contenido principal por importancia

Accesibilidad

• Asigna el área de contenido principal a un punto de referencia <main>
• Proporciona a la barra lateral role="navigation" o role="complementary" según corresponda
• Asegúrate de que las regiones de referencia tengan aria-labels distintos

Uso

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

Partes

Parte	Descripción
.instui-body	Cuerpo principal que contiene la barra lateral y el contenido.
.instui-footer	Región inferior del pie de página.
.instui-header	Región superior del encabezado.
.instui-main	Área de contenido central.
.instui-sidebar	Columna izquierda de navegación o auxiliar.

Estados

Estado	Descripción
:optional	—

Tokens consumidos

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

Relacionado

• wrapper