# Slidev Theme Sykehuspartner

A professional Slidev theme for creating presentations with a consistent Sykehuspartner brand identity.

## Features

- 18 customizable layouts for various presentation needs
- Built-in syntax highlighting for 30+ programming languages
- VSCode icon support with automatic scanning
- Dark mode support across all layouts
- Responsive design with configurable alignment and spacing

## Installation

```bash
npm install @sp-days-framework/slidev-theme-sykehuspartner
```

## Quick Start

```md
---
theme: "@sp-days-framework/slidev-theme-sykehuspartner"
layout: cover
---
# Your Presentation Title

## Subtitle
```

- Add the theme to your slide deck's frontmatter
- Choose from 18 available layouts
- Customize with layout-specific parameters

## Usage

### Global Features

**Syntax Highlighting**: The theme includes syntax highlighting for 30+ programming languages including C#, Python, JavaScript, TypeScript, Docker, Terraform, SQL, and more.

**Icon Support**: Use VSCode icons in your slides with the `~i-vscode-icons:icon-name~` syntax. The theme automatically scans your markdown files and includes the icons you use.

**Dark Mode**: All layouts support automatic dark/light mode switching.

### Available Layouts

The theme provides 18 specialized layouts for different presentation needs:

- **[about-me](#about-me)** - Profile introduction slide with optional image
- **[center](#center)** - Centered content with logo
- **[cover](#cover)** - Title slide with banner
- **[default](#default)** - Standard content slide with header extraction
- **[end](#end)** - Closing slide with centered banner
- **[fact](#fact)** - Emphasis slide for key facts
- **[full](#full)** - Full-screen content without padding
- **[image](#image)** - Background or foreground image slide
- **[image-left](#image-left)** - Content with left-aligned image
- **[image-right](#image-right)** - Content with right-aligned image
- **[intro](#intro)** - Introduction slide with optional side image
- **[quote](#quote)** - Quote display with attribution
- **[section](#section)** - Section divider with optional image
- **[statement](#statement)** - Bold statement slide
- **[three-cols](#three-cols)** - Three-column layout
- **[three-cols-header](#three-cols-header)** - Three columns with header
- **[two-cols](#two-cols)** - Two-column layout
- **[two-cols-header](#two-cols-header)** - Two columns with header

### Layout Parameters

Each layout supports specific configuration options through frontmatter parameters. Common parameters include:

- `logo` - Controls logo visibility (varies by layout)
- `textAlignment` - Content alignment: `'top'`, `'center'`, or `'bottom'`
- `imageSrc` - Path to image files
- `imageScale` - Image size adjustments
- `imagePosition` - Image positioning options

See individual layout documentation below for detailed parameter options.

---

## Layout Reference

## about-me

Profile introduction slide with image, contact information, and optional logo.

**When to use**: Introduce a speaker or team member with professional details and contact information.

### Parameters

| Parameter       | Type      | Default       | Description                              |
| --------------- | --------- | ------------- | ---------------------------------------- |
| `imageSrc`      | `string`  | -             | Path to profile image                    |
| `imageShape`    | `string`  | `'rectangle'` | Image shape: `'rectangle'` or `'circle'` |
| `imageSize`     | `string`  | `'100%'`      | Image size as percentage or decimal      |
| `imagePosition` | `string`  | `'left'`      | Image position: `'left'` or `'right'`    |
| `name`          | `string`  | -             | Person's name                            |
| `jobTitle`      | `string`  | -             | Job title                                |
| `department`    | `string`  | -             | Department name                          |
| `description`   | `string`  | -             | Brief description or bio                 |
| `email`         | `string`  | -             | Email address                            |
| `linkedin`      | `string`  | -             | LinkedIn profile URL or handle           |
| `logo`          | `boolean` | `true`        | Show logo banner                         |

### Example

```md
---
layout: about-me
imageSrc: ./profile.jpg
imageShape: circle
imagePosition: left
name: John Doe
jobTitle: Senior Developer
department: IT Department
email: john.doe@example.com
linkedin: johndoe
---
```

---

## center

Centered content with optional logo.

**When to use**: Display content that benefits from centered alignment, such as key messages or simple statements.

### Parameters

| Parameter | Type      | Default | Description                   |
| --------- | --------- | ------- | ----------------------------- |
| `logo`    | `boolean` | `true`  | Show logo in top-right corner |

### Example

```md
---
layout: center
---
# Centered Title

Centered content goes here.
```

---

## cover

Title slide with centered content and bottom banner.

**When to use**: Opening slide for your presentation with main title and subtitle.

### Parameters

| Parameter | Type      | Default | Description           |
| --------- | --------- | ------- | --------------------- |
| `logo`    | `boolean` | `true`  | Show banner at bottom |

### Example

```md
---
layout: cover
---
# Presentation Title

## Subtitle
```

---

## default

Standard content layout that automatically extracts the first heading to a header area.

**When to use**: General-purpose content slides with a title and body content.

### Parameters

| Parameter       | Type      | Default    | Description                                           |
| --------------- | --------- | ---------- | ----------------------------------------------------- |
| `logo`          | `boolean` | `true`     | Show logo in top-right corner                         |
| `textAlignment` | `string`  | `'center'` | Content alignment: `'top'`, `'center'`, or `'bottom'` |

### Example

```md
---
layout: default
textAlignment: top
---
# Slide Title

Content will appear below the title.
```

---

## end

Closing slide with centered banner and content.

**When to use**: Final slide of your presentation with closing message or call-to-action.

### Parameters

| Parameter | Type      | Default | Description                  |
| --------- | --------- | ------- | ---------------------------- |
| `logo`    | `boolean` | `true`  | Show banner at bottom center |

### Example

```md
---
layout: end
---
# Thank You

Questions?
```

---

## fact

Vertically centered content for emphasizing key facts.

**When to use**: Highlight important statistics, metrics, or key takeaways.

### Parameters

| Parameter | Type      | Default | Description                   |
| --------- | --------- | ------- | ----------------------------- |
| `logo`    | `boolean` | `true`  | Show logo in top-right corner |

### Example

```md
---
layout: fact
---
# 95%

User satisfaction rating
```

---

## full

Full-screen layout with no padding, logo optional.

**When to use**: Custom full-screen content like diagrams, videos, or interactive elements.

### Parameters

| Parameter | Type      | Default | Description                   |
| --------- | --------- | ------- | ----------------------------- |
| `logo`    | `boolean` | `false` | Show logo in top-right corner |

### Example

```md
---
layout: full
---

<div style="height: 100%; background: gradient">
  Custom full-screen content
</div>
```

---

## image

Display an image as background or foreground with optional content overlay.

**When to use**: Showcase images with or without overlaid text content.

### Parameters

| Parameter             | Type      | Default    | Description                                                           |
| --------------------- | --------- | ---------- | --------------------------------------------------------------------- |
| `imageSrc`            | `string`  | -          | Path to image                                                         |
| `imageScale`          | `string`  | `'70%'`    | Image scale (foreground mode)                                         |
| `imageAlign`          | `string`  | `'center'` | Image alignment: `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'` |
| `imageBackgroundMode` | `boolean` | `true`     | If `true`, image is background; if `false`, image is foreground       |
| `logo`                | `boolean` | `false`    | Show logo in top-right corner                                         |

### Example

```md
---
layout: image
imageSrc: ./background.jpg
imageBackgroundMode: true
---
# Title on Image
```

---

## image-left

Split layout with image on the left, content on the right.

**When to use**: Present visual content alongside explanatory text, with emphasis on the image.

### Parameters

| Parameter       | Type      | Default    | Description                                               |
| --------------- | --------- | ---------- | --------------------------------------------------------- |
| `imageSrc`      | `string`  | -          | Path to image                                             |
| `imageScale`    | `string`  | `'100%'`   | Image scale percentage                                    |
| `imageAlign`    | `string`  | `'center'` | Image vertical alignment: `'top'`, `'center'`, `'bottom'` |
| `imageRatio`    | `string`  | `'50%'`    | Width ratio for image (remaining goes to content)         |
| `logo`          | `boolean` | `true`     | Show logo in top-right corner                             |
| `textAlignment` | `string`  | `'center'` | Content alignment: `'top'`, `'center'`, or `'bottom'`     |

### Example

```md
---
layout: image-left
imageSrc: ./diagram.png
imageRatio: 40%
textAlignment: center
---
# Title

Content appears on the right side.
```

---

## image-right

Split layout with content on the left, image on the right.

**When to use**: Present visual content alongside explanatory text, with emphasis on the text.

### Parameters

| Parameter       | Type      | Default    | Description                                               |
| --------------- | --------- | ---------- | --------------------------------------------------------- |
| `imageSrc`      | `string`  | -          | Path to image                                             |
| `imageScale`    | `string`  | `'100%'`   | Image scale percentage                                    |
| `imageAlign`    | `string`  | `'center'` | Image vertical alignment: `'top'`, `'center'`, `'bottom'` |
| `imageRatio`    | `string`  | `'50%'`    | Width ratio for image (remaining goes to content)         |
| `logo`          | `boolean` | `false`    | Show logo in bottom-left corner                           |
| `textAlignment` | `string`  | `'center'` | Content alignment: `'top'`, `'center'`, or `'bottom'`     |

### Example

```md
---
layout: image-right
imageSrc: ./chart.png
imageRatio: 45%
---
# Analysis

Content appears on the left side.
```

---

## intro

Introduction slide with optional side image and banner.

**When to use**: Start a new section or introduce a topic with supporting imagery.

### Parameters

| Parameter       | Type      | Default   | Description                             |
| --------------- | --------- | --------- | --------------------------------------- |
| `bannerEnabled` | `boolean` | `true`    | Show banner logo                        |
| `imageSrc`      | `string`  | -         | Path to side image                      |
| `imageSize`     | `string`  | `'100%'`  | Image size as percentage                |
| `imagePosition` | `string`  | `'right'` | Image position: `'left'` or `'right'`   |
| `imageRatio`    | `string`  | `'33%'`   | Width ratio for image                   |
| `enableLogo`    | `boolean` | `true`    | Show banner (alias for `bannerEnabled`) |

### Example

```md
---
layout: intro
imageSrc: ./intro-graphic.png
imagePosition: right
imageRatio: 40%
---
# Welcome

Introduction to the presentation.
```

---

## quote

Display a quote with attribution.

**When to use**: Feature an impactful quote or testimonial.

### Parameters

| Parameter | Type      | Default | Description                   |
| --------- | --------- | ------- | ----------------------------- |
| `logo`    | `boolean` | `false` | Show logo in top-right corner |

### Example

```md
---
layout: quote
---
# "The best way to predict the future is to create it."

## Alan Kay
### Computer Scientist
```

---

## section

Section divider with centered text and optional side image.

**When to use**: Mark transitions between major sections of your presentation.

### Parameters

| Parameter   | Type      | Default | Description                          |
| ----------- | --------- | ------- | ------------------------------------ |
| `logo`      | `boolean` | `true`  | Show logo in top-right corner        |
| `image`     | `string`  | -       | Path to side image (via frontmatter) |
| `titleLine` | `boolean` | `true`  | Show decorative line under title     |

### Example

```md
---
layout: section
image: ./section-image.png
titleLine: true
---
# Section Title

## Section subtitle
```

---

## statement

Bold, centered statement for emphasis.

**When to use**: Emphasize a key message, mission statement, or core principle.

### Parameters

| Parameter | Type      | Default | Description                   |
| --------- | --------- | ------- | ----------------------------- |
| `logo`    | `boolean` | `true`  | Show logo in top-right corner |

### Example

```md
---
layout: statement
---
# Our Mission

Delivering excellence in healthcare technology.
```

---

## three-cols

Three-column layout with optional logo.

**When to use**: Compare three items or present information in three parallel streams.

### Parameters

| Parameter | Type      | Default | Description                   |
| --------- | --------- | ------- | ----------------------------- |
| `logo`    | `boolean` | `false` | Show logo in top-right corner |

### Example

```md
---
layout: three-cols
---

# Left Column

Content for left

::middle::

# Middle Column

Content for middle

::right::

# Right Column

Content for right
```

---

## three-cols-header

Three-column layout with dedicated header section.

**When to use**: Present three-way comparisons or parallel concepts with a shared title.

### Parameters

| Parameter       | Type      | Default    | Description                                                  |
| --------------- | --------- | ---------- | ------------------------------------------------------------ |
| `logo`          | `boolean` | `true`     | Show logo in top-right corner                                |
| `textAlignment` | `string`  | `'center'` | Column content alignment: `'top'`, `'center'`, or `'bottom'` |

### Example

```md
---
layout: three-cols-header
textAlignment: top
---

# Header Title

::left::

Left content

::middle::

Middle content

::right::

Right content
```

---

## two-cols

Two-column layout with optional logo.

**When to use**: Compare two items or present complementary information side-by-side.

### Parameters

| Parameter | Type      | Default | Description                   |
| --------- | --------- | ------- | ----------------------------- |
| `logo`    | `boolean` | `false` | Show logo in top-right corner |

### Example

```md
---
layout: two-cols
---

# Left Column

Content for left side

::right::

# Right Column

Content for right side
```

---

## two-cols-header

Two-column layout with dedicated header section.

**When to use**: Present two-way comparisons or parallel concepts with a shared title.

### Parameters

| Parameter       | Type      | Default    | Description                                                  |
| --------------- | --------- | ---------- | ------------------------------------------------------------ |
| `logo`          | `boolean` | `true`     | Show logo in top-right corner                                |
| `textAlignment` | `string`  | `'center'` | Column content alignment: `'top'`, `'center'`, or `'bottom'` |

### Example

```md
---
layout: two-cols-header
textAlignment: center
---

# Header Title

::left::

Left column content

::right::

Right column content
```