Grid components
card_grid, stat_grid, tier_summary, health_breakdown, selectable_grid, before_after, split_compare, avatar_group, definition_list, role_map
Responsive card grid
The bread-and-butter component. Each card has a title, optional badge, description, and set of links. Grid auto-fills based on min_width (default 320px).
- type: card_grid
min_width: 320 # optional, default 320
cards:
- title: Acme Corp
badge:
label: Healthy
color: green # green | yellow | red | default
description: Enterprise - AWS us-east-1
links:
- label: View
href: /acme
- title: Beta Corp
...
Metric tiles
A row of big numbers with labels and optional detail. Each stat gets a colored top accent. Use columns: to set how many fit per row (default 3).
- type: stat_grid
columns: 3
stats:
- label: Active Users
value: "1,284"
detail: Up 12% MoM
color: green # green | yellow | red | default
- label: Revenue
value: $480K
...
Click-to-select card grid
Interactive grid - clicking a card selects it and (by default) dims the others. Useful for phase trackers, decision trees, multi-step explainers.
Options: interaction is single_select (default), multi_select, or none. connector is none (default) or dots_line to add a numbered dots row across the top.
- type: selectable_grid
interaction: single_select # single_select | multi_select | none
connector: dots_line # none | dots_line
cards:
- eyebrow: Phase 1
title: Planning
bullets:
- Define success metrics
- Identify use cases
- eyebrow: Phase 2
...
Transformation stack
Stack of before/after cards with a highlighted metric. Designed for QBR-style 'what changed' storytelling.
- type: before_after
items:
- title: Deployment time
before: Manual process, 2 weeks per release
after: 4 hours
after_context: fully automated pipeline
- title: Team size
...
Profile / person
Circular profile image with initials fallback. Four sizes - sm, md, lg, xl. Optional subtitle renders inline.
- type: avatar
name: Sarah Martinez # initials fallback
src: /avatars/sarah.png # optional image
size: md # sm | md | lg | xl
subtitle: VP Engineering # optional inline text
Side-by-side comparison panel
Two panels side by side - left for the current/bad state, right for the improved state. Each panel has an optional eyebrow, a headline, and a list of stat rows with colored values. Good for landing pages, before/after comparisons, and competitive positioning.
- type: split_compare
left:
eyebrow: BEFORE # optional - uppercase label above title
title: Manual review cycles
stats:
- label: Freshness tracking
value: hope-based
color: red # default | green | yellow | red | teal
right:
eyebrow: AFTER
title: Deterministic audits
stats:
- label: Freshness tracking
value: build-time checks
color: green
Overlapping avatar stack
Stack of avatars with configurable overflow indicator. Great for team pages, attendee lists, or indicating shared ownership.
- type: avatar_group
size: md
max: 4 # overflow shows "+N"
avatars:
- name: Sarah Martinez
- name: Marcus Thompson
- name: Priya Shah
- name: Dev Menon
- name: Juan Rodriguez
Term / definition pairs
Native <dl> semantics - perfect for glossaries, API parameter references, acronym explainers.
- ACV
- Annual contract value - total yearly revenue from a customer's signed contract.
- SLA
- Service level agreement - contractual uptime and performance guarantees.
- MTTR
- Mean time to resolve - average duration from incident detection to full resolution.
- type: definition_list
items:
- term: ACV
definition: Annual contract value.
- term: SLA
definition: Service level agreement.
Tier summary
One card per tier, side by side: a swatch, the tier label, a big count, and an optional share bar (share is 0-100 and shows as given, so 8.4 stays 8.4%). A count of 0 gets a hollow swatch. active: true gives a card the accent border. Leave color off and tiers take accent shades by position: solid, 62%, 32%, then hollow.
Give a tier accounts and the card becomes a button: clicking it opens a panel under the row listing each account with its ARR and renewal date, soonest first. Renewals under 90 days out get a "in N days" note. ?tier=<label> in the URL opens a tier on load (?tier.<id>= when the component has an id). A tier with href links instead of expanding. Without JS, and in print, every panel shows.
- LarkspurRenewal$95K · 7.3%Renews Nov 2, 2026
- Cohere HealthAdopted$71K · 5.5%Renews Mar 3, 2027
- type: tier_summary
count_label: accounts # default "accounts"
share_label: ARR # unit after the dollars; without value it labels the bar
tiers:
- label: Outstanding
count: "6"
value: $406K # optional; leads the share row as "$406K ARR"
share: 31.2 # optional, 0-100
detail: Cohere Health # optional muted line
color: teal # optional; unset = accent shade by position
href: ./tier-outstanding # optional; card links, never expands
active: false
accounts: # optional; card opens a panel
- name: Cohere Health
value: $71K
share: 5.5 # optional % of total ARR
renewal: 2027-03-03
detail: Adopted
href: ./cohere
color: teal # defaults to the tier color
Health breakdown
One card per health dimension: the label, the tier it lands in (swatch plus mono name), and the rule behind it. value shows before the detail. Color with color: (semantic) or shade: 1-4 (accent solid, 62%, 32%, hollow).
- type: health_breakdown
id: account-health
items:
- { label: Noise reduction, tier: Outstanding, shade: 1, detail: 50% or more of findings auto-triaged }
- { label: License utilization, tier: Okay, shade: 3, detail: "20 to 35% of assets investigated, 30 days" }
- { label: User activity, tier: Good, shade: 2, detail: "Portal stickiness 0.5 or more, seen this week" }
- { label: Sentiment, tier: Good, shade: 2, detail: "Positive relationship, responsive" }
Persona jump-point grid
Renders the roles: config from kazam.yaml as a grid of clickable cards. Each role becomes a card with label, description, and optional icon. Add href to each role in your site config to make the cards link to section landing pages. No per-page configuration needed - it reads directly from the site config.
- type: role_map
title: Browse by team # optional heading above the grid
What the roles look like in kazam.yaml:
# In kazam.yaml
roles:
- id: engineering
label: Engineering
description: "Dev setup, infrastructure, workflows"
icon: code # optional
href: /engineering # optional - makes the card clickable
- id: ops
label: Ops
description: "People ops, hiring, admin"
href: /ops
Indicators add small signal to any page - badges, tags, status dots, progress bars, keyboard hints.