AI Reference Guide

Quick Start

Sardius Slides uses Markdown with HTML comment directives. Each slide is separated by --- (three dashes on their own line).

# Title Here
## Subtitle with **Accent Word**

Content paragraph.

<!-- theme: dark -->
<!-- layout: split -->
<!-- illustration: rocket -->

---

# Next Slide
More content...Copy

Basic Slide Structure

<!-- directives go here -->

# Overline (smaller text above heading)
## Main Heading with **Accent**

> Optional quote or callout

Body content, paragraphs, or special content types.Copy

Required: A slide needs at minimum a # heading, ## heading, or body content to render.

Directives Reference

Directives are HTML comments placed at the top of each slide before any content.

<!-- theme: dark -->        <!-- Background color scheme -->
<!-- layout: split -->      <!-- Content positioning -->
<!-- illustration: ai -->   <!-- SVG illustration -->
<!-- date: Feb 2026 -->     <!-- Date badge (hero layout) -->
<!-- image: url -->          <!-- Photo/screenshot replacing illustration -->
<!-- bg-image: url -->       <!-- Full-bleed background photo -->Copy

Themes

Default: dark if not specified. Alternate between themes for visual rhythm.

Layouts

Default: Auto-detected (center for data slides, cycles through illustration layouts otherwise). bg-image is auto-selected when <!-- bg-image: url --> is present.

Layout Style Guide

Each layout is designed for a specific purpose. Choosing the right layout for your content type makes the difference between a good slide and a great one.

Hero — Opening & Title Slides

The hero layout commands attention with an animated network background, centered oversized text, and a pulsing center glow. Use it only once or twice per deck.

• Best content: Company name, presentation title, tagline, date badge
• Heading style: Very large (sz-lg), short and punchy (2-4 words)
• Body text: One short tagline sentence, keep it under 10 words
• Accent word: Place on the product name or key concept
• Always dark theme — the animated particles and network need the dark background
• Add <!-- date: Month Year --> for a professional date badge

# Company Name
## Product **Title**

Short compelling tagline.

<!-- date: February 2026 -->
<!-- layout: hero -->Copy

Split — Problem/Solution & Feature Slides

Two distinct panels: an accent panel on the left with the illustration, and a content panel on the right. The visual divide creates a natural "before/after" or "concept/details" feel.

• Best content: Problem statements with bullet details, feature explanations with supporting points
• Left panel: Illustration reinforces the concept visually
• Right panel: Heading + body text or bullet list (3-6 bullets)
• Works on both themes: Dark for dramatic problem slides, light for solution/feature reveals
• Bullet pattern: Use **Bold lead-in** followed by description for scannable lists

<!-- theme: dark -->
<!-- layout: split -->
<!-- illustration: streaming -->

# The Problem
## Multiple Locations Create **Blind Spots**

- **Long delays** between events and feedback
- **Quality issues** across sites, often undetected
- **Travel costs** for basic oversight needsCopy

Center — Data, Metrics & Card Grids

Centered content with generous padding and no illustration. This is the workhorse layout for structured content types.

• Best content: Icon cards, stat cards, progress bars, quotes, key points
• Required for: Icon cards (4-column grid), stat cards, progress bars — these components need full width
• Heading: Keep short (3-5 words), centered above the component
• Optional body: One sentence of context between heading and cards/stats
• Alternate themes: Dark center slides feel technical/dramatic, light feels professional/clean

<!-- theme: dark -->
<!-- layout: center -->

# Platform Capabilities
## Four Pillars, **One Platform**

- 📡 | Monitoring | Watch every location live
- 🔍 | Review | Instant access to content
- 🎯 | Quality | Maintain brand standards
- ✨ | Training | Coach teams in real timeCopy

Left (illust-right) — Standard Content

Content on the left with a supporting illustration on the right. This is the default content-with-illustration layout.

• Best content: Feature descriptions, explanations, detailed body text with bullet lists
• Body text: 2-3 sentences max, or a short paragraph + 3-4 bullets
• Quote option: A > blockquote works well here as a featured callout
• Illustration: Choose one that matches the topic — auto-detection usually works
• Don't: Use for data-heavy slides (use center instead)

BG (bg-illust) — Visual Impact Statements

The illustration fills the background at very low opacity while content overlays it. Creates a dramatic, immersive feel.

• Best content: Big statements, quotes, vision/mission slides, audience descriptions
• Heading: Should be bold and confident — this layout amplifies it
• Body: Use a > blockquote for maximum impact, or a short powerful paragraph
• Best on dark theme: The faint illustration glow creates atmosphere
• Don't: Use for data or lists — the background illustration competes with detailed content

<!-- theme: dark -->
<!-- illustration: globe -->
<!-- layout: bg -->

# Perfect Fit
## Organizations That Need **Consistency**

> Perfect for multi-campus churches, educational institutions, and organizations that need streaming quality across multiple locations.Copy

Top (top-illust) — Closing & CTA Slides

Content at top with a small illustration below. The compact layout feels conclusive — perfect for endings.

• Best content: Final call-to-action, contact info, "what's next" messages
• Heading: Question or imperative ("Ready to Transform?" / "Let's Build Together")
• CTA: Always include a **→ Call to action text**
• Illustration: rocket for forward momentum, calendar for scheduling next steps
• Usually dark theme: Ends the deck with the same energy it started

<!-- theme: dark -->
<!-- illustration: rocket -->
<!-- layout: top -->

# What's Next
## Let's **Get Started**

Contact us to schedule a demo.

**→ Let's go build.**Copy

Two-Col — Feature Lists & Comparisons

A two-column grid layout that splits feature list items across two columns for a dense, professional look.

• Best content: Feature lists with arrow bullets, side-by-side comparisons
• Items: 4-6 feature items for best balance across columns
• Pattern: Use - -> **Title** | Description for arrow-bulleted features
• Works on both themes: Dark for technical features, light for product capabilities
• Auto-selected: When feature list content is present and no illustration/image is set

<!-- theme: dark -->
<!-- layout: two-col -->

# Platform Features
## Everything You Need to **Succeed**

- -> **Live Monitoring** | Watch every location in real time
- -> **Instant Replay** | Review content within minutes
- -> **Quality Scoring** | AI-powered analysis
- -> **Team Alerts** | Notify the right people
- -> **Custom Reports** | Tailored insights
- -> **Mobile Access** | Monitor from anywhereCopy

BG-Image — Full-Bleed Photo Backgrounds

A dramatic layout with a full-bleed background photo, a dark overlay for readability, and centered text on top.

• Best content: Event photos, dramatic statements, atmosphere-setting slides
• Directive: Use <!-- bg-image: url --> — layout auto-selects to bg-image
• Overlay: Automatic dark gradient overlay ensures text readability
• Text: Keep heading short and punchy — the photo is the star
• Works on both themes: Dark overlay (default) or light overlay

<!-- theme: dark -->
<!-- bg-image: https://example.com/photo.jpg -->

# Built for Events
## Professional Broadcasting at **Every Scale**

From intimate gatherings to arena-sized productions.Copy

Images — Photos Replacing Illustrations

Any layout that supports illustrations also supports images. Use <!-- image: url --> to place a photo where an SVG illustration would normally appear.

• Directive: <!-- image: url --> replaces the illustration slot with a photo
• Supported layouts: split, left, top, bg, and all illustration layouts
• Sizing: Images use object-fit: cover with rounded corners
• Use case: Product screenshots, team photos, diagrams
• Tip: Use landscape images (16:9 or wider) for best results in side-by-side layouts

<!-- theme: dark -->
<!-- layout: split -->
<!-- image: https://example.com/screenshot.png -->

# See It in Action
## The Pulse **Dashboard**

A centralized command center for all your locations.Copy

Roadmap — Timelines & Phases

A unique horizontal timeline with a progress rail, phase dots, and staggered entrance animations. Dedicated layout for chronological content.

• Best content: Quarterly plans, project phases, product milestones
• Items: 3-4 phases is ideal (more gets cramped)
• Labels: Keep short — Q1, Q2, Phase 1, 2024, etc.
• Descriptions: Scannable phrases, not full sentences
• Active marker: Use * to show completed/current items — the rail fills to match
• Works on both themes: Dark for dramatic timelines, light for clean professional look

Illustrations

Illustrations auto-detect based on content keywords, or specify manually:

Content Types

Text Formatting

# Overline Text
## Main Heading with **Accented Word**

Regular paragraph. Use **bold** for emphasis.

> This is a quote or callout block.

**→ Call to action text**Copy

Bullet Lists

- First bullet point
- Second point with **bold**
- Third pointCopy

Icon Cards (4-column grid)

Format: - EMOJI | Title | Description

- 🔍 | Discovery | Help users find content with AI
- 🚀 | Expansion | Open new markets and capabilities
- ✨ | Polish | Make the experience feel right
- 🔗 | Integration | Meet users where they areCopy

Stat Cards

Format: - **VALUE** | Label

- **$2.5M** | Annual Revenue
- **99.99%** | Uptime SLA
- **150+** | Enterprise ClientsCopy

Progress Bars

Format: - [XX%] | Label

- [90%] | SonLife Launch
- [75%] | Bitmovin Player
- [60%] | AI Discovery Phase 1Copy

Timeline (Roadmap Layout)

Format: - * PERIOD | Description (asterisk = completed/active)

<!-- layout: roadmap -->

# The Year Ahead

- * Q1 | Product launch, client migrations
- * Q2 | Platform expansion, new features
- Q3 | New product launch
- Q4+ | Infrastructure hardeningCopy

Feature List (Arrow Bullets)

Format: - -> **Title** | Description

- -> **Live Monitoring** | Watch every location in real time
- -> **Instant Replay** | Review content within minutes
- -> **Quality Scoring** | AI-powered analysis catches issues
- -> **Team Alerts** | Notify the right people when neededCopy

Tag/Pill Grid

Format: - [tag] Label text

- [Live] Live streaming and real-time monitoring
- [VOD] Video on demand and content libraries
- [AI] Artificial intelligence and smart analysis
- [Analytics] Data insights and performance metricsCopy

Image Card Grid

Format: - ![caption](image-url)

- ![Dashboard View](https://example.com/dashboard.png)
- ![Live Monitor](https://example.com/monitor.png)
- ![Analytics](https://example.com/analytics.png)Copy

Content Type Style Guide

Each content type has specific patterns that make it shine. Follow these guidelines for polished, professional slides.

Icon Cards — Feature Grids

• Count: Exactly 4 cards produces the best grid (2-column also works for 2 cards)
• Emoji: Choose distinct, recognizable emoji that reinforce each title
• Titles: 1-3 words, action-oriented (Discovery, Expansion, Integration)
• Descriptions: One concise sentence (8-12 words), start with a verb
• Layout: Always use center layout — cards need full width
• Color cycling: Cards auto-cycle through red, blue, purple, green accent lines

Stat Cards — Key Metrics

• Count: 3 or 4 stats per slide (2 also works)
• Values: Include units/symbols — $2.5M, 99.99%, 150+, < 30s
• Labels: Short descriptor (2-4 words) — "Annual Revenue", "Uptime SLA"
• Animation: Numbers count up from zero when slide activates — very impactful for live presenting
• Layout: Always use center layout
• Pro tip: Mix metric types (money + percentage + count) for visual variety

Progress Bars — Project Status

• Count: 3-5 bars per slide
• Percentages: Vary them (don't make all 90%+) — the visual contrast is the point
• Labels: Project names, feature names, or milestone descriptions
• Animation: Bars grow from left on slide activation with a shimmer sweep
• Layout: Always use center layout
• Pro tip: Order from highest to lowest percentage for visual flow

Roadmap Timeline — Phases & Milestones

• Count: 3-4 phases (more gets too compressed)
• Active items: Mark with * — the progress rail fills to that point
• Period labels: Short — Q1, Q2, Phase 1, Jan-Mar
• Descriptions: Comma-separated phrases, not sentences — "Platform launch, client migrations"
• Layout: Must use roadmap layout (content type is tied to this layout)

Bullet Lists — Supporting Details

• Count: 3-6 bullets per slide
• Pattern: **Bold lead-in** followed by lighter description text
• Parallel structure: Start each bullet the same way (all nouns, all verbs, etc.)
• Layout: Works best in split, left, or center layouts
• CTA bullet: End a list with **→ Call to action** for a compelling close

Quotes / Blockquotes — Impact Statements

• Length: 1-3 sentences maximum
• Style: Renders as a styled callout box with a red left border
• Layout: Works in any layout, but particularly impactful in bg, left, and split
• Usage: Customer testimonials, vision statements, or key insights
• Don't: Combine with other content types (icon cards, stats) — let the quote breathe

Feature List — Arrow-Bulleted Features

• Count: 4-6 items per slide (fills two columns nicely in two-col layout)
• Syntax: - -> **Title** | Description
• Titles: 1-3 words, action-oriented (Live Monitoring, Instant Replay)
• Descriptions: One concise sentence describing the feature benefit
• Layout: Best in two-col (auto-selected), also works in center
• Animation: Items slide in from left with staggered timing

Tag/Pill Grid — Category Labels

• Count: 4-8 tags per slide
• Syntax: - [tag] Label text
• Tag text: Short category name (1-2 words) shown in accent color
• Label text: Brief description of the category
• Layout: Best in center layout
• Animation: Tags pop in with a scale bounce effect
• Note: Don't use percentage values like [95%] inside brackets — that's progress bar syntax

Image Card Grid — Photo Gallery

• Count: 2-4 cards per slide
• Syntax: - ![caption](url)
• Images: Use landscape images (16:9 or wider) for best aspect ratio
• Captions: Optional — leave empty ![] for no caption
• Layout: Best in center layout — cards auto-fit into responsive grid
• Animation: Cards fade up with staggered timing

CTA (Call to Action) — Closing Hooks

• Syntax: **→ Action text here**
• Style: Renders as a prominent red button/banner element
• Placement: Last element on a slide, after body text
• Text: Imperative verb + destination — "Let's go build.", "Schedule a demo.", "Get started today."
• Layout: Most impactful on top (closing) or at the end of a split/left slide

Slide Examples

Title Slide (Hero)

# Company Name
## 2026 **Product Roadmap**

Running together at speed.

<!-- date: February 2026 -->
<!-- layout: hero -->Copy

Feature Slide (Split)

<!-- theme: light -->
<!-- illustration: ai -->
<!-- layout: split -->

# AI Discovery
## Find Content **Instantly**

> Our AI helps audiences find exactly what they need.

Visual search and smart recommendations transform how users interact with your video library.Copy

Metrics Slide (Center)

<!-- theme: dark -->
<!-- layout: center -->

# Q1 Results
## Strong **Performance**

- **$2.5M** | Revenue
- **142%** | YoY Growth
- **99.99%** | UptimeCopy

Icon Cards Slide

<!-- theme: dark -->
<!-- layout: center -->

# Strategic Themes
## Four Pillars, **One Direction**

- 🔍 | Use Their Content | Help clients discover and repurpose video with AI
- 🔗 | Meet Them Where They Are | Integrate with tools clients already use
- 🚀 | Expand What's Possible | New markets, platforms, and capabilities
- ✨ | Make It Feel Right | Polish the experience, earn trustCopy

Closing Slide (Top)

<!-- theme: dark -->
<!-- illustration: rocket -->
<!-- layout: top -->

# What's Next
## Let's **Build This Together**

This roadmap evolves. Your input shapes what comes next.

**→ Let's go build.**Copy

Full Demo Deck

A 19-slide deck showcasing every layout, content type, theme, and feature. View it live as an interactive slideshow or download the raw markdown.

# Sardius Slides
## The Complete **Feature Showcase**

Every layout, content type, and style in one deck.

<!-- date: 2026 -->
<!-- layout: hero -->

---

<!-- theme: dark -->
<!-- layout: split -->
<!-- illustration: streaming -->

# Split Layout
## Illustration Right with **Bullet List**

The split layout places content on the left with an illustration on the right. Perfect for feature overviews and problem/solution slides.

- **Bold titles** draw attention to key points
- **Markdown formatting** works throughout
- Supports up to six bullet items comfortably
- Illustrations animate on slide entry
- Auto-selects from 13 built-in SVGs

---

<!-- theme: light -->
<!-- illustration: team -->

# Light Theme
## Auto Layout with **Block Quote**

> Slides automatically choose a layout when an illustration is assigned but no explicit layout is set. The engine cycles through right, left, split, background, and top positions.

Light theme swaps the dark background for clean whites and grays, ideal for well-lit rooms and printed handouts.

---

<!-- theme: dark -->
<!-- layout: center -->

# Icon Cards
## Four Cards in a **Grid**

Center layout with icon cards creates a visually balanced overview. Each card has an emoji, title, and description.

- 📡 | Live Streaming | Broadcast to any device in real time with adaptive bitrate
- 🎯 | Smart Targeting | Reach the right audience with precision delivery tools
- 🔍 | Content Analysis | AI-powered quality scoring and automated review
- ✨ | Brand Control | Maintain visual consistency across every location

---

<!-- theme: light -->
<!-- illustration: workflow -->
<!-- layout: split -->

# How It Works
## A Simple Three-Step **Process**

The split layout also works in light theme. Illustration colors adapt automatically to maintain contrast.

- **Step one** connects your existing encoders
- **Step two** configures your centralized dashboard
- **Step three** enables instant review and feedback

---

<!-- theme: dark -->
<!-- layout: center -->

# Stat Cards
## Animated **Numbers**

Stat cards display key metrics with large animated counters. Numbers count up when the slide becomes active.

- **99.9%** | Platform Uptime
- **< 30s** | Stream Latency
- **500+** | Active Locations
- **24/7** | Live Monitoring

---

<!-- theme: light -->
<!-- illustration: distribution -->

# Illustration Left
## Auto-Cycling **Positions**

When no layout is specified but an illustration is provided, the engine auto-cycles through positions. This slide lands on a left-side illustration.

- **Multi-device delivery** across every screen size
- **Channel management** for OTT and IPTV platforms
- **White-label apps** with custom branding options
- **Flexible access controls** by role and location

---

<!-- theme: dark -->
<!-- layout: roadmap -->

# Roadmap Layout
## Quarterly **Timeline**

The roadmap layout renders timeline items with connecting lines and milestone markers. Completed items are marked with a filled dot.

- * Q1 | Platform launch with calendar management and live preview
- * Q2 | AI-powered content analysis and automated quality scoring
- Q3 | Advanced analytics dashboard and custom reporting
- Q4 | Multi-language support and global CDN expansion

---

<!-- theme: light -->
<!-- layout: center -->

# Progress Bars
## Tracking **Completion**

Progress bars animate from zero to their target percentage on slide entry. Use the bracket syntax to define the fill level.

- [95%] | Core Platform
- [85%] | Stream Integration
- [70%] | AI Analysis Engine
- [45%] | Analytics Dashboard

---

<!-- theme: dark -->
<!-- illustration: globe -->
<!-- layout: bg -->

# Background Illustration
## Large-Scale **Visual Impact**

> The background illustration layout places the SVG at full size behind the content, creating dramatic visual depth. Works especially well with the globe, security, and cloud illustrations.

---

<!-- theme: light -->
<!-- layout: center -->

# Light Icon Cards
## Clean and **Readable**

Icon cards adapt to light theme with dark text and subtle card borders. The same content syntax works across both themes.

- 💰 | Reduce Costs | Eliminate unnecessary site visits with remote monitoring
- ⚡ | Faster Feedback | Review and respond within minutes instead of days
- 📊 | Quality Insights | Maintain brand standards across every location
- 🎓 | Proactive Training | Identify coaching moments in real time

---

<!-- theme: dark -->
<!-- layout: two-col -->

# Two-Column Layout
## Feature List with **Arrow Bullets**

- -> **Live Monitoring** | Watch every location in real time from a single dashboard
- -> **Instant Replay** | Review content within minutes of it airing
- -> **Quality Scoring** | AI-powered analysis catches issues automatically
- -> **Team Alerts** | Notify the right people when action is needed
- -> **Custom Reports** | Generate insights tailored to your organization
- -> **Mobile Access** | Monitor from anywhere on any device

---

<!-- theme: light -->
<!-- layout: center -->

# Tag Pills
## Categorize with **Badges**

Tags create colorful pill badges for categorization, filtering, or labeling. Great for content categories, skill tags, or feature groupings.

- [Live] Real-time streaming and monitoring
- [VOD] Video on demand and content libraries
- [AI] Artificial intelligence and smart analysis
- [Analytics] Data insights and performance metrics
- [Security] Platform reliability and uptime
- [Mobile] Cross-device access and responsive design

---

<!-- theme: dark -->
<!-- layout: split -->
<!-- image: https://images.unsplash.com/photo-1557804506-669a67965ba0?w=800 -->

# Image Support
## Photos Replace **Illustrations**

Use <!-- image: url --> in any illustration layout to display a photo instead of an SVG. The image fills the illustration panel with object-fit cover.

- Works with **split**, **illust-right**, **illust-left**, and **top-illust** layouts
- Supports any image URL including Unsplash
- Maintains the same responsive behavior

---

<!-- theme: dark -->
<!-- bg-image: https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1200 -->

# Background Image
## Full-Bleed **Photography**

The bg-image directive creates a full-screen photo backdrop with a dark overlay for text readability. No layout directive needed.

---

<!-- theme: dark -->
<!-- layout: center -->

# Image Cards
## Photo **Grid**

Image cards display photos in a responsive grid with captions. Use the ![caption](url) syntax in bullet items.

- ![Conference Stage](https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=400)
- ![Team Collaboration](https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400)
- ![Live Production](https://images.unsplash.com/photo-1478147427282-58a87a120781?w=400)

---

<!-- theme: light -->
<!-- illustration: ai -->
<!-- layout: top-illust -->

# Top Illustration
## Illustration Above **Content**

The top-illust layout places the SVG illustration above the text content. Works well for title slides and section dividers.

---

<!-- theme: dark -->
<!-- illustration: security -->

# Background Illustration
## Integrate with Your **Complete Strategy**

Benefit from a complete broadcast solution: Sardius Media Broadcast Platform for content management, EMLA hardware for reliable encoding, and Live Events support for production excellence.

**→ Learn more at sardiusmedia.com**

---

<!-- theme: dark -->
<!-- illustration: rocket -->
<!-- layout: top -->

# Ready to Build?
## Start Creating **Presentations**

Copy this deck's markdown to use as a starting template, or create a new presentation from the dashboard.

**→ Get started at sardius.app**Copy

What This Demo Covers

Best Practices

Visual Rhythm

• Alternate dark and light themes between slides
• Use hero for opening, top or center for closing
• Don't use the same layout for consecutive slides

Content Balance

• Keep headings concise (3-7 words)
• Limit bullet points to 3-4 per slide
• One main idea per slide

Accent Words

• Use **word** to highlight ONE key word per heading
• Place accent on the most impactful word
• Example: ## Everyone Running at **Full Speed**

Icon Cards

• Use exactly 4 for best grid layout
• Keep titles to 1-3 words
• Keep descriptions to 1 short sentence

Timelines

• Mark completed items with * prefix
• Keep period labels short (Q1, Phase 1, 2024)
• Descriptions should be scannable phrases

Common Presentation Flows

Problem → Solution:

1. Hero (title)
2. Light (problem)
3. Dark (solution overview)
4. Light (detailed features)
5. Dark (roadmap/timeline)
6. Light (metrics/proof)
7. Dark (closing CTA)