An iO Digital theme for Slidev.
See a demo here.
Add the following frontmatter to your slides.md. Start Slidev then it will prompt you to install the theme automatically.
---
theme: iodigital
---
Learn more about how to use a theme.
Next to the available frontmatter customizations, this theme provides a few additional ones.
| Name | Type | Default | Use | Description |
|---|---|---|---|---|
| footer | boolean |
true |
First Slide | Display the footer on each slide (except for layouts cover, intro & end) |
The default transition behavior is handled based on the sections. Overriding the default is possible by adding the transition property to the frontmatter.
---
transition: slide-up
---
This theme provides the following layouts:
This layout will probably be most used for content slides. You can put anything in for content. Whether it be text, an image, a list, an iframe. Just make sure it fits the slide.
---
layout: default # optional
---
# Slide title first
## Optional subtitle
Amazing content which can be anything, as long as it fits the slide. Just be aware that the subtitle will be show above the title. Both are on the left side.
Since we have CodePen Pro accounts at iO, we expect this to be used frequently in presentations. Just provide the CodePen embed URL and an optional slide title.
---
layout: codepen
pen: [CodePen embed URL]
---
# Optional Title
Provide the default content when you click the `embed` button in your pen. A Slidev slide needs at least one character as content to recognize it as a slide.
As the name suggests, this layout is the first slide of your slide deck. It announces the title/subject of the presentation.
---
layout: cover
image: /path/to/cover/image.jpg # Can be absolute or relative
---
A full size layout. Title on top. Content can be anything you want. If you want to separate your content into columns, have floating images or a large video player, you can do so in your markdown. Just use HTML to create your own layout.
---
layout: full
---
# My Amazing title
Some content
This is the default sli.dev way to display an Iframe inside a slide. Make sure that you use the embed URL if it is provided.
---
layout: iframe / iframe-left / iframe-right
url: https://www.youtube.com/embed/dQw4w9WgXcQ
---
A large image as background with only a title. The title is either displayed as an overlay on the image or in a black box.
---
layout: image
image: path/to/my/image.jpg
variant: default|box
---
# Image layout in the [variant] variant
Use a single slide per speaker to help introduce them.
---
layout: intro
image: /path/to/speaker/image.png
imageSide: left|right
---
# Speaker name
Speaker Description
::social::
<SocialLink network="io" handle="speaker-handle" />
<SocialLink network="linkedin" handle="SpeakerHandle" />
Use a single slide per quote or statement
---
layout: quote
author: Walter Landor
source: 16-04-1992
cite: https://en.wikipedia.org/wiki/Brand
---
Products are made in a factory but brands are created in the mind
With only a title - and optional subtitle - this layout indicates a new subject within your slide deck.
Read more about chapters and sections.
---
layout: section
level: 1|2|3
---
# My New Section
## Optional subtitle
As the name suggest, this layout divides the page in two columns (left / right). By default the content is placed in the left column and with the ::right:: slot you're able to place content in the right column.
---
layout: two-cols
division: 70/30
---
# Left side title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec nunc orci. Donec sit amet tincidunt ipsum. Maecenas tristique ornare nisi a ullamcorper.
::right::
# Right side title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- First item
- Second item
- Third item
This theme provides the following components:
Mainly used in (but not limited to) the layout layout. It creates an anchor to a known social network. Only provide the name of the network and the speaker's handle. Currently, the following networks are supported:
- iO Techhub
- Github
<SocialLink handle="some-handle" network="io" />
This component can be used to create a profile card displaying the firstName and lastName and optionally the functionTitle, email, telephone and profile picture (image).
<ProfileCard
firstName="John"
lastName="Doe"
functionTitle="Front-end developer"
email="john.doe@iodigital.com"
telephone="06-12345678"
image="https://picsum.photos/200/200"
/>
This component can be used to display facts. It accepts an array of facts [{ fact: '30%', description: 'Fact description' }] and optionally a direction row | column with a default of row.
<Facts
:facts="[{
stat: '30%',
description: 'Short description - maximum three lines'
}, {
stat: '130%',
description: 'Short description - maximum three lines'
}, {
stat: '10.000',
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla mollitia ad, laborum ipsum odit asperiores quo optio perspiciatis sequi quasi voluptate natus aperiam molestias ullam perferendis esse doloremque unde consequuntur.'
}]"
/>
This theme supports Material Design Icons (MDI) out of the box. Custom icons are also available (e.g. io logo). Each icon has its own (self-closing) element and can be written in both CamelCase and kebab-case.
<IconMdiAccount />
<icon-mdi-account />
<icon-mdi-account></icon-mdi-account>
<IconIoLogo />
<IconIoLogo></IconIoLogo>
This component can be used to create a table of contents based on the headings from every level 1 section slide.
---
layout: image-right (this can be any layout)
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
---
# Table of contents
<Toc />
For more information about contributing to this project see the CONTRIBUTING.md.
npm installnpm run devto start theme preview ofexample.md- Edit the
example.mdand style to see the changes npm run exportto generate the preview PDFnpm run screenshotto generate the preview PNG