PageWeave/Design
llms.txt Contribute
Menu
Styles Themes Components Skills ↗ Prompts Guides Collections Changelog About

Components / Stats Strip

12 Component statsnumbersmetricsband .md

Stats Strip

Numbers as typography

Live preview — rendered in this site's theme Stats Strip

40+

Library items

100%

Markdown-first

7

Directions

0

Cookies

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 Copy-paste source

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