---
title: Slide Layout
---

# Table of Contents

- [Slide Format](#slide-format-columns)
- [Slide Format Example](#title)
- [Multi-Columns 1](#multi-columns-1-columns)
- [Multi-Columns 1 Example](#multi-column-1-example-columns)
- [Column Sizing](#column-sizing-columns)
- [Column Sizing Example](#column-sizing-example-columns)
- [Split](#split-columns)
- [Split Example](#split-example-columns)
- [Grid Layout](#grid-layout-columns)
- [Grid Layout Example](#grid-layout-example-grid)
- [Fragments](#fragments-columns)
- [Lists](#lists-columns)
- [Sequential Lists](#sequential-lists-columns)
- [Tables](#tables-columns)
- [Block Quotes](#block-quotes-columns)
- [Vertical Slides](#vertical-slides-columns)


# Slide Format {.columns}

## {.top}

Decker uses [markdown headings](https://www.markdownguide.org/basic-syntax/) (level 1 to 3) to structure slides. 

##  

##  

## Syntax {.left grow="2"}

| Description            | Markdown | Example          |
| ---------------------- | ---------| ---------------- |
| Create a new slide     | `#`      |  `# Title`       |
| Create a new paragraph | `##`     |  `## Paragraph`  |
| Start a new line       | `###`    |  `### Block`     |


## Result {.right}

See next slide.

<!-- ---8<--- title -->
# Title

Text after the title.

## Paragraph

Text after the paragraph.

### Block

Text after the block. 
<!-- ---8<--- -->

# Multi-Columns {.columns}

## {.top}

Add columns to slides by adding `{.columns}` to the slide header, and adding the position of each column as `{.left}`, `{.center}`, `{.right}`, `{.top}` or `{.bottom}`.

##  
  
##  

## Syntax {.left .small}

```{.markdown}
# Multi-column Example {.columns}

## Top Column {.top}
This spans across the top of all columns.

## Left Column{.left}
![](/img/06-metal.png)

## Center Column {.center}
![](/img/06-metal.png)

## right Column {.right}
![](/img/06-metal.png)

## Bottom Column {.bottom}
This spans across the bottom of all columns.
```

## Result {.right}

See next slide.


# Multi-column Example {.columns}

## Top Column {.top}
This spans across the top of all columns.

## Left Column{.left}
![](/img/06-metal.png)

## Center Column {.center}
![](/img/06-metal.png)

## right Column {.right}
![](/img/06-metal.png)

## Bottom Column {.bottom}
This spans across the bottom of all columns.


# Column Sizing {.columns}

## {.top}

Adjust the width of columns using the `grow="xx"` attribute. This top column is full width, while the left column has `grow="2"`. 

## Syntax {.left grow="2"}

```{.markdown}
# Column Sizing Example {.columns}
## Left Column {.left grow="3"}   
![](/img/06-metal.png)

## Right column {.right}
![](/img/06-metal.png) 
```

## Result {.right}

See next slide.

# Column Sizing Example {.columns}

## Left Column {.left grow="3"}   
![](/img/06-metal.png)

## Right column {.right}
![](/img/06-metal.png) 

# Split {.columns}

## {.top}

To split the layout of a slide into two columns at your point of choosing add the `{.columns}` parameter to the level 1 header, and the `{.split}` parameter to a level 2 header. 

##  
  
##  

## Syntax {.left .small}

```{.markdown}
# Split Example {.columns}

## {.top}
    
##  {.split}
![](/img/marc.jpg){width=60%} 

Caption: Prof. Dr. Marc Erich Latoschik  

##  
![](img/jll.jpg){width=60%}

Caption: Dr. Jean-Luc Lugrin
```

## Result {.right}

See next slide.

# Split Example {.columns}

## {.top}

##  
  
##  
    
##  {.split}
![](/img/marc.jpg){width=60%} 

Caption: Prof. Dr. Marc Erich Latoschik  

##  
![Dr. Jean-Luc Lugrin](img/jll.jpg){width=60%}

# Grid Layout {.columns}

## {.top}
Use a grid layout in slides by adding `{.grid}` to the slide [header](#slide-format), and by defining columns using level-2 headers (##) with the position of each column noted as `{.top-left}`,`{.top}`,`{.top-right}`,`{.left}`, `{.center}`,`{.right}`,`{.bottom-left}`,`{.bottom}`, or `{.bottom-right}`.

## Syntax {.left .small}

```{.markdown}
# Grid Layout Example {.grid}

## {.top-left}
![top-left](/img/06-metal.png)
## {.top}
![top](/img/06-metal.png)
## {.top-right}
![top-right](/img/06-metal.png)
## {.left}
![left](/img/06-metal.png)
## {.center}
![center](/img/06-metal.png)
## {.right}
![right](/img/06-metal.png)
## {.bottom-left}
![bottom-left](/img/06-metal.png)
## {.bottom}
![bottom](/img/06-metal.png)
## {.bottom-right}
![bottom-right](/img/06-metal.png)
```

## Result {.right}

See next slide.

# Grid Layout Example {.grid}

## {.top-left}

![top-left](/img/06-metal.png)

## {.top}

![top](/img/06-metal.png)

## {.top-right}

![top-right](/img/06-metal.png)

## {.left}

![left](/img/06-metal.png)

## {.center}

![center](/img/06-metal.png)

## {.right}

![right](/img/06-metal.png)

## {.bottom-left}

![bottom-left](/img/06-metal.png)

## {.bottom}

![bottom](/img/06-metal.png)

## {.bottom-right}

![bottom-right](/img/06-metal.png)

# Fragments {.columns}

## {.top}

Reveal segments of slides sequentially with the `{.fragment}` parameter. In any level 1-3 [header](#slide-format), add the tag `.fragment`. Advance through the slides, revealing fragments sequentially. The slide URL is appended with a number beginning with 0 indicating the fragment number. Watch the URL as you advance through this slide. 

##  
  
##  

## Syntax {.left}

```{.markdown}
## First Block
Text visible from the beginning.

## Second Block {.fragment}
Text appears as you advance.

## Third Block {.fragment}
Text appears as you advance.

## Fourth Block {.fragment}
Text appears as you advance.
```

<!-- Example of fragments in URLs:  
1. localhost:8888/example-deck.html#/1/0/**-1** - no fragment  
2. localhost:8888/example-deck.html#/1/0/**0** - 1st fragment  
3. localhost:8888/example-deck.html#/1/0/**1** - 2nd fragment   -->


## Result {.right}

## First Block
Text visible from the beginning.

## Second Block {.fragment}
Text appears as you advance.

## Third Block {.fragment}
Text appears as you advance.

## Fourth Block {.fragment}
Text appears as you advance.


# Fragment Index 

Use the cue `data-fragment-index` to indicate an order that fragments should appear.

## Syntax {.small}

```{markdown}
## Will appear first {.fragment data-fragment-index="1"}
a

## Will appear next {.fragment data-fragment-index="2"}
b

## Will appear with the block above  {.fragment data-fragment-index="2" }
c
```

## Result 

## Will appear first {.fragment data-fragment-index="1"}

a

## Will appear next {.fragment data-fragment-index="2"}

b

## Will appear with the block above  {.fragment data-fragment-index="2" }

c

# Lists {.columns}

## {.top}
Decker supports both enumerated and ordered list using the following syntax: 

##  
  
##  
  
## Enumerated Lists {.left}

## Syntax 

```{.markdown}
- Take out trash
- Vacuum
    - Bedrooms
    - Living Room
- Wash Dishes
```

##  
  
##  
  
## Result 
- Take out trash
- Vacuum
    - Bedrooms
    - Living Room
- Wash Dishes

## Ordered Lists {.right}

## Syntax

```{.markdown} 
1.  bread
2.  milk
3.  sugar
4.  flour
```

##  
  
##  
  
## Result 

1. bread
2. milk
3. sugar
4. flour

<!-- # Fragmented Lists {.columns}

## {.top}

This list will sequentially reveal its items. Similar to a segment marked with *.fragment*, an item will be revealed on a left mouse button press.

## Syntax {.left}

```{.markdown}
> - Python
- JavaScript
- Java
- C#
- C++
```

## Result {.right}

- Python 
- Javascript
- Java
- C#
- C++ -->

# Sequential Lists {.columns}

## {.top}

Use the `(@)` symbol to automatically number list items. Numbered items do not need to be in a single list.

##  
  
##  
    
## Syntax {.small}

```{.markdown}
(@) This method of listing items has advantages for citing sources.
(@) It automatically numbers all items in order of appearance.
Additionally:
(@) It disregards line breaks and continues the list throughout the presentation.
```

##  
  
##  
   
## Result {.bottom}

(@) This method of listing items has advantages for citing sources.
(@) It automatically numbers all items in order of appearance.
Additionally:
(@) It disregards line breaks and continues the list throughout the presentation.

# Tables {.columns}

## {.top}

Decker uses the markdown syntax for creating [tables](https://www.markdownguide.org/extended-syntax/#tables).

## Syntax {.small}

```{.markdown}
Assignment List

|  Week | Topic                            | Reading    | Book    |
|  ---: | :----------------------------- : | :--------  | ------- |
|   1   | Course Introduction              | Chapt. 1   | Physics |
|   2   | Inertia, Equilibrium, Kinematics | Chapt. 2-3 | Physics |
|   3   | Vectors, Momentum, Energy        | Chapt. 4-8 | Physics |


```

##  
  
##  

## Result 

Assignment List

|  Week | Topic                            | Reading    | Book    |
|  ---: | :------------------------------: | :--------  | ------- |
|   1   | Course Introduction              | Chapt. 1   | Physics |
|   2   | Inertia, Equilibrium, Kinematics | Chapt. 2-3 | Physics |
|   3   | Vectors, Momentum, Energy        | Chapt. 4-8 | Physics |

# Block Quotes {.columns}

## {.top}

To quote a block of text, precede each line with a `>` character:

## Syntax {.left .small}

```{.markdown}
> This is a block quote.
>
> > A block quote within a block quote.
```

## Result {.right}

> This is a block quote.
>
> > A block quote within a block quote.


# Vertical Slides {.columns}

## {.top}

Add slides below the current slide by adding `{.sub}` to the slide's [level 1 header](#slide-format). Navigate to these slides using the `↓` key or by pressing the space-bar. The meta-data variable `vertical-slides` defaults to `true`.

##  
  
##  

## Syntax {.left .small}

```{.markdown}

# Slide 1

# Slide 2 {.sub}

```

## Result {.right}

![](/img/vertical.png)