Content Layouts

These layouts arrange images, columns, and lists. Put local images in the presentation project's public/ directory and reference them as /image.png. Each code block below describes one slide.

two-cols - Two Columns

Use for: Comparing two groups or showing related material side by side

---
layout: two-cols
ratio: "2:3"
title: Two Columns Layout
---

## Left Column (2fr)

The left column takes two fifths of the available width.

- Point 1
- Point 2

::right::

## Right Column (3fr)

The right column takes three fifths of the available width.

Props:

• ratio: Column width ratio, e.g., "1:1", "2:3" (default: "1:1")
• gap: CSS gap between the two columns (default: 1rem)
• title, subtitle: Optional header content

What it shows:

• Left column content (before ::right::)
• Right column content (after ::right::)
• Configurable width ratio

---

image-left - Image on Left

Use for: Explaining visuals with text

---
layout: image-left
image: /image.png
ratio: "1:2"
title: Image Left Layout
---

## Content on Right (2fr)

- Equipment A
- Equipment B
- Equipment C

Add a short description of the setup.

Props:

• image: Image URL or path
• ratio: Image:content ratio (default: "1:1")
• fit: cover, contain, fill (default: cover)
• position: CSS image position (default: center)
• title, subtitle: Optional header content

What it shows:

• Full-height image on the left
• Your content on the right

---

image-right - Image on Right

Use for: Text with supporting visual

---
layout: image-right
image: /image.png
ratio: "3:2"
fit: contain
title: Image Right Layout
---

## Content on Left (3fr)

Summarize the main finding here.

- Finding 1
- Finding 2

Props:

• image: Image URL or path
• ratio: Content:image ratio (default: "1:1")
• fit: cover, contain, fill (default: cover)
• position: CSS image position (default: center)
• title, subtitle: Optional header content

What it shows:

• Your content on the left
• Full-height image on the right

---

bullets - Enhanced List

Use for: A clear list with custom markers

---
layout: bullets
title: Key Points
subtitle: Summary
icon: "→"
---

## Main Findings

- **Point 1:** Description
- **Point 2:** Description
- **Point 3:** Description

Props:

• title: Slide title
• subtitle: Optional subtitle
• icon: Custom bullet character (default: ▸)

Features:

• Custom bullet markers
• Numbered lists with circular badges
• Nested list support

---

figure - Academic Figure

Use for: A figure with a number and caption

---
layout: figure
image: /architecture.png
caption: Overview of our proposed system architecture.
label: "Figure 1:"
title: System Architecture
height: 60%
---

Additional description below the figure.

Use image instead of src in Slidev frontmatter. src is reserved by Slidev for external slide sources and can cause the figure slide to disappear from builds and exports.

Props:

• image: Image URL or path
• caption: Figure caption
• label: Label prefix (e.g., "Figure 1:")
• title: Slide title
• subtitle: Optional subtitle
• height: Maximum image height (default: 55vh)
• fit: contain or cover (default: contain)

---

split-image - Image Comparison

Use for: Comparing several captioned images side by side

---
layout: split-image
images:
  - /before.png
  - /after.png
captions:
  - Before optimization
  - After optimization
title: Visual Comparison
---

Props:

• images: Array of image URLs
• captions: Array of caption strings
• title, subtitle: Header content