CSS: page-layout

div[class~="instui-page-layout"] — Стандартний триколонний макет сторінки з заголовком, бічною панеллю та основним вмістом.

✅ Використовуйте Page-Layout коли:

• Вам потрібна класична структура сторінки з навігацією та областями вмісту

• На сторінці є чітка основна область вмісту, оточена допоміжними регіонами

• Ви хочете послідовні відступи та вирівнювання по всьому макету 🚫 Не використовуйте Page-Layout коли:

• Створюєте одноколонкову сторінку — використайте простіший макет

• Бічна панель конкурує з основним вмістом за важливістю

Доступність

• Відобразьте основну область вмісту як орієнтир <main>
• Надайте бічній панелі role="navigation" або role="complementary" за потреби
• Переконайтеся, що орієнтири мають різні aria-label

Використання

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

Частини

Частина	Опис
.instui-body	Основна частина, що містить бічну панель і вміст.
.instui-footer	Нижня область футера.
.instui-header	Верхня область заголовка.
.instui-main	Центральна область вмісту.
.instui-sidebar	Ліва панель навігації або допоміжна колонка.

Стані

Стан	Опис
:optional	—

Використано токенів

Token	Тип	Значення
--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	—	—

Пов'язані

• wrapper