> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Stats Strip

Numbers as typography

- Category: Components
- Tags: stats numbers metrics band

## Usage

A stats strip replaces testimonial carousels with verifiable numbers. Works on landing pages, about pages, annual reports.

## Rules

- Numbers in the display face at 3–5rem; captions in mono caps below.
- One glyph of accent per number (+, %) — never color whole numerals.
- `divide-x` hairlines between cells; borders top/bottom frame the band.
- Only real numbers. "0 cookies" is a flex; "99.9% uptime" must be measured.
- Even count of cells reads best (2 or 4); odd counts leave a ragged edge.

## HTML source

```html
<section class="border-y border-base-content/10">
  <div class="max-w-6xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 divide-x divide-base-content/10">
    <div class="py-10 px-6">
      <p class="text-4xl md:text-5xl font-medium tracking-tight" style="font-family:'Fraunces',serif">40<span class="text-primary">+</span></p>
      <p class="mt-2 font-mono text-[0.68rem] uppercase tracking-[0.16em] text-base-content/50">Library items</p>
    </div>
    <div class="py-10 px-6">
      <p class="text-4xl md:text-5xl font-medium tracking-tight" style="font-family:'Fraunces',serif">100<span class="text-primary">%</span></p>
      <p class="mt-2 font-mono text-[0.68rem] uppercase tracking-[0.16em] text-base-content/50">Markdown-first</p>
    </div>
    <div class="py-10 px-6">
      <p class="text-4xl md:text-5xl font-medium tracking-tight" style="font-family:'Fraunces',serif">7</p>
      <p class="mt-2 font-mono text-[0.68rem] uppercase tracking-[0.16em] text-base-content/50">Aesthetic directions</p>
    </div>
    <div class="py-10 px-6">
      <p class="text-4xl md:text-5xl font-medium tracking-tight" style="font-family:'Fraunces',serif">0</p>
      <p class="mt-2 font-mono text-[0.68rem] uppercase tracking-[0.16em] text-base-content/50">Cookies served</p>
    </div>
  </div>
</section>
```