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