npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@sp-days-framework/slidev-theme-sykehuspartner

v1.1.3

Published

A Slidev theme for Sykehuspartner presentations.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

sp-anders-undheimsp-anders-undheim

Keywords

slidev-themeslidev

Readme

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

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

Quick Start

---
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 - Profile introduction slide with optional image
  • center - Centered content with logo
  • cover - Title slide with banner
  • default - Standard content slide with header extraction
  • end - Closing slide with centered banner
  • fact - Emphasis slide for key facts
  • full - Full-screen content without padding
  • image - Background or foreground image slide
  • image-left - Content with left-aligned image
  • image-right - Content with right-aligned image
  • intro - Introduction slide with optional side image
  • quote - Quote display with attribution
  • section - Section divider with optional image
  • statement - Bold statement slide
  • three-cols - Three-column layout
  • three-cols-header - Three columns with header
  • two-cols - Two-column layout
  • 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

---
layout: about-me
imageSrc: ./profile.jpg
imageShape: circle
imagePosition: left
name: John Doe
jobTitle: Senior Developer
department: IT Department
email: [email protected]
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

---
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

---
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

---
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

---
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

---
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

---
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

---
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

---
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

---
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

---
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

---
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

---
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

---
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

---
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

---
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

---
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

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

# Header Title

::left::

Left column content

::right::

Right column content