Layouts

Built-in Layouts

As themes may override layouts behaviour, the best way to know exactly the usage, parameters and examples is referring their documentation.

center

Displays the content in the middle of the screen.

cover

Used to display the cover page for the presentation, may contain the presentation title, contextualization, etc.

default

The most basic layout, to display any kind of content.

end

The final page for the presentation.

fact

To show some fact or data with a lot of prominence on the screen.

full

Use all the space of the screen to display the content.

image-left

Shows an image on the left side of the screen, the content will be placed on the right side.

Usage

---
layout: image-left

# the image source
image: ./path/to/the/image

# a custom class name to the content
class: my-cool-content-on-the-right
---

image-right

Shows an image on the right side of the screen, the content will be placed on the left side.

Usage

---
layout: image-right

# the image source
image: ./path/to/the/image

# a custom class name to the content
class: my-cool-content-on-the-left
---

image

Shows an image as the main content of the page.

Usage

---
layout: image

# the image source
image: ./path/to/the/image
---

You can change the default background size (cover) by adding the backgroundSize attribute:

---
layout: image
image: ./path/to/the/image
backgroundSize: contain
---

---
layout: image-left
image: ./path/to/the/image
backgroundSize: 20em 70%
---

iframe-left

Shows a web page on the left side of the screen, the content will be placed on the right side.

Usage

---
layout: iframe-left

# the web page source
url: https://github.com/slidevjs/slidev

# a custom class name to the content
class: my-cool-content-on-the-right
---

iframe-right

Shows a web page on the right side of the screen, the content will be placed on the left side.

Usage

---
layout: iframe-right

# the web page source
url: https://github.com/slidevjs/slidev

# a custom class name to the content
class: my-cool-content-on-the-left
---

iframe

Shows a web page as the main content of the page.

Usage

---
layout: iframe

# the web page source
url: https://github.com/slidevjs/slidev
---

intro

To introduce the presentation, usually with the presentation title, a short description, the author, etc.

none

A layout without any existing styling.

quote

To display a quotation with prominence.

section

Used to mark the beginning of a new presentation section.

statement

Make an affirmation/statement as the main page content.

two-cols

Separates the page content in two columns.

Usage

---
layout: two-cols
---

# Left

This shows on the left

::right::

# Right

This shows on the right

two-cols-header

Separates the upper and lower lines of the page content, and the second line separates the left and right columns.

Usage

---
layout: two-cols-header
---

This spans both

::left::

# Left

This shows on the left

::right::

# Right

This shows on the right

Custom Layouts

Create a directory layouts/ under your project root, and simply put your custom Vue layout components under it.

Read more in the Customization section.

Theme-provided Layouts

Themes can provide layouts or override existing ones. Please read their documentation for what they have provided.