File: src/blocks/stats/Stats01.astro
Full-width stats band wrapping StatsGrid. Optional centered heading. Also used inside Hero01 / Hero02 when showStats is true.
Config (blocks.ts → stats)
stats: {
heading: "By the numbers",
subheading: "Outcomes from recent engagements.",
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 />Inline:
<Stats01
columns={4}
animate={false}
items={[
{ value: "50+", label: "Projects" },
{ value: "12", label: "Countries" },
]}
/>Props
| Prop | Config key | Notes |
|---|---|---|
sectionId |
— | Default "stats" |
heading |
stats.heading |
Optional; omit for band-only |
subheading |
stats.subheading |
|
items |
stats.items |
{ value, label }[] |
columns |
— | 2 | 3 | 4 (default 3) |
animate |
stats.animate |
Count-up animation |
duration |
stats.duration |
ms |
animateInView |
stats.animateInView |
Start when scrolled into view |
Also include: StatsGrid.astro. Returns null if items is empty.