Setting the file. One moment.
Subchapter 7.24
references/core-layouts.mdMarkdown3 KBView on GitHub
Standard slide layout.
---
layout: default
---Content centered horizontally and vertically.
---
layout: center
---Title/cover slide with centered content.
---
layout: cover
---End slide.
---
layout: end
---Full-screen content, no padding.
---
layout: full
---No layout styling.
---
layout: none
---Introduction slide.
---
layout: intro
---Large quotation display.
---
layout: quote
---Section divider.
---
layout: section
---Statement/affirmation display.
---
layout: statement
---Fact/data display.
---
layout: fact
---Two columns side by side:
---
layout: two-cols
---
# Left Column
Left content
::right::
# Right Column
Right contentHeader with two columns below:
---
layout: two-cols-header
---
# Header
::left::
Left content
::right::
Right contentFull-screen image:
---
layout: image
image: /photo.jpg
backgroundSize: cover
---Image on left, content on right:
---
layout: image-left
image: /photo.jpg
class: my-class
---
# Content on RightImage on right, content on left:
---
layout: image-right
image: /photo.jpg
---
# Content on LeftProps: image, class, backgroundSize
Full-screen iframe:
---
layout: iframe
url: https://example.com
---Iframe on left, content on right:
---
layout: iframe-left
url: https://example.com
---
# ContentIframe on right, content on left:
---
layout: iframe-right
url: https://example.com
---
# Content./layouts/)Later sources override earlier ones.
Create layouts/my-layout.vue:
<template>
<div class="slidev-layout my-layout">
<slot />
</div>
</template>
<style scoped>
.my-layout {
display: flex;
align-items: center;
justify-content: center;
}
</style>With named slots:
<template>
<div class="slidev-layout two-areas">
<div class="top">
<slot name="top" />
</div>
<div class="bottom">
<slot />
</div>
</div>
</template>Usage:
---
layout: two-areas
---
::top::
Top content
::default::
Bottom content