StatsRow

apps/www/src/sections/StatsRow.astro · 34 lines · group Stats

StatsRow — a white card with the numbers in a row (<Stat>), on a muted band under a centered heading. Use for: three headline figures — "12 years, 300 projects, 40 people" — as a light divider between sections. Not for: figures that need a story or a photo beside them (<StatsSplit>, <StatsBanner>). Children: <Stat> tags; THREE fit the card (it has three columns on desktop), fewer leave it uneven.

In the fleet

Used on 1 site built with this engine.

Samples 1

sample

A season in three numbers

What one estate recorded with eleven stations.

stations: 11
readings: 1,2 M
alerts that mattered: 19

MDX of this sample

<StatsRow title="A season in three numbers" description="What one estate recorded with eleven stations.">
  <Stat value="11" label="stations" />
  <Stat value="1,2 M" label="readings" />
  <Stat value="19" label="alerts that mattered" />
</StatsRow>

Props

Name	Type	Default	Description
id	string		anchor of the section
title	string		the section heading
description	string		a paragraph under the heading
theme	'light' \| 'muted' \| 'dark' \| 'brand' \| 'brand-dark'	'muted'	background of the band (default "muted")

Source apps/www/src/sections/StatsRow.astro @ gitt.one

---
/**
 * StatsRow — a white card with the numbers in a row (<Stat>), on a muted band
 *   under a centered heading.
 *
 * Use for: three headline figures — "12 years, 300 projects, 40 people" — as a
 *   light divider between sections.
 * Not for: figures that need a story or a photo beside them (<StatsSplit>,
 *   <StatsBanner>).
 * Children: <Stat> tags; THREE fit the card (it has three columns on desktop),
 *   fewer leave it uneven.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  /** anchor of the section */
  id?: string;
  /** the section heading */
  title?: string;
  /** a paragraph under the heading */
  description?: string;
  /** background of the band (default "muted") */
  theme?: Theme;
}
const { id, title, description, theme = 'muted' } = Astro.props;
---

<Section id={id} title={title} description={description} theme={theme}>
  <dl class="mx-auto grid max-w-4xl grid-cols-1 divide-y divide-gray-100 rounded-lg bg-white text-gray-900 shadow-lg sm:grid-cols-3 sm:divide-x sm:divide-y-0" data-variant="row">
    <slot />
  </dl>
</Section>

Source links point to engine-astro@7b686388. Samples are demo content: the components are the real ones, the copy and the pictures are made up.