> ## Documentation Index
> Fetch the complete documentation index at: https://docs.olonjs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Stats Band section — key metrics highlight strip

> The Stats Band section displays a horizontal band of labeled numeric stats with icons. Use it to highlight key metrics or quantified features.

The `stats-band` section renders a horizontal strip of stat items, each combining an icon, a bold numeric or short value, and a descriptive label. It is designed to communicate impact at a glance — think "8 essays published", "6 topics", "14 post-to-tag links".

Use `stats-band` after an introductory section (such as `hero` or `content-block`) to anchor abstract claims with concrete numbers. It works equally well on marketing pages and technical demo pages.

***

## Data fields

<ParamField body="label" type="string">
  An eyebrow label rendered above the section title — for example `"The journal in numbers"`. Optional.
</ParamField>

<ParamField body="title" type="string">
  The section heading — for example `"Small, deliberate, linked"`. Optional. Omit it when the stat items are self-explanatory and you want a more minimal, data-focused layout.
</ParamField>

<ParamField body="stats" type="StatSchema[]" required>
  An ordered array of stat objects. Each item renders as one stat cell in the band. Include between two and six items for the best layout across screen sizes.

  Each stat object has the following fields:

  <ParamField body="id" type="string" required>
    A unique identifier for this stat — for example `"stat-posts"`. Used as the React key. Keep it stable across edits.
  </ParamField>

  <ParamField body="icon" type="string">
    The name of a [Lucide React](https://lucide.dev/icons/) icon to render alongside the stat value — for example `"pen-line"`, `"tag"`, `"sparkles"`, or `"users"`. Optional. Pass the kebab-case icon name exactly as listed in the Lucide icon directory.
  </ParamField>

  <ParamField body="value" type="string" required>
    The primary metric displayed in large type — typically a number (`"8"`, `"14"`) but can be any short string (`"99%"`, `"< 1 ms"`). Keep it short: one to six characters renders best.
  </ParamField>

  <ParamField body="label" type="string" required>
    A short description that explains what the value measures — for example `"Essays published, each in a posts collection entry"`. One sentence or phrase.
  </ParamField>
</ParamField>

<Tip>
  Browse the full Lucide icon set at [lucide.dev/icons](https://lucide.dev/icons/). Use the kebab-case name shown under each icon — for example the icon named "Pen Line" is passed as `"pen-line"`.
</Tip>

***

## Settings fields

<ParamField body="paddingTop" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied above the section.
</ParamField>

<ParamField body="paddingBottom" type="&#x22;none&#x22; | &#x22;sm&#x22; | &#x22;md&#x22; | &#x22;lg&#x22; | &#x22;xl&#x22;">
  Vertical padding applied below the section.
</ParamField>

***

## JSON example

The following example is taken from `home.json`:

```json theme={null}
{
  "id": "home-stats",
  "type": "stats-band",
  "data": {
    "label": "The journal in numbers",
    "title": "Small, deliberate, linked",
    "stats": [
      {
        "id": "stat-posts",
        "icon": "pen-line",
        "value": "8",
        "label": "Essays published, each in a posts collection entry"
      },
      {
        "id": "stat-tags",
        "icon": "tag",
        "value": "6",
        "label": "Topics in the tags collection"
      },
      {
        "id": "stat-relations",
        "icon": "sparkles",
        "value": "14",
        "label": "Post-to-tag links resolved at render time"
      },
      {
        "id": "stat-authors",
        "icon": "users",
        "value": "4",
        "label": "Writers behind the desk"
      }
    ]
  },
  "settings": {}
}
```

***

## Used on pages

`stats-band` is a supporting section used to add quantified credibility after introductory copy:

| Page | Position |
| - | - |
| Home (`home.json`) | After the posts list — reinforces demo scale |
| About (`about.json`) | After the content block — quantifies the architecture |

Place `stats-band` in the middle of a page, between narrative and conversion sections — it rarely works as a first or last section.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.