CSS: two-column

div[class~="instui-two-column"] — Diseño de dos columnas con regiones de contenido izquierda y derecha.

✅ Usar Two-Column cuando:

• Tienes dos áreas de contenido de importancia aproximadamente igual

• Comparar o contrastar dos conjuntos de contenido uno al lado del otro

• Crear un diseño responsive que se apile en móvil 🚫 No uses Two-Column cuando:

• Una columna domina la página — usa un diseño asimétrico en su lugar

• El contenido no se beneficia de una presentación lado a lado

Accesibilidad

• Asegúrate de que ambas columnas sean perceptibles y usables en vistas estrechas
• Usa hitos semánticos (p.ej., <section>) para envolver el contenido de las columnas
• Mantén espacio y contraste suficientes entre las columnas

Uso

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

Ejemplos

Partes

Parte	Descripción
.instui-divider	Divisor visual opcional entre columnas.
.instui-left	Área de contenido de la columna izquierda.
.instui-right	Área de contenido de la columna derecha.

Estados

Estado	Descripción
:optional	—

Condiciones

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

Tokens consumidos

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

Relacionado

• page-layout