Slidev Layouts

This skill covers all built-in Slidev layouts and teaches you how to use them effectively for different types of content. You'll also learn how to create custom layouts.

When to Use This Skill

Choosing the right layout for your content
Creating visually structured slides
Using multi-column layouts
Adding background images
Building custom layouts

Using Layouts

Specify a layout in the slide's frontmatter:

---
layout: center
---

# Centered Content

Built-in Layouts

default

The basic layout for general content.

---
layout: default
---

# Default Layout

Any content works here:
- Lists
- Code blocks
- Images
- Tables

center

Centers content both horizontally and vertically.

---
layout: center
---

# Big Statement

Perfect for impactful single messages

Best for: Quotes, key takeaways, section titles

cover

The opening slide with prominent title display.

---
layout: cover
background: /images/cover.jpg
---

# Presentation Title

Subtitle or author name

Options:

background: Image URL or color

Best for: First slide, section openers

intro

Introduction slide with author/presenter info.

---
layout: intro
---

# My Presentation

## A Journey Through Code

<div class="absolute bottom-10">
  <span class="font-700">
    John Doe
  </span>
  <br>
  <span class="text-sm opacity-50">
    Senior Developer @ TechCorp
  </span>
</div>

section

Marks the beginning of a new section.

---
layout: section
---

# Part 1

Getting Started

Best for: Dividing presentation into logical sections

statement

Emphasizes a single statement or quote.

---
layout: statement
---

# Code is poetry

Best for: Powerful quotes, key messages

quote

Displays a quotation with attribution.

---
layout: quote
---

# "Any fool can write code that a computer can understand. Good programmers write code that humans can understand."

Martin Fowler

fact

Highlights important facts or statistics.

---
layout: fact
---

# 100%

of developers love Slidev*

<small>*citation needed</small>

Best for: Statistics, numbers, key facts

two-cols

Two-column layout with left/right content.

---
layout: two-cols
---

# Left Column

- Point 1
- Point 2
- Point 3

::right::

# Right Column

```js
const code = 'here'


**Slot**: `::right::` separates columns

### two-cols-header

Two columns with a spanning header.

```markdown
---
layout: two-cols-header
---

# Comparison

::left::

## Option A

- Feature 1
- Feature 2

::right::

## Option B

- Feature X
- Feature Y

Slots: ::left:: and ::right::

image

Full-slide background image.

---
layout: image
image: /images/photo.jpg
backgroundSize: cover
---

Options:

image: Image path
backgroundSize: CSS background-size (cover, contain, etc.)

image-left

Image on left, content on right.

---
layout: image-left
image: /images/diagram.png
backgroundSize: contain
---

# Explanation

The diagram shows:
- Component A
- Component B
- Their relationship

image-right

Image on right, content on left.

---
layout: image-right
image: /images/screenshot.png
---

# Feature Overview

Our new feature includes:
- Fast performance
- Easy to use
- Beautiful design

iframe

Embeds a webpage.

---
layout: iframe
url: https://sli.dev
---

Options:

url: URL to embed

iframe-left / iframe-right

Iframe with content on the opposite side.

---
layout: iframe-right
url: https://example.com
---

# Live Demo

Check out the live example on the right

full

Uses the entire screen without padding.

---
layout: full
---

<div class="w-full h-full bg-gradient-to-r from-blue-500 to-purple-600">
  <h1 class="text-white text-center pt-40">Full Screen</h1>
</div>

none

No styling applied - complete blank slate.

---
layout: none
---

<div class="custom-everything">
  Completely custom content
</div>

end

Final slide of the presentation.

---
layout: end
---

# Thank You!

Questions?

Layout Quick Reference

Layout	Use Case
`default`	General content
`center`	Single focused message
`cover`	Opening slide
`intro`	Author introduction
`section`	Section divider
`statement`	Bold statement
`quote`	Quotations
`fact`	Statistics/numbers
`two-cols`	Side-by-side content
`two-cols-header`	Comparison with header
`image`	Full background image
`image-left`	Image + text
`image-right`	Text + image
`iframe`	Embedded webpage
`full`	Edge-to-edge content
`end`	Closing slide

Creating Custom Layouts

Basic Custom Layout

Create layouts/my-layout.vue:

<template>
  <div class="slidev-layout my-layout">
    <slot />
  </div>
</template>

<style scoped>
.my-layout {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
</style>

Layout with Named Slots

<!-- layouts/split-header.vue -->
<template>
  <div class="slidev-layout split-header">
    <header class="header">
      <slot name="header" />
    </header>
    <main class="content">
      <div class="left">
        <slot name="left" />
      </div>
      <div class="right">
        <slot name="right" />
      </div>
    </main>
  </div>
</template>

<style scoped>
.split-header {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}
.header {
  padding: 1rem 2rem;
  border-bottom: 1px solid #e5e7eb;
}
.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}
</style>

Usage:

---
layout: split-header
---

::header::
# Comparison Overview

::left::
## Before

Old approach details

::right::
## After

New approach details

Layout with Props

<!-- layouts/branded.vue -->
<script setup>
defineProps({
  logo: {
    type: String,
    default: '/logo.png'
  },
  color: {
    type: String,
    default: '#3b82f6'
  }
})
</script>

<template>
  <div class="slidev-layout branded">
    <img :src="logo" class="logo" />
    <div class="content" :style="{ borderColor: color }">
      <slot />
    </div>
  </div>
</template>

Usage:

---
layout: branded
logo: /company-logo.png
color: '#ef4444'
---

# Branded Content

Theme Layouts

Themes often provide additional layouts. For example, the seriph theme includes variations like:

default with refined typography
cover with elegant styling
Custom layouts specific to the theme

Check theme documentation for available layouts.

Best Practices

Match Layout to Content: Use center for emphasis, two-cols for comparisons
Consistent Section Markers: Use section layout consistently
Image Quality: Use high-resolution images for cover and image layouts
Test Responsiveness: Check how layouts appear at different sizes
Don't Overcrowd: Layouts work best with focused content

Common Layout Patterns

Presentation Structure

---
layout: cover
---
# Title

---
layout: intro
---
# About Me

---
layout: section
---
# Part 1

---
layout: default
---
# Content...

---
layout: section
---
# Part 2

---
layout: end
---
# Thank You

Feature Comparison

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

# React vs Vue

::left::
## React
- JSX syntax
- Large ecosystem
- Facebook backing

::right::
## Vue
- Template syntax
- Gentle learning curve
- Community driven

Output Format

When recommending layouts, provide:

SLIDE STRUCTURE:
1. [layout: cover] - Opening with title
2. [layout: intro] - Speaker introduction
3. [layout: section] - Topic 1 header
4. [layout: default/two-cols] - Content slides
5. [layout: section] - Topic 2 header
6. [layout: image-right] - Demo/screenshot
7. [layout: fact] - Key statistic
8. [layout: end] - Closing

LAYOUT RECOMMENDATION:
- For this content type, use [layout]
- Reason: [explanation]

EXAMPLE:
---
layout: [recommended]
[additional options if needed]
---

[Content structure]

slidev-layouts

Slidev Layouts

When to Use This Skill

Using Layouts

Built-in Layouts

default

center

cover

intro

section

statement

quote

fact

two-cols

image

image-left

image-right

iframe

iframe-left / iframe-right

full

none

end

Layout Quick Reference

Creating Custom Layouts

Basic Custom Layout

Layout with Named Slots

Layout with Props

Theme Layouts

Best Practices

Common Layout Patterns

Presentation Structure

Feature Comparison

Output Format