Usage 1: _class: cols

Left Column

The entire slide becomes a column layout.

  • Specify <!-- _class: cols -->
  • Only write <div class="col">
  • Useful for full-slide splits

Right Column

<div class="cols"> wrapper is not needed.

  • Item A
  • Item B
  • Item C
scss/canvas/common-layout/_columns.scss

Usage 2: <div class="cols">

You can place content before and after columns

Left Column

  • Item A
  • Item B

Right Column

  • Item C
  • Item D

Content continues after the columns

scss/canvas/common-layout/_columns.scss

Column Width Specification

Text Content

Layout for placing images and text side by side.

  • col-4: Ratio of 4
  • col-6: Ratio of 6

Available: col-1 to col-10

scss/canvas/common-layout/_columns.scss

CSS Variables

CSS Variable Default
--cols-gap 1em

Available Classes

Class Description
.cols Container for columns
.col Equal-width column
.col-N Ratio-based width (N = 1-10)
scss/canvas/common-layout/_columns.scss

Customization Example

Override gap between columns:

---
style: |
  :root {
    --cols-gap: 2em;
  }
---

Left Column

Larger gap

Right Column

Larger gap

scss/canvas/common-layout/_columns.scss