CSS: two-column

div[class~="instui-two-column"] — Layout a due colonne con aree di contenuto a sinistra e a destra.

✅ Usa Two-Column quando:

• Hai due aree di contenuto di importanza approssimativamente uguale

• Confrontare o mettere a confronto due insiemi di contenuti affiancati

• Creare un layout responsive che si impili sui dispositivi mobili 🚫 Non usare Two-Column quando:

• Una colonna domina la pagina — usa invece un layout asimmetrico

• Il contenuto non trae beneficio da una presentazione affiancata

Accessibilità

• Assicurati che entrambe le colonne siano percepibili e utilizzabili su viewport stretti
• Usa landmark semantici (es., <section>) per racchiudere il contenuto delle colonne
• Mantieni spazio e contrasto sufficienti tra le colonne

Uso

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

Parti

Parte	Descrizione
.instui-divider	Separatore visivo opzionale tra le colonne.
.instui-left	Area di contenuto della colonna sinistra.
.instui-right	Area di contenuto della colonna destra.

Stati

Stato	Descrizione
:optional	—

Condizioni

Tipo	Query	Descrizione
media	(max-width: 768px)	—

Token consumati

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

Correlati

• page-layout