Reference

Content components

header, meta, markdown, code, image, callout, blockquote, kbd

header

Page title block

Title with optional subtitle and eyebrow. Usually the first component on a page.

Executive Summary

Q2 Business Review

Three deployments, 140 active users

- type: header
  title: Q2 Business Review
  subtitle: Three deployments, 140 active users
  eyebrow: Executive Summary
meta

Key-value strip

Horizontal grid of labeled values. Great for page metadata — author, date, status, version.

AuthorTyler M.
Last Updated2026-04-16
StatusActive
Version1.2
- type: meta
  fields:
    - key: Author
      value: Tyler M.
    - key: Last Updated
      value: 2026-04-16
    - key: Status
      value: Active
markdown

Rich prose

Parses standard CommonMark plus tables. All the usual: headings, lists, bold, italic, code spans, blockquotes, links, tables.

Heading

Regular paragraph with bold and italic and inline code.

  • Unordered list
  • With a second item
MetricValue
Users47
Coverage94%

Blockquote for emphasis.

- type: markdown
  body: |
    ## Heading

    Regular paragraph with **bold** and *italic*.

    - Unordered list
    - With a second item

    | Metric | Value |
    |--------|-------|
    | Users | 47 |
code

Syntax-styled code block

A fenced code block as a standalone component. language is optional metadata; used as a data attribute for future syntax highlighting.

fn main() {
    let site = Site::build("./my-site")?;
    println!("wrote {} pages", site.pages.len());
}

- type: code
  language: rust
  code: |
    fn main() {
        let site = Site::build("./my-site")?;
        println!("wrote {} pages", site.pages.len());
    }
callout

Contextual message box

Four variants — info (default), success, warn, danger. Title is optional. Body is markdown.

Heads up

Neutral information with a teal accent bar.

Deployed

Version 1.2 is live in production.

Attention

Renewal window opens in 30 days.

Action required

Credentials leaked — rotate immediately.

- type: callout
  variant: warn
  title: Attention
  body: Renewal window opens in 30 days.
image

Images with caption

Figure with optional caption and max_width constraint. alt is required for accessibility. Any non-.yaml file in the source directory — .svg, .png, .jpg, etc. — is copied verbatim into the output directory, so just reference it by relative path. Use align: center | right to place the image inside its flow (defaults to left).

Sample kazam dashboard showing three customer cards
A live SVG rendered through the image component.
- type: image
  src: /screenshots/dashboard.png
  alt: Dashboard screenshot
  caption: The customer portfolio dashboard.
  max_width: 600
  align: center
blockquote

Testimonial / pulled quote

Standalone styled quote with optional attribution. Different from a quote inside a markdown block — this one is decorative, for testimonials or pulled quotes.

The best product we've shipped in years. Our team went from monitoring 12 accounts to 47 in under a month.

— Sarah M., VP Engineering at Acme
- type: blockquote
  body: The best product we've shipped in years.
  attribution: Sarah M., VP Engineering at Acme
Next up

Grid components arrange your content — card grids, stat grids, before/after cards, definition lists.

GridsAll components