Skip to content

Latest commit

 

History

History
244 lines (168 loc) · 4.58 KB

slides.md

File metadata and controls

244 lines (168 loc) · 4.58 KB
Raw
theme permalink author twitter info dates colorSchema
./
MdiFaceMan
foo_bar
Here is the slides content description for SEO
name logo datetime
Event Name
event.svg
2030-01-10 15:00:00 +0200
dark

Here is the Intro tagline

Here Is The Complete Title

links:

This is the default layout

It can has a regular <p> content.

  • As well as lists
  • With multiple items
  • 🧩 Some with regular emojis
  • Others with inlined icons

links prop enable the linkrolls in the footer 👇

logo: ./img/logo.svg

The default layout can also contains

  1. Items appearing on click
  2. Or at the next step
  3. For an impressive effect 🤯

Note: If you add a logo prop in layout config with a filepath, then a logo is automatically embedded in the slide.

In any layout, you can add

any kind of content, that can be in italic form, in a bold version, can be strikethrough parts, or ==marked for highlighting==.

You can also have codeblocks:

interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUser(id: number, update: Partial<User>) {
  const user = getUser(id)
  const newUser = {...user, ...update}
  saveUser(id, newUser)
}

layout: section background: ./img/133200.jpg

Use a section to split content

layout: media url: https://source.unsplash.com/collection/94734566/1920x1080

Layout: media helps you to embed content

The content is centered by default (next slide is variant: full)

layout: media variant: full url: https://source.unsplash.com/collection/94734566/1920x1080 links:

layout: media url: https://source.unsplash.com/collection/94734566/1920x1080 variant: left

You can have content with lefty media

Then you have you content on the right side

with code blocks content

Or more regular content

  • like
  • list
  • of items

layout: media url: https://source.unsplash.com/collection/94734566/1920x1080 variant: right ratio: 2/3

You content can also be righty

And you can also specify a ratio for your content

The layout's props are:

layout: media
url: # local path | url | <Gif /> co  mponent
variant?: right # full | left | right
ratio?: 2/3 # cols ratio,
  # defaults: `1/2` for `left|right` variants

layout: media url: variant: left overlay: true

You can enable an Overlay

With the variant: left|right, add an overlay: true layout prop, so the media is duplicated as an overlay on the content.

Oh, and you can pass a <Gif /> component as url as well 💥

layout: quote cite: Tim Berners-Lee url: https://amazingworkz.com/wp-content/uploads/2019/12/00_13-930x620.jpg

The goal of the Web is to serve humanity. We build it now so that those who come to it later will be able to create things that we cannot ourselves imagine.

You can add quote blocks everywhere, but the quote layout with a proper cite prop enables a view with a portrait.

Built-in support for cols

All layouts come with a build in support for up to 3 cols.

::col2::

Simply prefix content with the marker ::col2:: to start the second one.

Do the same

::col2::

Just start a new col

::col3::

With the ::col3:: prefix. You can also use a ::header:: section to put a top-section.

::header::

For a 3 cols view

class: center

The center layout prop class center the content horizontally

class: text-6xl

Important content can be emphasized using the regular tailwind text- classes.

You can also rely on built-in Slidev components, like tweets:

Or YouTube embeded videos:

layout: qa

layout: thanks