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, avatar_group, definition_list
# ── card_grid ─────────────────────────────
- 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
...
# ── stat_grid ─────────────────────────────
- 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
...
# ── selectable_grid ───────────────────────
- 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
...
# ── before_after ──────────────────────────
- 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
...
# ── avatar ─────────────────────────────────
- 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
# ── avatar_group ───────────────────────────
- 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
# ── definition_list ────────────────────────
- 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: 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