CSS: page-layout

div[class~="instui-page-layout"] — Layout de página padrão de três colunas com cabeçalho, barra lateral e conteúdo principal.

✅ Use Page-Layout quando:

• Você precisa de uma estrutura de página clássica com áreas de navegação e conteúdo

• A página tem uma área de conteúdo principal clara flanqueada por regiões complementares

• Você quer espaçamento e alinhamento consistentes em todo o layout 🚫 Não use Page-Layout quando:

• Construindo uma página de coluna única — use um layout mais simples

• A barra lateral compete com o conteúdo principal por importância

Acessibilidade

• Mapeie a área de conteúdo principal para um marco <main>
• Dê à barra lateral role="navigation" ou role="complementary", conforme apropriado
• Garanta que as regiões de referência tenham aria-labels distintos

Uso

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

Partes

Parte	Descrição
.instui-body	Corpo principal contendo a barra lateral e o conteúdo.
.instui-footer	Região de rodapé inferior.
.instui-header	Região de cabeçalho superior.
.instui-main	Área de conteúdo central.
.instui-sidebar	Coluna esquerda de navegação ou auxiliar.

Estados

Estado	Descrição
: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