--- theme: "@sp-days-framework/slidev-theme-sykehuspartner" title: Sykehuspartner Slidev Theme description: A professional Slidev theme for creating presentations with consistent Sykehuspartner branding layout: cover --- # Sykehuspartner Slidev Theme ## Professional Presentations Made Simple --- # What is Slidev? Slidev is a presentation framework for developers built on web technologies: - **Markdown-based** - Write slides in Markdown with frontmatter - **Developer-friendly** - Syntax highlighting, live coding, and diagrams - **Themeable** - Customizable layouts and styling - **Interactive** - Vue components, animations, and transitions - **Exportable** - PDF, PNG, or hostable SPA Perfect for technical presentations, workshops, and training sessions. --- # Sykehuspartner Theme This theme provides a complete presentation solution with: - **18 Professional Layouts** - From cover slides to multi-column content - **Consistent Branding** - Sykehuspartner colors, logos, and styling - **Syntax Highlighting** - Support for 30+ programming languages - **Dark Mode Support** - Automatic light/dark theme switching - **VSCode Icons** - Built-in icon support for technical content - **Responsive Design** - Looks great on any screen size --- # Getting Started Create your presentation file: ```markdown [./slidev/your-slides.md] --- theme: "@sp-days-framework/slidev-theme-sykehuspartner" layout: cover --- # Your Presentation Title ## Subtitle Goes Here ``` Start the development server: ```bash npm run slidev ./slidev/your-slides.md ``` --- # Frontmatter Configuration Configure your entire presentation in the opening frontmatter: ```markdown [./slidev/your-slides.md] --- theme: "@sp-days-framework/slidev-theme-sykehuspartner" title: My Presentation description: A great presentation layout: cover --- # First Slide ... ``` --- layout: two-cols-header --- # Frontmatter Options ::left:: ```markdown [./slidev/your-slides.md] ... # First Slide --- layout: two-cols logo: false --- # Subsequent Slide ``` ::right:: Common frontmatter options: - `layout` - Choose the slide layout - `logo` - Show/hide the logo (varies by layout) - `image`, `imageSrc` - Add images to layouts --- zoom: 0.8 layout: two-cols-header --- # Available Layouts - Content ::left:: | **Layout** | **Description** | | --- | --- | | `default` | Standard content with header extraction | | `center` | Vertically centered content | | `full` | Full-screen with no padding | | `cover` | Title slide with banner | | `intro` | Introduction with optional side image | | `two-cols` | Two equal columns | | `two-cols-header` | Two columns with header | | `three-cols` | Three equal columns | | `three-cols-header` | Three columns with header | ::right:: | **Layout** | **Description** | | --- | --- | | `section` | Section divider with optional image | | `end` | Closing slide with centered banner | | `image` | Background or foreground image | | `image-left` | Content with left-aligned image | | `image-right` | Content with right-aligned image | | `fact` | Emphasize key facts | | `statement` | Bold statement slide | | `quote` | Quote with attribution | | `about-me` | Profile introduction | --- layout: cover --- # Layout Examples ## Showcasing All Available Layouts --- layout: intro imageSrc: https://sli.dev/logo-title.png imagePosition: right imageRatio: 40% imageSize: 80% --- # Intro Layout ## Introduce new topics This layout is perfect for introductions with optional side images --- layout: default --- # Default Layout ## Features - Clean and simple design - Logo in top right corner - Perfect for general content - Supports all markdown features ```javascript // Code blocks work great const hello = "world"; ``` --- layout: center --- # Center Layout Perfect for emphasizing important points --- layout: full ---

Full Layout

No padding, no logo - complete creative freedom

Perfect for custom content
--- layout: section --- # Section Layout ## Introduce New Sections Use this to divide your presentation into logical parts --- layout: fact --- # Fact Layout ## Perfect for bringing the title and content together --- layout: statement --- # Statement Layout ## Code is the Future of Operations Bold statements centered for maximum impact --- layout: quote --- # "The best way to predict the future is to create it." ## Alan Kay ### Quote Layout --- layout: two-cols --- # Left Column Content for the left side: - Point 1 - Point 2 - Point 3 ::right:: # Right Column Content for the right side: - Feature A - Feature B - Feature C --- layout: two-cols-header --- # Header Spanning Both Columns ::left:: ## Left Side - Comparison A - Before state - Old approach ::right:: ## Right Side - Comparison B - After state - New approach --- layout: three-cols --- # Column 1 First third of content ::middle:: # Column 2 Second third of content ::right:: # Column 3 Final third of content --- layout: three-cols-header --- # Organizing Information Across Three Sections ::left:: ## Development - Local setup - Testing - Version control ::middle:: ## Staging - Integration tests - UAT - Performance ::right:: ## Production - Deployment - Monitoring - Scaling --- layout: image imageSrc: ./assets/diagram-example.drawio.png imageBackgroundMode: false imageScale: 80% imageAlign: center --- # Image Layout (Foreground) Content at the top, image displayed below Perfect for explaining diagrams --- layout: image-left imageSrc: https://sli.dev/demo-cover.png imageRatio: 40% --- # Image Left Layout Image on the left, content on the right - Adjustable image ratio - Customizable alignment - Automatic scaling --- layout: image-right imageSrc: https://sli.dev/demo-cover.png imageRatio: 40% --- # Image Right Layout Content on the left, image on the right - Perfect for screenshots - Code examples with visuals - Architecture diagrams --- layout: about-me name: John Doe jobTitle: "Senior DevOps Engineer" department: "Cloud Platform Team" description: "Specialist in container technologies and cloud-native solutions" email: "john.doe@example.com" linkedin: "johndoe" imageSrc: https://sli.dev/logo.png imageShape: "circle" imagePosition: "left" --- --- layout: end --- # Ending Layout