title: Layout components
shell: standard
components:
- type: breadcrumb
items:
- label: Home
href: ../index.html
- label: Components
href: index.html
- label: Layout
- type: header
title: Layout components
eyebrow: Reference
subtitle: section, columns, divider, timeline, steps, progress_bar, empty_state
- type: section
eyebrow: section
heading: Grouping with a heading
components:
- type: markdown
body: |
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`.
- type: section
eyebrow: Example section
heading: Platform health
components:
- type: stat_grid
columns: 3
stats:
- label: Uptime
value: 99.9%
color: green
- label: Errors
value: "0.02%"
color: green
- label: Latency p95
value: 140ms
color: default
- type: markdown
body: "Everything above lives inside this section."
- type: code
language: yaml
code: |
- type: section
eyebrow: Example section
heading: Platform health
components:
- type: stat_grid
stats: [...]
- type: markdown
body: "Everything above lives inside this section."
- type: section
eyebrow: columns
heading: Multi-column row
components:
- type: markdown
body: "Distribute components into equal-width columns. Each column is itself a list of components."
- type: markdown
body: "**Default** — columns stretch at the grid level, contents sit at natural height:"
- type: columns
columns:
- - type: callout
variant: info
title: Left
body: "Arbitrary components live inside each column."
- - type: callout
variant: success
title: Center
body: "Even widths, responsive collapse on narrow screens. One more line here so heights diverge."
- - type: callout
variant: warn
title: Right
body: "Great for comparison layouts. Extra line here. And another."
- type: markdown
body: "**`equal_heights: true`** — children grow to fill their column so all three look balanced:"
- type: columns
equal_heights: true
columns:
- - type: callout
variant: info
title: Left
body: "Arbitrary components live inside each column."
- - type: callout
variant: success
title: Center
body: "Even widths, responsive collapse on narrow screens. One more line here so heights diverge."
- - type: callout
variant: warn
title: Right
body: "Great for comparison layouts. Extra line here. And another."
- type: code
language: yaml
code: |
- 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
- type: section
eyebrow: timeline
heading: Horizontal phase tracker
components:
- type: markdown
body: "A horizontal row of phases with status indicators. Each item is `completed`, `active`, or `upcoming`. No interaction — purely visual progress."
- type: timeline
items:
- name: Planning
status: completed
- name: Configuration
status: completed
- name: Optimization
status: active
- name: Ongoing
status: upcoming
- type: code
language: yaml
code: |
- type: timeline
items:
- name: Planning
status: completed # completed | active | upcoming
- name: Configuration
status: completed
- name: Optimization
status: active
- name: Ongoing
status: upcoming
- type: section
eyebrow: event_timeline
heading: Vertical event history with severity filter
components:
- type: markdown
body: "Vertical chronology with date, severity badge, and optional source/link per event. Each event collapses into a `<details>` body when a `summary` is provided. With `show_filter_toggle: true` a Major-only / All toggle appears at the top — useful for noisy histories where the reader wants the big picture first."
- type: event_timeline
default_filter: major
show_filter_toggle: true
events:
- date: 2026-04-27
severity: major
title: "Weekly sync — Jira asset model confirmed"
summary: "Working session booked Tuesday 3 PM CT. Two automation rules: create-new + append-to-existing."
source: granola
link: https://example.com/notes
- date: 2026-04-27
severity: minor
title: "ANSYS-322 → Done"
source: linear
link: https://example.com/issue
- date: 2026-04-25
severity: major
title: "First production run — 76.5% noise reduction"
summary: |
2,316 investigations across the EKS cluster. High-severity findings dropped from 3,000 to 222.
source: portal
- date: 2026-04-22
severity: info
title: "Cadence moved to Thursdays at 1 PM CT"
source: calendar
- date: 2026-04-20
severity: minor
title: "GitHub app installed for the org"
source: slack
- type: code
language: yaml
code: |
- type: event_timeline
default_filter: major # major | all (default: all)
show_filter_toggle: true # default: false
events:
- date: 2026-04-27
severity: major # major | minor | info (default: minor)
title: "Weekly sync — Jira asset model confirmed"
summary: |
Working session booked Tuesday 3 PM CT.
source: granola
link: https://example.com/notes
- date: 2026-04-27
severity: minor
title: "ANSYS-322 → Done"
source: linear
link: https://example.com/issue
- type: section
eyebrow: tree
heading: Nested status tree
components:
- type: markdown
body: "Recursive nested list with per-node status (`completed` / `active` / `blocked` / `upcoming` / default). Each node renders a status glyph + label, an optional inline note, and any number of children. The optional filter toggle lets the reader cut the view to **Incomplete only** (hides completed nodes) or **Blocked only** (shows blocked nodes plus their ancestor chain so the path-to-root keeps context)."
- type: tree
show_filter_toggle: true
default_filter: all
nodes:
- label: "Phase 1 — Planning"
status: completed
children:
- label: Identify stakeholders
status: completed
- label: Determine deployment method (CFN or Terraform)
status: completed
- label: Identify scanner integrations
status: completed
- label: "Phase 2 — Initial Configuration"
status: active
children:
- label: Generate External ID
status: completed
- label: Deploy Maze stack
status: blocked
note: "Waiting on production change-window approval"
- label: Connect vulnerability scanner
status: upcoming
- label: Add initial admin users
status: upcoming
- label: "Phase 3 — Review and Validate"
status: upcoming
- type: code
language: yaml
code: |
- type: tree
default_filter: all # all (default) | incomplete | blocked
show_filter_toggle: true # default: false
nodes:
- label: "Phase 1 — Planning"
status: completed # default | completed | active | blocked | upcoming
children:
- label: Identify stakeholders
status: completed
- label: Deploy Maze stack
status: blocked
note: "Waiting on change-window approval"
- type: section
eyebrow: venn
heading: Two- or three-set venn (inline SVG)
components:
- type: markdown
body: "Native inline SVG — no JS, no charting library. Two-set or three-set diagrams supported; per-set color flows through the same `color:` field as cards/badges. Optional `overlaps:` adds intersection labels at the centroid of the involved circles. Renders crisp at any size and inherits theme tokens, so a light/dark theme swap just works."
- type: columns
equal_heights: true
columns:
- - type: venn
title: "Two-set"
sets:
- label: Frontend
color: teal
- label: Backend
color: red
overlaps:
- sets: [0, 1]
label: APIs
- - type: venn
title: "Three-set"
sets:
- label: Eng
color: teal
- label: Product
color: green
- label: Design
color: yellow
overlaps:
- sets: [0, 1]
label: Specs
- sets: [0, 2]
label: UX bugs
- sets: [1, 2]
label: Mockups
- sets: [0, 1, 2]
label: Roadmap
- type: code
language: yaml
code: |
- type: venn
title: "Team overlap"
sets:
- label: Frontend
color: teal # default | green | yellow | red | teal
- label: Backend
color: red
overlaps:
- sets: [0, 1] # indices into sets[]
label: APIs
- type: section
eyebrow: steps
heading: Numbered or bulleted steps
components:
- type: markdown
body: "Ordered list of cards with title + optional detail. Numbered by default; set `numbered: false` for bullets."
- type: steps
items:
- title: Install the binary
detail: Build from source with cargo build --release.
- title: Create a site directory
detail: Any directory of .yaml files — kazam walks it recursively.
- title: Run dev mode
detail: kazam dev ./my-site watches and live-reloads at localhost:3000.
- type: code
language: yaml
code: |
- 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
- type: section
eyebrow: empty_state
heading: Zero-data placeholder
components:
- type: markdown
body: "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."
- type: empty_state
title: No customers yet
body: Add your first customer to see them here with health badges, deployment guides, and meeting agendas.
action:
label: Add customer
href: "#"
- type: empty_state
title: All caught up
icon: check-circle
body: Zero open issues in this portfolio.
- type: code
language: yaml
code: |
- 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
- type: callout
variant: info
title: Next up
body: Navigation components thread pages together — breadcrumbs on deep pages, button groups for primary CTAs.
links:
- label: Navigation
href: navigation.html
variant: primary
- label: All components
href: index.html
variant: secondary