Authoring

Layouts

Eight built-in arrangements, and how to add one of your own as a file of HTML.

Asking for one#

md---
layout: two-cols
---

Without a layout: key a slide is default. An unknown name is an error that lists the ones that exist, including any of your own.

The built-in eight#

Layout	For
`default`	anything
`cover`	a title slide — centred, larger, usually over a background
`center`	one thing, in the middle
`section`	a divider between parts of a talk
`quote`	a pull quote, with whatever follows as the attribution
`two-cols`	two columns, split at `::: right`
`image-left` / `image-right`	a picture on one side, bleeding to the frame
`full-image`	words over the slide's `background:` image, with a scrim

The example deck is every one of them, in order, if you would rather look than read.

Where the content sits#

A slide starts its content at the top. That is what keeps a heading in the same place from one slide to the next, so clicking through a deck does not move the title up and down the frame while the reader is trying to follow it.

The four layouts that are about being centred — cover, center, section and quote — still centre, and so does the text column beside a picture in image-left / image-right. Any other slide can ask:

yaml---
class: middle
---

Layouts of your own#

A project can name a directory of templates, and every <name>.html in it becomes a layout a slide can ask for:

tsexport default {
  layouts: './layouts',
} satisfies ProjectConfig

talks/
  layouts/
    card.html      ->  layout: card

A template fills in {{content}}, {{image}}, {{alt}}, and any region by name — {{right}} for what follows ::: right:

html<div class="slide-content card">
  <div class="card__panel">{{content}}</div>
</div>

The template supplies the inside of the slide; the <main> around it stays the tool's, so backgrounds, the aspect ratio and class: keep working whatever the template does.

A placeholder that is not something a slide has is an error listing what is available, rather than an empty space: a typo that silently renders nothing is a slide gone missing.

Styling one#

Style it from a stylesheet listed in css::

tsexport default {
  layouts: './layouts',
  css: './theme.css',
} satisfies ProjectConfig

css.card__panel {
  padding: 4cqw;
  border-radius: var(--slide-radius-panel);
  background: var(--slide-color-panel);
}

Two rules worth keeping:

Size in cqw, not pixels. Everything is measured against the slide's own size container, which is what lets a deck look identical on a laptop and a projector. A pixel value is the one thing that breaks that.
No inline style attribute. A template is raw HTML, and an inline style is the one thing a strict Content-Security-Policy blocks. See Deploying.

Custom layouts are a project feature, because they need somewhere to live — see Projects.