Skip to content

Columns and cards ​

Columns ​

The classes cols-2 to cols-6 create equal-width columns. The number indicates the groups per row, not necessarily the total number of groups: extra groups wrap to the next row, within the limits of the available space.

md
<!-- _class: content cols-2 with-title cards medium -->

# Two approaches

> ## Local
>
> The model runs on the machine.
>
> - Control over the hardware
> - Offline access

<!-- -->

> ## Remote
>
> The model runs on a server.
>
> - Access through an API
> - Shared resources

Groups ​

A column is not defined by a heading, but by an explicit group:

  • each > block forms a group (an HTML blockquote);
  • empty > lines separate paragraphs inside the group;
  • the empty comment <!-- --> separates two consecutive groups and prevents them from merging into a single quote.

A ## alone does not create a column

A ## heading outside a > block does not group the paragraphs that follow it. In columns, keep the elements directly under the slide for the title, the groups and the caption; place explanatory text inside the groups.

More columns ​

md
<!-- _class: content cols-4 cards with-title small color-4 -->

# Four key steps

> ## Listen
>
> Gather the needs.

<!-- -->

> ## Design
>
> Propose a solution.

<!-- -->

> ## Deliver
>
> Put it into service.

<!-- -->

> ## Improve
>
> Measure and adjust.

With cols-3 and six groups, you get two rows of three:

md
<!-- _class: content cols-3 cards with-title small -->

# Six questions

> ## Who?
>
> The users.

<!-- -->

> ## What?
>
> The service provided.

<!-- -->

> ## Where?
>
> In the field.

<!-- -->

> ## When?
>
> Starting this quarter.

<!-- -->

> ## How?
>
> Step by step.

<!-- -->

> ## Why?
>
> To gain clarity.

The cards option ​

cards adds a background, a border, rounded corners and 20 pixels of inner padding. The colors come from the slide's palette.

  • It applies to content groups, gallery images and timeline steps.
  • In an image/text composition, it styles the text block.
  • It does not create groups and does not affect arbitrary paragraphs.

Without cards, the same groups stay aligned in columns, without styling:

md
<!-- _class: content cols-3 with-title color-2 -->

# Without cards

> ## Simple
>
> Just the text.

<!-- -->

> ## Readable
>
> Aligned columns.

<!-- -->

> ## Understated
>
> No frame.

Documentation of the DWA Core v1 language, the VS Code extension, the CLI and the theme portal.