CSS: two-column

div[class~="instui-two-column"] — Layout de duas colunas com áreas de conteúdo à esquerda e à direita.

✅ Use Two-Column quando:

• Você tem duas áreas de conteúdo de importância aproximadamente igual

• Comparar ou contrastar dois conjuntos de conteúdo lado a lado

• Construindo um layout responsivo que empilha no celular 🚫 Não use Two-Column quando:

• Uma coluna domina a página — use um layout assimétrico em vez disso

• O conteúdo não se beneficia da apresentação lado a lado

Acessibilidade

• Garanta que ambas as colunas sejam perceptíveis e utilizáveis em visualizações estreitas
• Use marcos semânticos (por exemplo, <section>) para envolver o conteúdo das colunas
• Mantenha espaço e contraste suficientes entre as colunas

Uso

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

Exemplos

Partes

Parte	Descrição
.instui-divider	Divisor visual opcional entre as colunas.
.instui-left	Área de conteúdo da coluna esquerda.
.instui-right	Área de conteúdo da coluna direita.

Estados

Estado	Descrição
:optional	—

Condições

Tipo	Consulta	Descrição
media	(max-width: 768px)	—

Tokens consumidos

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

Relacionados

• page-layout