slidev-theme-anova

An Anova theme for Slidev.

You can see a live example here.

Using this theme

Install Manually

If you still prefer to install Slidev manually or would like to integrate it into your existing projects, you can do:

$ npm install @slidev/cli @slidev/theme-default

$ touch slides.md

$ npx slidev

Please note if you are using pnpm, you will need to enable shamefully-hoist option for Slidev to work properly:

echo 'shamefully-hoist=true' >> .npmrc

Install Globally

Available since slidev v0.14

You can install Slidev globally with the following command

$ npm i -g @slidev/cli

And then use slidev everywhere without creating a project every time.

$ slidev

This command will also try to use local @slidev/cli if it has been found in the node_modules.

Install this theme

Add the following frontmatter to your slides.md. Start Slidev then it will prompt you to install the theme automatically.

(It's published on NPM here).

Simply add:

to your slides.md frontmatter.

Learn more about how to use a theme.

About

This theme is inspired by the @slidev/theme-apple Basic Black/White theme on the Apple Keynote application.

We've made use of Work Sans, the Anova branding font, and added some styling utilities to conform to the Anova brand guidelines.

Layouts

This theme provides the following layouts:

Title

Usage:

---
layout: title-right
---

# Presentation title

Presentation subtitle

::author::
Your Name here

::date::
2022.05.13

::logo::
<img src="/anova.svg" height="92" />

Title & Photo

Usage:

---
layout: intro-image
image: 'image-url'
---

<div class="absolute top-10">
  <span class="font-700">
    Author and Date
  </span>
</div>

<div class="absolute bottom-10">
  <h1>Presentation title</h1>
  <p>Presentation subtitle</p>
</div>

Title & Photo right

Usage:

---
layout: intro-image-right
image: 'image-url'
---

# Slide Title
## Slide Subtitle

Title, Bullets & Image

Usage:

---
layout: image-right
image: 'image-url'
---

# Slide Title
## Slide Subtitle

* Slide bullet text

Title & Bullets

Layout used by default

Bullets

Usage:

---
layout: bullets
---

* Slide bullet text

Section

Usage:

---
layout: section
---

# Section Title

Statement

Usage:

---
layout: statement
---

# Statement

Big fact

Usage:

---
layout: fact
---

# 100%
Fact information

Quote

Usage:

---
layout: quote
---

# "Notable quote"
Attribution

Photo - 3

Usage:

---
layout: 3-images
imageLeft: 'image-url'
imageTopRight: 'image-url'
imageBottomRight: 'image-url'
---

Photo

Usage:

---
layout: image
image: 'image-url'
---