slidev-theme-iodigital v1.0.0

slidev-theme-iodigital

An iO Digital theme for Slidev.

See a demo here.

Install

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.

Settings

Next to the available frontmatter customizations, this theme provides a few additional ones.

Transitions

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
---

Layouts

This theme provides the following layouts:

Default

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.

Usage

---
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.

CodePen

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.

Usage

---
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.

Cover

As the name suggests, this layout is the first slide of your slide deck. It announces the title/subject of the presentation.

Usage

---
layout: cover
image: /path/to/cover/image.jpg # Can be absolute or relative
---

Full

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.

Usage

---
layout: full
---

# My Amazing title

Some content

Iframe / Iframe-left / Iframe-right

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.

Usage

---
layout: iframe / iframe-left / iframe-right
url: https://www.youtube.com/embed/dQw4w9WgXcQ
---

Image

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.

Usage

---
layout: image
image: path/to/my/image.jpg
variant: default|box
---

# Image layout in the [variant] variant

Intro

Use a single slide per speaker to help introduce them.

Usage

---
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" />

Quote

Use a single slide per quote or statement

Usage

---
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

Section

With only a title - and optional subtitle - this layout indicates a new subject within your slide deck.

Read more about chapters and sections.

Usage

---
layout: section
level: 1|2|3
---

# My New Section
## Optional subtitle

Two-cols

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.

Usage

---
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

Components

This theme provides the following components:

SocialLink

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
• LinkedIn
• Twitter
• Github

Usage

<SocialLink handle="some-handle" network="io" />

ProfileCard

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).

Usage

<ProfileCard
  firstName="John"
  lastName="Doe"
  functionTitle="Front-end developer"
  email="john.doe@iodigital.com"
  telephone="06-12345678"
  image="https://picsum.photos/200/200"
  />

Facts

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.

Usage

<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.'
    }]"
/>

Icons

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.

Usage

<IconMdiAccount />
<icon-mdi-account />
<icon-mdi-account></icon-mdi-account>
<IconIoLogo />
<IconIoLogo></IconIoLogo>

Table of contents

This component can be used to create a table of contents based on the headings from every level 1 section slide.

Usage

---
layout: image-right (this can be any layout)
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
---
# Table of contents
<Toc />

Contributing

For more information about contributing to this project see the CONTRIBUTING.md.

• npm install
• npm run dev to start theme preview of example.md
• Edit the example.md and style to see the changes
• npm run export to generate the preview PDF
• npm run screenshot to generate the preview PNG