Slide Layout
A Guide to Creating Memorable Presentations
September 22, 2025
Samantha Monty
Chair for Human-Computer Interaction, University of Würzburg

Table of Contents

Slide Format

Decker uses markdown headings (level 1 to 3) to structure slides.

Syntax

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

Result

See next slide.

Title

Text after the title.

Paragraph

Text after the paragraph.

Block

Text after the block.

Multi-Columns

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

# 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

See next slide.

Multi-column Example

Top Column

This spans across the top of all columns.

Left Column

img/06-metal.png

Center Column

img/06-metal.png

right Column

img/06-metal.png

Bottom Column

This spans across the bottom of all columns.

Column Sizing

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

Syntax

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

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

Result

See next slide.

Column Sizing Example

Left Column

img/06-metal.png

Right column

img/06-metal.png

Split

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

# 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

See next slide.

Split Example

img/marc.jpg
Prof. Dr. Marc Erich Latoschik

img/jll.jpg
Dr. Jean-Luc Lugrin

Grid Layout

Use a grid layout in slides by adding {.grid} to the slide header, 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

# 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

See next slide.

Grid Layout Example

img/06-metal.png
top-left

img/06-metal.png
top

img/06-metal.png
top-right

img/06-metal.png
left

img/06-metal.png
center

img/06-metal.png
right

img/06-metal.png
bottom-left

img/06-metal.png
bottom

img/06-metal.png
bottom-right

Fragments

Reveal segments of slides sequentially with the {.fragment} parameter. In any level 1-3 header, 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

## 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.

Result

First Block

Text visible from the beginning.

Second Block

Text appears as you advance.

Third Block

Text appears as you advance.

Fourth Block

Text appears as you advance.

Fragment Index

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

Syntax

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

Will appear next

b

Will appear with the block above

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

Syntax

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

Result

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

Sequential Lists

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

Syntax

(@) 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

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

Tables

Decker uses the markdown syntax for creating tables.

Syntax

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

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

Syntax

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

Result

This is a block quote.

A block quote within a block quote.

Vertical Slides

Add slides below the current slide by adding {.sub} to the slide’s level 1 header. Navigate to these slides using the ↓ key or by pressing the space-bar. The meta-data variable vertical-slides defaults to true.

Syntax


# Slide 1

# Slide 2 {.sub}

Result

img/vertical.png