title: Components
shell: standard

components:
  - type: breadcrumb
    items:
      - label: Home
        href: ../index.html
      - label: Components

  - type: header
    title: Components
    eyebrow: Reference
    subtitle: 30 primitives organized by purpose. Each shows the YAML you write and the output.

  - type: card_grid
    cards:
      - title: Content
        badge:
          label: "8"
          color: default
        description: "header, meta, markdown, code, image, callout, blockquote, kbd"
        links:
          - label: Open →
            href: content.html

      - title: Grids
        badge:
          label: "6"
          color: default
        description: "card_grid, stat_grid, selectable_grid, before_after, avatar_group, definition_list"
        links:
          - label: Open →
            href: grids.html

      - title: Charts
        badge:
          label: new
          color: teal
        description: "pie, bar (vertical/horizontal), timeseries — inline SVG, themed, stackable"
        links:
          - label: Open →
            href: charts.html

      - title: Interactive
        badge:
          label: "3"
          color: default
        description: "table, tabs, accordion"
        links:
          - label: Open →
            href: interactive.html

      - title: Layout
        badge:
          label: "6"
          color: default
        description: "section, columns, divider, timeline, steps, progress_bar, empty_state"
        links:
          - label: Open →
            href: layout.html

      - title: Indicators
        badge:
          label: new
          color: teal
        description: "badge, tag, status, progress_bar, kbd, divider"
        links:
          - label: Open →
            href: indicators.html

      - title: Navigation
        badge:
          label: new
          color: teal
        description: "breadcrumb, button_group"
        links:
          - label: Open →
            href: navigation.html

  - type: section
    eyebrow: Every component shares a pattern
    heading: type + props
    components:
      - type: markdown
        body: |
          Every component in a page's `components:` list has a `type:` field (snake_case name)
          and its own property fields. Nothing else. Consistent shape makes LLM generation
          trivial — the model just picks the type and fills the props.

      - type: code
        language: yaml
        code: |
          components:
            - type: header              # required: the component type
              title: My Page            # component-specific props
              subtitle: optional
              eyebrow: optional

            - type: card_grid
              cards: [...]

            - type: markdown
              body: |
                free-form prose

  - type: callout
    variant: info
    title: Next up
    body: Start with content primitives — headers, markdown, code blocks, callouts, images. The building blocks every page uses.
    links:
      - label: Content components
        href: content.html
        variant: primary
      - label: See examples
        href: ../about.html
        variant: secondary