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
