CSS: two-column

div[class~="instui-two-column"] — Disseny de dues columnes amb regions de contingut esquerra i dreta.

✅ Utilitza Two-Column quan:

• Tens dues àrees de contingut d'importància aproximadament igual

• Comparar o contrastar dos conjunts de contingut costat a costat

• Construir un disseny responsive que s'apili en dispositius mòbils 🚫 No utilitzis Two-Column quan:

• Una columna domina la pàgina — utilitza en canvi un disseny asimètric

• El contingut no es beneficia de la presentació costat a costat

Accessibilitat

• Assegura que ambdues columnes siguin perceptibles i utilitzables en pantalles estretes
• Utilitza punts de referència semàntics (p. ex., <section>) per embolcallar el contingut de les columnes
• Mantén espai i contrast suficients entre les columnes

Ús

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

Exemples

Parts

Part	Descripció
.instui-divider	Divisor visual opcional entre columnes.
.instui-left	Àrea de contingut de la columna esquerra.
.instui-right	Àrea de contingut de la columna dreta.

Estats

Estat	Descripció
:optional	—

Condicions

Tipus	Consulta	Descripció
media	(max-width: 768px)	—

Tokens consumits

Token	Tipus	Valor
--instui-color-border	—	—
--instui-space-large	—	—
--instui-space-medium	—	—

Relacionat

• page-layout