CSS: two-column

div[class~="instui-two-column"] — Tata letak dua kolom dengan area konten kiri dan kanan.

✅ Gunakan Two-Column ketika:

• Anda memiliki dua area konten dengan tingkat kepentingan yang kurang lebih sama

• Membandingkan atau mengontraskan dua set konten secara berdampingan

• Membangun tata letak responsif yang menumpuk pada perangkat seluler 🚫 Jangan gunakan Two-Column ketika:

• Satu kolom mendominasi halaman — gunakan tata letak asimetris sebagai gantinya

• Konten tidak mendapat manfaat dari penyajian berdampingan

Aksesibilitas

• Pastikan kedua kolom terlihat dan dapat digunakan pada viewport sempit
• Gunakan landmark semantik (mis. <section>) untuk membungkus konten kolom
• Pertahankan ruang dan kontras yang cukup antara kolom

Penggunaan

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

Contoh

Bagian

Bagian	Deskripsi
.instui-divider	Pembatas visual opsional antara kolom.
.instui-left	Area konten kolom kiri.
.instui-right	Area konten kolom kanan.

Status

Status	Deskripsi
:optional	—

Kondisi

Tipe	Kueri	Deskripsi
media	(max-width: 768px)	—

Token yang digunakan

Token	Tipe	Nilai
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Terkait

• page-layout