Column Layout
On decker slides
September 22, 2025
Henrik
Chair for Human-Computer Interaction, University of Würzburg

Grid Column Slides

Column 1

Some Text

::: cell {style=“font-weight: bold;” align=“center”} This is Madness!

::: cell {style=“background-color:red;”} C1A

::: cell {style=“background-color:green;”} C1B

::: :::

::: cell {align=“right”} Column 3

Some Text :::

:::

Honey, I shrunk the divs!

Grid Column Slides

Column 1

Some Text

This is Madness!

C1A

C1B

Column 3

Some Text

Honey, I shrunk the divs!

Slide Masters

Fixed Layouts

  • Just like PowerPoint and Keynote (This is the full-width top row)

Syntax

  • Class and key-value attributes
  • Assign content to layout area
  • On elements Header 2, Image, Code Block, DIV

Example

include/06-metal.png

Slide Masters

Fixed Layouts

  • Just like PowerPoint and Keynote (This is the full-width top row)

Syntax

  • Class and key-value attributes
  • Assign content to layout area
  • On elements Header 2, Image, Code Block, DIV

Example

include/06-metal.png

Slide Masters

Syntax

  • Class and key-value attributes
  • Assign content to layout area
  • On elements Header 2, Image, Code Block, DIV

Second box

  • In this extra wide column that reaches the left image border

Another image with a very long title

include/06-metal.png

Fixed Layouts

  • Just like PowerPoint and Keynote (This is full width again)

Slide Masters

Image Mania

  • Even in three columns

Example

include/06-metal.png

Example

include/06-metal.png

Example

include/06-metal.png

Slide Masters

Box Mania

  • Even in three columns

Example

include/06-metal.png

Example

include/06-metal.png

Some more Text after the picture.

And some more still after the box.

Example

include/06-metal.png
Captions are really nice!

More tex after the figure

Slide Masters

Example

include/06-metal.png

Example

include/06-metal.png

Example

include/06-metal.png

Example

include/06-metal.png

Example

include/06-metal.png

Example

include/06-metal.png

Slide Masters

Box Mania

  • Also in two columns

Example

include/06-metal.png

Some more Text

Example

include/06-metal.png

Some more Text

Slide Masters

include/06-metal.png

include/06-metal.png

include/06-metal.png

include/06-metal.png

include/06-metal.png

include/06-metal.png

include/06-metal.png

include/06-metal.png

include/06-metal.png

Mario Style Columns

Left column

This is the left column

include/06-metal.png

Right column

This is the right column

include/06-metal.png