Reference

Layout components

section, columns, divider, timeline, steps, progress_bar, empty_state

section

Grouping with a heading

A titled block of nested components. Use it to organize long pages into scannable chunks. eyebrow + heading optional. Nested components: can hold any components. Add align: center | right to align the eyebrow, heading, and text content within the section.

Anchors. When heading is set, the rendered <section> gets an auto-slugged id (lowercase, hyphens, punctuation and emoji stripped), so deep-links like /guide.html#platform-health just work. Set id: stable-name to lock the anchor even if the heading wording changes. Same behavior applies to header.

Example section

Platform health

Uptime
99.9%
Errors
0.02%
Latency p95
140ms

Everything above lives inside this section.

- type: section
  eyebrow: Example section
  heading: Platform health
  components:
    - type: stat_grid
      stats: [...]
    - type: markdown
      body: "Everything above lives inside this section."
columns

Multi-column row

Distribute components into equal-width columns. Each column is itself a list of components.

Default — columns stretch at the grid level, contents sit at natural height:

Left

Arbitrary components live inside each column.

Center

Even widths, responsive collapse on narrow screens. One more line here so heights diverge.

Right

Great for comparison layouts. Extra line here. And another.

equal_heights: true — children grow to fill their column so all three look balanced:

Left

Arbitrary components live inside each column.

Center

Even widths, responsive collapse on narrow screens. One more line here so heights diverge.

Right

Great for comparison layouts. Extra line here. And another.

- type: columns
  equal_heights: true    # default false
  columns:
    - - type: callout
        variant: info
        title: Left
        body: Left content
    - - type: callout
        variant: success
        title: Center
        body: Center content
timeline

Horizontal phase tracker

A horizontal row of phases with status indicators. Each item is completed, active, or upcoming. No interaction — purely visual progress.

Planning
Configuration
Optimization
Ongoing
- type: timeline
  items:
    - name: Planning
      status: completed    # completed | active | upcoming
    - name: Configuration
      status: completed
    - name: Optimization
      status: active
    - name: Ongoing
      status: upcoming
steps

Numbered or bulleted steps

Ordered list of cards with title + optional detail. Numbered by default; set numbered: false for bullets.

  1. 1
    Install the binary
    Build from source with cargo build --release.
  2. 2
    Create a site directory
    Any directory of .yaml files — kazam walks it recursively.
  3. 3
    Run dev mode
    kazam dev ./my-site watches and live-reloads at localhost:3000.
- type: steps
  numbered: true   # default; false for bullets
  items:
    - title: Install the binary
      detail: Build from source with cargo build --release.
    - title: Create a site directory
      detail: Any directory of .yaml files.
    - title: Run dev mode
      detail: kazam dev ./my-site
empty_state

Zero-data placeholder

For pages or sections that have nothing to show yet. Icon, title, description, optional CTA. Any bundled lucide icon name works in the icon: field.

No customers yet

Add your first customer to see them here with health badges, deployment guides, and meeting agendas.

Add customer

All caught up

Zero open issues in this portfolio.

- type: empty_state
  title: No customers yet
  body: Add your first customer to see them here.
  icon: inbox                 # any bundled lucide icon
  action:
    label: Add customer
    href: /customers/new
Next up

Navigation components thread pages together — breadcrumbs on deep pages, button groups for primary CTAs.

NavigationAll components