# Slide 1

Content here

---

# Slide 2

More content

# Slide 1

---
layout: center
class: text-blue-500
---

# Centered Blue Slide

---
theme: seriph
title: My Presentation
info: |
  ## Presentation Description
  Multi-line info text
colorSchema: auto
highlighter: shiki
drawings:
  persist: false
transition: slide-left
mdc: true
---

---
layout: two-cols
class: my-custom-class
transition: fade
clicks: 3
disabled: false
hide: false
---

# My Slide

Visible content

<!--
These are speaker notes.
- Point to remember
- Another point

Supports **Markdown** formatting.
-->

---
mdc: true
---

This is [important text]{.text-red-500.font-bold}

This has a [tooltip]{title="Hover me!"}

::div{.flex.gap-4}
Content inside a flex container
::

::section{#my-section .bg-blue-100}
Section with ID and class
::

:Icon{name="carbon:arrow-right" size="24"}

::Alert{type="warning"}
Warning message here
::

- Item 1
- Item 2
  - Nested item
  - Another nested
- Item 3

1. First
2. Second
3. Third

<v-clicks>

- Appears first
- Appears second
- Appears third

</v-clicks>

<v-clicks depth="2">

- Parent 1
  - Child 1.1
  - Child 1.2
- Parent 2
  - Child 2.1

</v-clicks>

![Alt text](/images/photo.jpg)

![Alt text](/images/photo.jpg){width=400}

![Alt text](/images/photo.jpg){.rounded-lg.shadow-xl}

---
background: /images/cover.jpg
class: text-white
---

# Title Over Image

[Slidev Documentation](https://sli.dev)

[Go to slide 5](/5)
[Go to slide with ID](#my-slide)

<a href="https://sli.dev" target="_blank">Open in new tab</a>

| Feature | Supported |
|---------|-----------|
| Markdown | ✅ |
| Vue Components | ✅ |
| Animations | ✅ |
| Export | ✅ |

> This is a quote
> spanning multiple lines

> [!NOTE]
> GitHub-style callout

Content above

---

Content below (this also creates a new slide!)

Content above

<hr>

Content below (same slide)

This is <span class="text-red-500">red text</span> inline.

<div class="grid grid-cols-2 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Here's how to write a code block:

```js
const x = 1
```

\---
This is not frontmatter
\---

---
layout: two-cols
---

# Left side content

::right::

# Right side content

---
layout: my-custom-layout
---

::header::
Header content

::default::
Main content

::footer::
Footer content

<template>
  <div class="absolute top-0 left-0 p-4">
    <img src="/logo.png" class="h-8" />
  </div>
</template>

<template>
  <div class="absolute bottom-0 right-0 p-4 text-sm">
    © 2025 My Company
  </div>
</template>

# Styled Slide

<style>
h1 {
  color: #2563eb;
  font-size: 3em;
}
</style>

🚀 Rocket launch!
👋 Hello world!

<carbon-arrow-right class="inline" />
<mdi-github class="text-2xl" />

# Slide 1
---
# Slide 2

# Slide 1

---

# Slide 2

---
theme:default
---

---
theme: default
---

<!--
Notes first
-->
# Heading

# Heading

Content

<!--
Notes at the end
-->

---
[FRONTMATTER: theme, layout, class, etc.]
---

# [SLIDE TITLE]

[MAIN CONTENT]
- Use Markdown formatting
- Include code blocks where relevant
- Add images with proper paths

[OPTIONAL: Vue components or HTML]

<!--
[SPEAKER NOTES]
- Key points to mention
- Timing notes
-->