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 principal de conteúdo clara ladeada 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 em vez disso

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

Acessibilidade

• Mapear a área de conteúdo principal para um marco <main>
• Atribuir à barra lateral role="navigation" ou role="complementary" conforme apropriado
• Garantir que as regiões de marco 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 do rodapé inferior.
.instui-header	Região do 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	—	—

Relacionados

• wrapper