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.
<!-- _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 resourcesGroups
A column is not defined by a heading, but by an explicit group:
- each
>block forms a group (an HTMLblockquote); - 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
<!-- _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:
<!-- _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:
<!-- _class: content cols-3 with-title color-2 -->
# Without cards
> ## Simple
>
> Just the text.
<!-- -->
> ## Readable
>
> Aligned columns.
<!-- -->
> ## Understated
>
> No frame.