Rich Content Showcase

CSS Components Available in slyds

Navigate with arrow keys. Press N for speaker notes.

Welcome

This presentation demonstrates all the CSS components available in slyds out of the box. Each slide showcases a different component with real usage examples.

Code Blocks

Inline code uses monospace styling with a dark background.

Go Example

func Build(root string) (*Result, error) {
    html, err := resolveIncludes(root, "index.html")
    if err != nil {
        return nil, fmt.Errorf("include resolution: %w", err)
    }
    inlined, warnings := InlineAssets(html, root)
    return &Result{HTML: inlined, Warnings: warnings}, nil
}

Shell Example

$ slyds init "My Talk" --theme dark -n 6
Created "my-talk" with 6 slides (theme: dark).

$ slyds build my-talk
Built dist/index.html (42 KB, 6 slides)

Code Blocks

Code blocks use the theme's monospace font and dark background. The dark theme styles them with a GitHub-dark inspired color scheme. Both inline code and pre/code blocks are styled automatically.

Highlight Callouts

Use the .highlight class for callout boxes:

    Tip: Callout boxes draw attention to key information. They use a colored left border and subtle background tint that adapts to the active theme.
  

    How it works: The dark theme renders highlights with rgba(0, 212, 255, 0.1) background and a cyan left border — keeping the box visible without overwhelming the content.
  

    Usage: Wrap any content in <div class="highlight"> — paragraphs, lists, even code blocks work inside callouts.
  

Callouts

The highlight class provides a versatile callout component. Each theme styles it differently — the default theme uses a gradient background, while the dark theme uses a semi-transparent cyan tint. The left border provides visual anchoring.

Stats at a Glance

The .stats-grid and .stat-box classes create metric displays:

5 Built-in Themes

5 Slide Types

1 Binary, Zero Dependencies

<50KB Typical Built Output

    Responsive: The grid automatically adjusts columns based on available width using repeat(auto-fit, minmax(250px, 1fr)).
  

Stats Grid

The stats grid is perfect for dashboards, KPI slides, or any time you need to show numbers at a glance. The stat-number class gets the theme's accent color (cyan in dark theme), and the grid is responsive by default.

Side-by-Side Layout

Source HTML

<div class="highlight">
  <strong>Tip:</strong>
  Use callouts for
  key information.
</div>

Write plain HTML — no custom syntax or preprocessors needed.

Rendered Result

Tip: Use callouts for key information.

The theme CSS handles all the visual styling automatically.

Two-Column Layout

The two-column layout uses flexbox with a subtle left-column border separator. Perfect for before/after comparisons, source vs. rendered views, or any side-by-side content. The col-left class gets a right border for visual separation.

Data Tables

The .tier-table class styles tables with themed headers and alternating rows:

Component	CSS Class	Use Case
Callout Box	`.highlight`	Tips, warnings, key takeaways
Stats Grid	`.stats-grid`	KPIs, metrics, numbers at a glance
Data Table	`.tier-table`	Comparisons, feature matrices
Phase Box	`.phase-box`	Timelines, project phases, steps
Two Column	`.layout-two-column`	Side-by-side comparisons

Tables

The tier-table class provides a clean, themed table with colored header row and alternating row backgrounds. The dark theme uses a subtle hover effect on rows. Tables collapse borders and use consistent padding.

Phase Boxes

The .phase-box class is ideal for timelines and step-by-step content:

Phase 1 — Scaffold

Run slyds init to create a presentation skeleton with your chosen theme. Each slide gets its own HTML file in the slides/ directory.

Phase 2 — Author

Edit each slide as plain HTML. Use the CSS components shown in this deck — callouts, stats, tables, code blocks. Run slyds serve to preview live.

Phase 3 — Publish

Run slyds build to produce a single self-contained HTML file. Host it anywhere — GitHub Pages, S3, or just email the file.

Phase Boxes

Phase boxes provide a structured way to show sequential steps, project phases, or timelines. Each box has a colored left border and subtle background. The h3 inside uses the theme's accent color. Stack them vertically for a natural timeline flow.

Build Your Own

Every component in this deck is available in all slyds themes.

.highlight Callout boxes

.stats-grid Metric displays

.tier-table Data tables

.phase-box Timeline steps

Slides are just HTML — add your own CSS classes too.

Closing

All these components work across every slyds theme. The theme CSS adapts colors and typography, but the component structure stays the same. And since slides are plain HTML, you can always add custom CSS for project-specific components.

Floating Overlays

The floater slot supports pinned overlays that stay fixed within the slide. Use it for footers, watermarks, logos, or any persistent element.

Three patterns shown on this slide:

Pattern	Position	Use case
Footer	Bottom, full width	Confidentiality notices, copyright
Watermark	Center, rotated	Draft stamps, status labels
Badge	Top-right corner	Logos, slide tags, status indicators

All three are position: absolute within the slide via .slide-floater. Populate with slyds query:

slyds query 9 '[data-slot="floater"]' --set '<span style="...">Content</span>'

Acme Corp Confidential • Internal Use Only • 2026

DRAFT

NEW

Floating Overlays

This slide demonstrates three floating overlay patterns. The floater slot uses position:absolute within the slide. Multiple floaters can coexist — the footer, watermark, and badge are all visible simultaneously. The floater slot in the layout template is the primary one addressed by data-slot="floater"; additional floaters use the .slide-floater class directly.