slidev-layouts

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

1. Match Layout to Content: Use center for emphasis, two-cols for comparisons
2. Consistent Section Markers: Use section layout consistently
3. Image Quality: Use high-resolution images for cover and image layouts
4. Test Responsiveness: Check how layouts appear at different sizes
5. 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]