CSS: two-column

div[class~="instui-two-column"] — Układ dwukolumnowy z lewym i prawym regionem zawartości.

✅ Użyj Two-Column, gdy:

• Masz dwa obszary treści o z grubsza równej ważności

• Porównujesz lub kontrastujesz dwa zestawy treści obok siebie

• Tworzysz responsywny układ, który na urządzeniach mobilnych układa się jeden pod drugim 🚫 Nie używaj Two-Column, gdy:

• Jedna kolumna dominuje na stronie — zamiast tego użyj układu asymetrycznego

• Zawartość nie zyskuje na prezentacji obok siebie

Dostępność

• Upewnij się, że obie kolumny są zauważalne i użyteczne na wąskich widokach
• Używaj semantycznych punktów orientacyjnych (np. <section>) do otaczania zawartości kolumn
• Zachowaj wystarczającą przestrzeń i kontrast między kolumnami

Użycie

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

Przykłady

Części

Część	Opis
.instui-divider	Opcjonalny wizualny separator między kolumnami.
.instui-left	Obszar zawartości lewej kolumny.
.instui-right	Obszar zawartości prawej kolumny.

Stany

Stan	Opis
:optional	—

Warunki

Typ	Zapytanie	Opis
media	(max-width: 768px)	—

Zużyte tokeny

Token	Typ	Wartość
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Powiązane

• page-layout