StatsRow

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

StatsRow — a white card with the numbers in a row (<Stat value label />), on a muted band under a centered heading.

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
id	string
title	string
description	string
theme	Theme	'muted'

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

---
/**
 * StatsRow — a white card with the numbers in a row (<Stat value label />),
 * on a muted band under a centered heading.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  id?: string;
  title?: string;
  description?: string;
  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@38c294d9. Samples are demo content: the components are the real ones, the copy and the pictures are made up.