Slide layouts

On this page you can find the list of built-in slide layouts available in Demo Time. These layouts can be used to structure your slides effectively.

By default, the slide uses the default layout, but you can change it per slide by providing the layout name in the front matter section of the slide:

---
layout: intro
---

# Welcome to Demo Time!

Default

The default layout is a standard slide layout that can be used for most slides.

---
layout: default
---

Intro

The intro layout is ideal for opening slides. It provides a large title area and a smaller content area.

---
layout: intro
---

Section

The section layout is used to separate slides into sections. It provides a large title area and a smaller content area.

---
layout: section
---

Quote

The quote layout is perfect for displaying key takeaways or citations. It provides a large quote area and a smaller content area.

---
layout: quote
---

Image

The image layout is used to display an image on the slide. It provides a large image area and a smaller content area.

---
layout: image
image: "<url to the image>"
---

Image left

The image-left layout is similar to the image layout but with the image on the left side, and the content on the right side.

---
layout: image-left
image: "<url to the image>"
---

Image right

The image-right layout is similar to the image layout but with the image on the right side, and the content on the left side.

---
layout: image-right
image: "<url to the image>"
---

Two columns

The two-columns layout is used to display content in two columns. It provides two equal-sized content areas. Use the ::right:: separator to split the content into two columns.

---
layout: two-columns
---

<!-- Content on the left -->

::right::

<!-- Content on the right -->

Custom layout

You can also create your own custom layout by creating an HTML template that uses Handlebars as the templating engine. Define the relative path to the template in the customLayout property in the front matter section of the slide.

All slide properties will be passed to the template, and you can use them in your custom layout by using the following syntax:

{{metadata.<property>}}

For the slide content, you can use the {{{content}}} property to render the content of the slide.

Custom layout example

custom-layout.html

<div>
  {{#if metadata.title}}<h1>{{metadata.title}}</h1>{{/if}}
  <div class="content">
    {{{content}}}
  </div>
</div>

Using a custom layout

To use a custom layout, you can specify the path to the layout file in the front matter section of the slide:

slide-with-custom-layout.md

---
customLayout: "custom-layout.html"
title: My custom layout
---

# This is my custom layout

Outcome of the custom layout

<div>
  <h1>My custom layout</h1>
  <div class="content">
    <h1>This is my custom layout</h1>
  </div>
</div>