Layouts

A layout decides how a slide's content is placed. Pick one in the slide's frontmatter:

---
layout: image-right
image: /photo.png
---

# A title

Text next to the picture.

slide.ng has all the layouts of Slidev, with the same names and props, plus 404 and error. The first slide is cover and every other slide is default unless you say otherwise. An unknown name prints a warning that lists the real names and uses default.

The Layouts reference lists every layout with its props and a picture. A theme can add layouts or replace a built-in one, see Themes and addons.

Props

Some layouts read extra frontmatter keys. For example image and backgroundSize for the image layouts, url and scale for the iframe layouts, background for cover.

---
layout: iframe-left
url: https://angular.dev
scale: 0.8
class: p-8
---

# Next to a web page

For layouts with a class prop (image-left, image-right, iframe-left, iframe-right, two-cols, two-cols-header), the class goes to the content area. For the others it goes on the layout itself.

Slots

two-cols and two-cols-header have named slots. A line with only ::right:: starts the right column:

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

This is the header

::left::

# Left

::right::

# Right

::bottom::

A row under both columns.

::default:: goes back to the default part, so parts can be written in any order. If the layout has no slot with that name, a warning is printed and the text stays where it was.

Your own layout

A layout is a standalone Angular component in a layouts/ folder next to slides.md. See Layouts and components.