Reference

Grid components

card_grid, stat_grid, selectable_grid, before_after, avatar_group, definition_list

card_grid

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).

Acme Corp

Healthy

Enterprise — AWS us-east-1

View

Beta Corp

At Risk

Mid-Market — Azure

View

Gamma Inc

TBD

Enterprise — GCP

View
- 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

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).

Active Users
1,284
Up 12% MoM
Revenue
$480K
Weighted pipeline
Churn
3.2%
Above 2% target
- 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

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
      ...
before_after

Transformation stack

Stack of before/after cards with a highlighted metric. Designed for QBR-style 'what changed' storytelling.

Deployment time
Before: Manual process, 2 weeks per release
Now: 4 hours fully automated pipeline
Team size
Before: 3 engineers on platform work
Now: 1 engineer rest freed for product
- 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

Profile / person

Circular profile image with initials fallback. Four sizes — sm, md, lg, xl. Optional subtitle renders inline.

SM
MT
PS
DM
SM
Sarah Martinez
VP Engineering · Acme Corp
- 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

Overlapping avatar stack

Stack of avatars with configurable overflow indicator. Great for team pages, attendee lists, or indicating shared ownership.

SM
MT
PS
DM
+2
- 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

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.
Next up

Indicators add small signal to any page — badges, tags, status dots, progress bars, keyboard hints.

IndicatorsAll components