title: Grid components
shell: standard
components:
- type: breadcrumb
items:
- label: Home
href: ../index.html
- label: Components
href: index.html
- label: Grids
- type: header
title: Grid components
eyebrow: Reference
subtitle: card_grid, stat_grid, selectable_grid, before_after, split_compare, avatar_group, definition_list, role_map
- type: section
eyebrow: card_grid
heading: Responsive card grid
components:
- type: markdown
body: "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
cards:
- title: Acme Corp
badge:
label: Healthy
color: green
description: Enterprise - AWS us-east-1
links:
- label: View
href: "#"
- title: Beta Corp
badge:
label: At Risk
color: yellow
description: Mid-Market - Azure
links:
- label: View
href: "#"
- title: Gamma Inc
badge:
label: TBD
description: Enterprise - GCP
links:
- label: View
href: "#"
- type: code
language: yaml
code: |
- 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
...
- type: section
eyebrow: stat_grid
heading: Metric tiles
components:
- type: markdown
body: "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
- label: Revenue
value: $480K
detail: Weighted pipeline
color: default
- label: Churn
value: 3.2%
detail: Above 2% target
color: yellow
- type: code
language: yaml
code: |
- 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
...
- type: section
eyebrow: selectable_grid
heading: Click-to-select card grid
components:
- type: markdown
body: |
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
connector: dots_line
cards:
- eyebrow: Phase 1
title: Planning
bullets:
- Define success metrics
- Identify use cases
- eyebrow: Phase 2
title: Configuration
bullets:
- Connect integrations
- Configure scanning
- eyebrow: Phase 3
title: Optimization
bullets:
- Train the team
- Align workflows
- eyebrow: Phase 4
title: Ongoing
bullets:
- Expand use cases
- Roadmap alignment
- type: code
language: yaml
code: |
- 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
...
- type: section
eyebrow: before_after
heading: Transformation stack
components:
- type: markdown
body: "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
before: 3 engineers on platform work
after: 1 engineer
after_context: rest freed for product
- type: code
language: yaml
code: |
- 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
...
- type: section
eyebrow: avatar
heading: Profile / person
components:
- type: markdown
body: "Circular profile image with initials fallback. Four sizes - `sm`, `md`, `lg`, `xl`. Optional `subtitle` renders inline."
- type: columns
columns:
- - type: avatar
name: Sarah Martinez
size: sm
- - type: avatar
name: Marcus Thompson
size: md
- - type: avatar
name: Priya Shah
size: lg
- - type: avatar
name: Dev Menon
size: xl
- type: avatar
name: Sarah Martinez
size: md
subtitle: VP Engineering · Acme Corp
- type: code
language: yaml
code: |
- 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
- type: section
eyebrow: split_compare
heading: Side-by-side comparison panel
components:
- type: markdown
body: |
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
title: Manual review cycles
stats:
- label: Freshness tracking
value: hope-based
color: red
- label: Ownership
value: unclear
color: yellow
- label: Agent access
value: scrape HTML
color: red
right:
eyebrow: AFTER
title: Deterministic audits
stats:
- label: Freshness tracking
value: build-time checks
color: green
- label: Ownership
value: declared per page
color: green
- label: Agent access
value: MCP server
color: teal
- type: code
language: yaml
code: |
- 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
- type: section
eyebrow: avatar_group
heading: Overlapping avatar stack
components:
- type: markdown
body: "Stack of avatars with configurable overflow indicator. Great for team pages, attendee lists, or indicating shared ownership."
- type: avatar_group
size: md
max: 4
avatars:
- name: Sarah Martinez
- name: Marcus Thompson
- name: Priya Shah
- name: Dev Menon
- name: Juan Rodriguez
- name: Maya Chen
- type: code
language: yaml
code: |
- 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
- type: section
eyebrow: definition_list
heading: Term / definition pairs
components:
- type: markdown
body: "Native `<dl>` semantics - perfect for glossaries, API parameter references, acronym explainers."
- type: definition_list
items:
- term: ACV
definition: Annual contract value - total yearly revenue from a customer's signed contract.
- term: SLA
definition: Service level agreement - contractual uptime and performance guarantees.
- term: MTTR
definition: Mean time to resolve - average duration from incident detection to full resolution.
- type: code
language: yaml
code: |
- type: definition_list
items:
- term: ACV
definition: Annual contract value.
- term: SLA
definition: Service level agreement.
- type: section
eyebrow: role_map
heading: Persona jump-point grid
components:
- type: markdown
body: |
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: code
language: yaml
code: |
- type: role_map
title: Browse by team # optional heading above the grid
- type: markdown
body: "What the roles look like in `kazam.yaml`:"
- type: code
language: yaml
code: |
# 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
- type: callout
variant: info
title: Next up
body: Indicators add small signal to any page - badges, tags, status dots, progress bars, keyboard hints.
links:
- label: Indicators
href: indicators.html
variant: primary
- label: All components
href: index.html
variant: secondary