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 ​

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

Esempi ​

Parti ​

ParteDescrizione
.instui-dividerSeparatore visivo opzionale tra le colonne.
.instui-leftArea di contenuto della colonna sinistra.
.instui-rightArea di contenuto della colonna destra.

Stati ​

StatoDescrizione
:optional—

Condizioni ​

TipoQueryDescrizione
media(max-width: 768px)—

Token consumati ​

TokenTipoValore
--instui-color-border——
--instui-space-large——
--instui-space-medium——

Correlati ​