CSS: two-column ​

div[class~="instui-two-column"] — Two-column layout with left and right content regions.

✅ Use Two-Column when:

  • You have two content areas of roughly equal importance

  • Comparing or contrasting two sets of content side-by-side

  • Building a responsive layout that stacks on mobile 🚫 Don't use Two-Column when:

  • One column dominates the page — use asymmetric layout instead

  • Content doesn't benefit from side-by-side presentation

Accessibility ​

  • Ensure both columns are perceivable and usable on narrow viewports
  • Use semantic landmarks (e.g., <section>) to wrap column content
  • Maintain sufficient space and contrast between columns

Usage ​

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

Examples ​

Parts ​

PartDescription
.instui-dividerOptional visual divider between columns.
.instui-leftLeft column content area.
.instui-rightRight column content area.

States ​

StateDescription
:optional—

Conditions ​

TypeQueryDescription
media(max-width: 768px)—

Tokens consumed ​

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