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, grid, box, connector, divider, timeline, steps, progress_bar, empty_state
# ── section ───────────────────────────────
- 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."
# ── columns ───────────────────────────────
- 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
# ── grid ──────────────────────────────────
- type: section
eyebrow: grid
heading: Explicit-placement grid
components:
- type: markdown
body: |
A CSS grid where each child says where it sits. `columns` is required,
`rows` and `gap` optional. Children are `{ col, row, colspan, rowspan, component }`
with 1-based `col`/`row`. Leave `col`/`row` off to auto-flow in order.
Cells size from the container, so a wide grid never pushes text off the page.
Validation errors on two children claiming the same cell, on a child
placed past `columns`/`rows`, and on grids nested more than 3 deep.
Any component can be a child, including another `grid` or a `box`.
- type: grid
columns: 3
gap: 12
children:
- col: 1
colspan: 3
component: { type: box, title: Spans all three columns, body: "`col: 1, colspan: 3`" }
- component: { type: box, title: Auto, body: First free cell. }
- component: { type: box, title: Auto, body: Next free cell. }
- component: { type: box, title: Auto, body: Last one. }
- type: code
language: yaml
code: |
- type: grid
columns: 3
gap: 12
children:
- col: 1
colspan: 3
component: { type: box, title: Spans all three, body: "..." }
- component: { type: box, title: Auto, body: First free cell. }
# ── box ───────────────────────────────────
- type: section
eyebrow: box
heading: Bordered panel with a title row
components:
- type: markdown
body: |
`title` on the left, uppercase `tag` on the right, markdown `body` below,
and optional nested `components`. Needs at least one of `body` or
`components`. `color` picks a semantic accent, `hex` overrides it with an
exact color, `border: dashed` marks a grouping band. Nest a `grid` inside
a `box` to get a bordered band of cells.
- type: grid
columns: 2
gap: 12
children:
- component:
type: box
title: Semantic accent
tag: Repeatable
color: teal
body: "`color: teal`. Bold and _italic_ render, so a dimmer trailing note is one underscore away."
- component:
type: box
title: Exact accent
tag: Model-driven
hex: "#7a3f8a"
body: "`hex: \"#7a3f8a\"`. Border, tag, and fill tint all derive from the one hex."
- colspan: 2
component:
type: box
title: A band
tag: Nested
hex: "#7a3f8a"
border: dashed
components:
- type: grid
columns: 3
gap: 8
children:
- component: { type: box, title: One, body: Inner cell. }
- component: { type: box, title: Two, body: Inner cell. }
- component: { type: box, title: Three, body: Inner cell. }
- type: code
language: yaml
code: |
- type: box
title: A band
tag: Nested
hex: "#7a3f8a"
border: dashed
components:
- type: grid
columns: 3
children:
- component: { type: box, title: One, body: Inner cell. }
# ── connector ─────────────────────────────
- type: section
eyebrow: connector
heading: Arrow between grid rows
components:
- type: markdown
body: |
A cell, not an edge. Fills whatever grid cell it sits in with a line and
an arrowhead, `direction: down` (default) or `right`. An optional `label`
sits on the line with the page background behind it. `color` or `hex`
recolor the line. Give it its own short grid row between two boxes.
- type: grid
columns: 1
gap: 10
children:
- component: { type: box, title: Scanner, body: Finds candidates. }
- component: { type: connector, label: candidate findings }
- component: { type: box, title: Investigation, hex: "#7a3f8a", body: Decides what is real. }
- type: code
language: yaml
code: |
- type: grid
columns: 1
children:
- component: { type: box, title: Scanner, body: Finds candidates. }
- component: { type: connector, label: candidate findings }
- component: { type: box, title: Investigation, body: Decides what is real. }
# ── timeline ──────────────────────────────
- 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
# ── event_timeline ────────────────────────
- 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
# ── tree ──────────────────────────────────
- 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"
# ── priority_queue ──────────────────────────────────
- type: section
eyebrow: priority_queue
heading: Priority queue
components:
- type: markdown
body: |
Renders a grouped list of items sorted by urgency, horizon, owner, or status.
Each item carries optional due and original_due dates. When a date slips
(due after original_due), the row shows the original date as context.
**group_by** controls bucketing: `urgency` (default) splits into
Overdue / This week / Next two weeks / Later / No date.
`horizon` collapses to Now / Next / Later. `none` renders a flat list
(agenda mode). `owner` and `status` group by those fields.
Items with `status: completed` are pulled out of their normal group and
collected into a **Done** section at the bottom, collapsed by default.
This keeps historical items visible without crowding active work.
Reuses `TreeStatus` for item status and `SemColor` for tag colors.
- type: priority_queue
title: Deployment tracker
show_counts: true
items:
- label: Deploy remaining stacks
detail: Terraform approach agreed. Not started since.
due: "2026-06-20"
owner: Jonathan
status: default
tags:
- label: Cohere
color: teal
- label: Blocks coverage
color: red
emphasis: true
- label: Finalize SSO configuration
due: "2026-07-28"
owner: Nathan
status: active
tags:
- label: Forge
color: teal
- label: Write runbook for on-call rotation
owner: Sarah
status: upcoming
tags:
- label: Acme
color: teal
- type: code
language: yaml
code: |
- type: priority_queue
title: Deployment tracker
group_by: urgency # urgency | horizon | owner | status | none
show_dates: true # default true
show_counts: true # default true
items:
- label: Deploy remaining stacks
detail: Terraform approach agreed.
due: "2026-06-20"
original_due: "2026-06-20"
owner: Jonathan
status: default # reuses TreeStatus
href: https://example.com/issue/123
tags:
- label: Cohere
color: teal # SemColor
- label: Blocks coverage
color: red
emphasis: true
# ── venn ──────────────────────────────────
- type: section
eyebrow: venn
heading: Two- or three-set venn (inline SVG)
components:
- type: markdown
body: "Native inline SVG - no charting library. One to three sets; per-set color flows through the same `color:` field as cards/badges. Optional `overlaps:` adds intersection labels at the centroid of the involved circles. Labels auto-shrink (13px down to 9px) and break onto up to three lines when they would overflow their region, so `INSPECTOR (8,726)` stays inside its circle. With two or more sets a toggle in the top-right flips between the diagram and a matrix table: sets as rows and columns, totals parsed from `NAME (count)` labels on the green diagonal, pairwise overlaps in yellow, and a teal `All 3` row for the triple overlap. `default_view: table` opens on the matrix."
- 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: venn
title: "Scanner coverage (opens on the matrix)"
default_view: table
sets:
- label: "INSPECTOR (8,726)"
color: teal
- label: "WIZ (908)"
color: green
- label: "QUALYS (3,241)"
color: yellow
overlaps:
- sets: [0, 1]
label: "412"
- sets: [0, 2]
label: "1,893"
- sets: [1, 2]
label: "203"
- sets: [0, 1, 2]
label: "87"
- type: code
language: yaml
code: |
- type: venn
title: "Scanner coverage"
default_view: venn # venn | table - toggle in the corner flips either way
sets:
- label: "INSPECTOR (8,726)" # "NAME (count)" feeds the matrix diagonal
color: teal # default | green | yellow | red | teal
- label: "WIZ (908)"
color: green
overlaps:
- sets: [0, 1] # indices into sets[]
label: "412"
# ── steps ─────────────────────────────────
- 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
# ── empty_state ────────────────────────────
- 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