CSS: page-layout

div[class~="instui-page-layout"] — Standard-Layout mit drei Spalten: Kopfzeile, Seitenleiste und Hauptinhalt.

✅ Page-Layout verwenden, wenn:

• Sie eine klassische Seitenstruktur mit Navigation und Inhaltsbereichen benötigen

• Die Seite einen klaren Hauptinhaltsbereich hat, flankiert von ergänzenden Bereichen

• Sie konsistente Abstände und Ausrichtung im Layout wünschen 🚫 Page-Layout nicht verwenden, wenn:

• Sie eine Ein-Spalten-Seite bauen — verwenden Sie stattdessen ein einfacheres Layout

• Die Seitenleiste mit dem Hauptinhalt um Wichtigkeit konkurriert

Barrierefreiheit

• Ordnen Sie den Hauptinhaltsbereich einem <main> Landmarken-Element zu
• Geben Sie der Seitenleiste role="navigation" oder role="complementary", je nach Bedarf
• Stellen Sie sicher, dass die Landmarkenbereiche unterschiedliche aria-labels haben

Verwendung

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

Beispiele

Teile

Teil	Beschreibung
.instui-body	Hauptbereich, der Seitenleiste und Inhalt enthält.
.instui-footer	Unterer Footer-Bereich.
.instui-header	Oberer Header-Bereich.
.instui-main	Zentraler Inhaltsbereich.
.instui-sidebar	Linke Navigations- oder Hilfsspalte.

Zustände

Zustand	Beschreibung
:optional	—

Verbrauchte Tokens

Token	Typ	Wert
--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	—	—

Verwandt

• wrapper