---
title: Sykehuspartner Slidev Theme
hide_title: true
sidebar_class_name: title-logo-sidebar-slidev
sidebar_label: "SP Slidev Theme"
sidebar_position: 0
---

import LogoSlidev from './logo-slidev.svg';

<div align="center">
  <div style={{ display: 'flex', justifyContent: 'center', margin: '1rem' }}>
    <LogoSlidev width="110" height="110"/>
  </div>
  <div align="center">
    # Sykehuspartner Slidev Theme
  </div>
  <div align="center">
    <p>
      *Create professional presentations using Sykehuspartner theme for Slidev!*
    </p>
    <h4>
      <a href="./sykehuspartner-theme/install">🔧 Setup</a> · 
      <a href="https://www.npmjs.com/package/@sp-days-framework/slidev-theme-sykehuspartner">📦 NPM Package</a> · 
      <a href="https://github.com/helse-sorost/sp-days-framework">💻 Source Code</a>
    </h4>
  </div>
</div>
---

## Features

- **18 Professional Layouts** - From cover slides to multi-column content, image layouts, and special-purpose slides
- **Consistent Branding** - Sykehuspartner colors, logos, and styling throughout
- **Dark Mode Support** - Automatic light/dark theme switching with optimized colors
- **Syntax Highlighting** - Support for 30+ programming languages powered by Shiki
- **VSCode Icons** - Built-in icon support for technical content with automatic scanning
- **Responsive Design** - Looks great on any screen size

:::tip Related Packages
Use with the **Slidev Integration** plugin to seamlessly embed your presentations in Docusaurus sites.
:::

## Getting Started

Configure the theme and start creating slides:

```markdown title="slidev/presentation.md"
---
theme: "@sp-days-framework/slidev-theme-sykehuspartner"
title: My Presentation
layout: cover
---

# My Presentation Title
## Subtitle Goes Here

---
layout: default
---

# First Content Slide

- Point 1
- Point 2
- Point 3
```

See [Install](./install.mdx) for installation and configuration.

## Available Layouts

The theme includes 18 specialized layouts for different presentation needs:

| Layout | Use Case | Category |
|--------|----------|----------|
| [cover](./section/cover.mdx) | Title slide with banner | Section |
| [intro](./section/intro.mdx) | Introduction with optional side image | Section |
| [section](./section/section.mdx) | Section divider with optional image | Section |
| [end](./section/end.mdx) | Closing slide with centered banner | Section |
| [default](./content/default.mdx) | Standard content with header extraction | Content |
| [center](./content/center.mdx) | Vertically centered content | Content |
| [full](./content/full.mdx) | Full-screen with no padding | Content |
| [two-cols](./multi-column/two-cols.mdx) | Two equal columns | Multi-Column |
| [two-cols-header](./multi-column/two-cols-header.mdx) | Two columns with header | Multi-Column |
| [three-cols](./multi-column/three-cols.mdx) | Three equal columns | Multi-Column |
| [three-cols-header](./multi-column/three-cols-header.mdx) | Three columns with header | Multi-Column |
| [image](./image/image.mdx) | Background or foreground image | Image |
| [image-left](./image/image-left.mdx) | Content with left-aligned image | Image |
| [image-right](./image/image-right.mdx) | Content with right-aligned image | Image |
| [fact](./special/fact.mdx) | Emphasize key facts | Special |
| [statement](./special/statement.mdx) | Bold statement slide | Special |
| [quote](./special/quote.mdx) | Quote with attribution | Special |
| [about-me](./special/about-me.mdx) | Profile introduction | Special |