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

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/kolibry-js/kolibry

# 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/kolibry-js/kolibry

# 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/kolibry-js/kolibry
---

intro #

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

none #

A layout without any existent styling.

quote #

To display a quotation with prominience.

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.