CSS: page-layout

div[class~="instui-page-layout"] — Tata letak halaman standar tiga kolom dengan header, sidebar, dan konten utama.

✅ Gunakan Page-Layout ketika:

• Anda memerlukan struktur halaman klasik dengan area navigasi dan konten

• Halaman memiliki area konten utama yang jelas diapit oleh area pelengkap

• Anda menginginkan jarak dan perataan yang konsisten di seluruh tata letak 🚫 Jangan gunakan Page-Layout ketika:

• Membangun halaman satu kolom — gunakan tata letak yang lebih sederhana sebagai gantinya

• Sidebar bersaing dengan konten utama untuk mendapatkan prioritas

Aksesibilitas

• Petakan area konten utama ke landmark <main>
• Beri sidebar role="navigation" atau role="complementary" sesuai kebutuhan
• Pastikan region landmark memiliki aria-label yang berbeda

Penggunaan

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

Contoh

Bagian

Bagian	Deskripsi
.instui-body	Badan utama yang berisi sidebar dan konten.
.instui-footer	Area footer bawah.
.instui-header	Area header atas.
.instui-main	Area konten tengah.
.instui-sidebar	Kolom navigasi kiri atau kolom tambahan.

Status

Status	Deskripsi
:optional	—

Token yang digunakan

Token	Tipe	Nilai
--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	—	—

Terkait

• wrapper