Composites & Sections · 10 Props

Stats

Numeric statistics display with large numbers, labels, and optional icons. Use for KPIs, counters, or social proof metrics.

Composites & Sections 10 Props

src/components/blocks/Stats.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
items *	object[]	—
items[].label *	string	—
items[].note	string	—
items[].tone	string	—	"primary" \| "accent" \| "neutral"
items[].value *	string	—
animate	boolean	false	Enable count-up animation on scroll into view.
cardClass	string	—
class	string	—
eyebrow	string	—
gridClass	string	—
id	string	—
subtitle	string	—
title	string	—
variant	string	default	"minimal" \| "default" \| "compact" \| "highlight"

Beispiele

Default

Key metrics in a horizontal grid.

Projects delivered

150+

Uptime SLA

99.9%

Avg. load time

<1s

Client rating

4.9/5

{
  "type": "stats",
  "props": {
    "items": [
      {
        "value": "150+",
        "label": "Projects delivered"
      },
      {
        "value": "99.9%",
        "label": "Uptime SLA"
      },
      {
        "value": "<1s",
        "label": "Avg. load time"
      },
      {
        "value": "4.9/5",
        "label": "Client rating"
      }
    ]
  }
}

<Stats items={[{"value":"150+","label":"Projects delivered"},{"value":"99.9%","label":"Uptime SLA"},{"value":"<1s","label":"Avg. load time"},{"value":"4.9/5","label":"Client rating"}]} />