columns — Lattice component
Lattice

columns

LayoutSplitMixed

Two components side by side on one slide, at a ratio you choose.

Open in Playground
Variant

Use when two components make one point together: a chart and what it means, before and after, a list beside a table.

contrasttransformationoverviewsummary

When to use

  • A chart and what it means. Put the evidence in one pane and the reading of it in the other: a bar beside a list, a table beside a content pane. The slide's ## states the conclusion both panes support.
  • Before and after. Two ### titles with no markers make two text panes: the quickest way to set two states side by side.
  • An unequal pair. Give the pane that needs room the larger share: columns ratio-60-40, columns ratio-35-65. Shares run 25 to 75 in 5% steps.
  • A photo beside text. Put ![](photo.jpg) alone in a plain pane. It is fitted to the pane and centered, never cropped, at any share; a pane that needs the photo to fill its box and crop is <!-- _pane: image -->.

When not to use

  • Two unrelated points. Two panes are one argument. If the halves say different things, make two slides.
  • A binary decision with a verdict. Weighing two options and landing a recommendation is split-compare, whose verdict card this layout does not have.
  • Three or more things. A pane layout holds two panes. Three parallel items are cards-grid or compare-prose.

Common mistakes

  • A ## inside a pane. A ## starts a new slide. Use ### for a pane's title and #### for a heading inside a pane.
  • Naming a component in the layout's _class (_class: columns bar). Each pane names its own component: <!-- _pane: bar --> above the pane's ###.

Authoring

<!-- _class: columns -->

## The slide's point, in one line.

### First pane

- A point
- Another point

### Second pane

- A point
- Another point

Slots

SlotSelectorRequiredDescription
headingh2yesThe slide's title, above both panes. It makes the point; the panes support it.
panelat-paneyesTwo panes. Each opens with <!-- _pane: component --> (optional; default content) and an optional ### title, a short label naming what the pane holds.

Variants

no-rule — no rule

Drops the spine between the panes.

<!-- _class: columns ratio-45-55 no-rule -->

`Support · after the migration`

## The migration halved support tickets.

### Before

- 1,240 tickets a month
- 31 hours to first reply

### After

- 610 tickets a month
- 6 hours to first reply
Explore in Playground

Related

  • rowsthe two components are wide and read better stacked
  • split-panelone featured element beside supporting points, not two components
  • split-comparetwo options and a recommendation
  • compare-prosetwo or three co-equal options in prose