Skip to content
BaseLayer Themes

Stats 01

Animated stats row with optional heading

Live preview

Stats

Here are the stats subheader.

0+
Years experience
0+
Projects shipped
0%
Client satisfaction

File: src/blocks/stats/Stats01.astro

Stats band built on StatsGrid. Supports count-up animation when the block enters the viewport.

Config (blocks.ts → stats)

stats: {
    width: "standard",
    heading: "Stats",
    subheading: "Here are the stats subheader.",
    animate: true,
    duration: 1000,
    animateInView: true,
    items: [
      { value: "8+", label: "Years experience" },
      { value: "40+", label: "Projects shipped" },
      { value: "100%", label: "Client satisfaction" },
    ],
  },

Add to a page

---
import Stats01 from "@/blocks/stats/Stats01.astro";
---

<Stats01 />

Props override matching keys from config:

<Stats01
  heading="Custom headline"
/>

Props

Prop Config key Type / values Default / notes
sectionId — string Default "stats"; DOM id for the section; not in config
heading stats.heading string —
subheading stats.subheading string —
items stats.items Array of { value: string, label: string } Content list for this block
columns — (prop) 2 | 3 | 4 Stat grid column count
animate stats.animate boolean Animate numeric stat values
duration stats.duration number Count-up duration in ms
animateInView stats.animateInView boolean Start animation when the block enters the viewport

Also include: StatsGrid.astro.

← Stats versions · Blocks overview