CSS: page-layout

div[class~="instui-page-layout"] — Standard tredelad sidlayout med header, sidokolumn och huvudinnehåll.

✅ Använd Page-Layout när:

• Du behöver en klassisk sidstruktur med navigering och innehållsområden

• Sidan har ett tydligt huvudområde omgivet av kompletterande regioner

• Du vill ha konsekventa mellanrum och justering i hela layouten 🚫 Använd inte Page-Layout när:

• Du bygger en enkolumnssida — använd istället en enklare layout

• Sidokolumnen konkurrerar med huvudinnehållet om betydelse

Tillgänglighet

• Kartlägg huvudinnehållsområdet till en <main> landmark
• Ge sidokolumnen role="navigation" eller role="complementary" vid behov
• Säkerställ att landmärkesregionerna har distinkta aria-labels

Användning

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

Delar

Del	Beskrivning
.instui-body	Huvudsektion som innehåller sidokolumn och innehåll.
.instui-footer	Nedre sidfotssektion.
.instui-header	Övre header-sektion.
.instui-main	Centralt innehållsområde.
.instui-sidebar	Vänster navigations- eller hjälpkolumn.

Tillstånd

Tillstånd	Beskrivning
:optional	—

Förbrukade tokens

Token	Typ	Värde
--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	—	—

Relaterat

• wrapper