Slide type templates for MarpAgent (lab theme). Use when authoring or editing any slide.md — provides copy-paste patterns for title, content, and two-column types including agenda, three-column, and feature-grid variants.
Three formal layout types. Every slide uses exactly one.
When to use: opening slide. Do NOT use for summary or recap slides — use the content summary variant instead.
---
<!-- _paginate: skip -->
<!-- _class: title -->
<!-- _header: YYYY-MM-DD -->
# Presentation Title
<div class="author">
Subtitle or author info here
</div>
When to use: single-column slides — bullet lists, prose, code, diagrams, tables.
---
<!-- _header: Section Name -->
## Slide Heading
- Bullet point one
- Bullet point two
- Bullet point three
Uses .centered to vertically and horizontally center the list below the heading.
---
<!-- _header: Agenda -->
## Agenda
<div class="centered">
1. Section One
2. Section Two
3. Section Three
</div>
---
<!-- _header: Summary -->
## Summary
1. Key point one
2. Key point two
3. Key point three
When to use: final slide of a deck — summarizes key takeaways and optionally includes a call to action (recap, next steps, conclusions).
---
<!-- _paginate: skip -->
<!-- _header: Summary -->
## Key Takeaways
<div class="centered">
1. **First point** — brief description
2. **Second point** — brief description
3. **Third point** — brief description
</div>
With call to action (requires --bg-gray-5 in frontmatter — see marp-components skill):
---
<!-- _paginate: skip -->
<!-- _header: Summary -->
## Key Takeaways
1. **First point** — brief description
2. **Second point** — brief description
3. **Third point** — brief description
<div style="background: var(--bg-gray-5); padding: 0.4em 1em; margin-top: 1em;">
Next step or call to action here.
</div>
When to use: comparisons, figure + text, before/after, feature lists.
---
<!-- _header: Section Name -->
## Slide Heading
<div class="col">
<div>
**Left column heading**
- Left bullet one
- Left bullet two
</div>
<div>
**Right column heading**
- Right bullet one
- Right bullet two
</div>
</div>
To adjust column width ratios, add style="flex: N":
<div class="col">
<div style="flex: 1.3;">
Wider left column
</div>
<div>
Narrower right column
</div>
</div>
Declare --bg-gray-5 in frontmatter style: first (see marp-components skill).
---
<!-- _header: Section Name -->
<style scoped>
.gap-cols {
display: flex;
align-items: stretch;
gap: 0.8em;
}
.gap-cols > div {
flex: 1 1 0;
display: flex;
flex-direction: column;
}
.gap-cols ul,
.gap-cols ol {
font-size: var(--text-sm);
line-height: 1.35;
margin: 0.2em 0 0;
padding-left: 1.2em;
}
.gap-box {
background: var(--bg-gray-5);
padding: 0.3em 0.3em;
text-align: center;
font-weight: bold;
font-size: var(--text-sm);
}
.gap-cols > div > .gap-box {
margin-top: auto;
margin-top: 1em;
}
</style>
## Slide Heading
<div class="col gap-cols">
<div>
### Column One
- Bullet one
- Bullet two
<div class="gap-box">Summary for col 1</div>
</div>
<div>
### Column Two
- Bullet one
- Bullet two
<div class="gap-box">Summary for col 2</div>
</div>
<div>
### Column Three
- Bullet one
- Bullet two
<div class="gap-box">Summary for col 3</div>
</div>
</div>
2×N CSS grid of feature cards. Declare --bg-gray-5 in frontmatter style: first.
---
<!-- _header: Section Name -->
<style scoped>
.feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5em 0.5em;
margin-top: 0.2em;
font-size: var(--text-xs);
}
.feature-grid > div {
background: var(--bg-gray-5);
padding: 0.3em 0.5em;
}
.feature-grid strong {
font-size: var(--text-sm);
}
</style>
## Slide Heading
Short intro sentence.
<div class="feature-grid">
<div>
**Feature A**
- Detail one
- Detail two
</div>
<div>
**Feature B**
- Detail one
- Detail two
</div>
</div>
| Class / Element | Purpose |
|---|---|
.col | Flex row container for two-column layout |
.centered | Centers content vertically and horizontally |
.fit | Scale element to fit available space |
style="flex: N" | Override column width ratio inside .col |