Statpopular
apps/www/src/sections/Stat.astro · 24 lines · group Stats
Stat — one number of <StatsBanner>, <StatsSplit> or <StatsRow>: the value, its label and an optional detail line. The look follows the parent. No children.
In the fleet
Used on 2 sites built with this engine.
Samples 1
<StatsBanner>
IN NUMBERS
Measured, not estimated
Every figure below comes from stations that are running right now, in orchards, greenhouses and open fields.
MDX of this sample
<StatsBanner
kicker="IN NUMBERS"
title="Measured, not estimated"
description="Every figure below comes from stations that are running right now, in orchards, greenhouses and open fields."
image="photo-wide-03.jpg"
primaryText="See the coverage"
primaryHref="/coverage/"
>
<Stat value=">3 000" label="stations installed" detail="from a single greenhouse to a forty-field estate" />
<Stat value="99,4%" label="uptime last season" detail="counted per station, not per network" />
<Stat value="8 yrs" label="of readings" detail="the oldest station still reporting today" />
<Stat value="14" label="countries" detail="wherever the crop and the frost meet" />
</StatsBanner>Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| value | string | yes | the figure, as text: "12", "99.9%", "300+" | |
| label | string | yes | what the figure is, a few words | |
| detail | string | a smaller line under the label |
Source apps/www/src/sections/Stat.astro @ gitt.one
---
/**
* Stat — one number of <StatsBanner>, <StatsSplit> or <StatsRow>: the value,
* its label and an optional detail line. The look follows the parent. No
* children.
*/
interface Props {
/** the figure, as text: "12", "99.9%", "300+" */
value: string;
/** what the figure is, a few words */
label: string;
/** a smaller line under the label */
detail?: string;
}
const { value, label, detail } = Astro.props;
---
<div class="flex flex-col p-6 text-center [dl[data-variant=banner]_&]:p-0 [dl[data-variant=banner]_&]:text-left [dl[data-variant=split]_&]:border-t-2 [dl[data-variant=split]_&]:border-gray-100 [dl[data-variant=split]_&]:p-0 [dl[data-variant=split]_&]:pt-6 [dl[data-variant=split]_&]:text-left">
<dt class="order-2 mt-2 text-lg font-medium text-gray-500 [dl[data-variant=banner]_&]:mt-1 [dl[data-variant=banner]_&]:text-base [dl[data-variant=banner]_&]:text-gray-300">
{label}{detail && <span class="block text-base font-normal [dl[data-variant=banner]_&]:text-gray-300">{detail}</span>}
</dt>
<dd class="order-1 text-5xl font-extrabold text-primary-600 [dl[data-variant=banner]_&]:text-2xl [dl[data-variant=banner]_&]:font-bold [dl[data-variant=banner]_&]:text-white [dl[data-variant=split]_&]:text-3xl">{value}</dd>
</div>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.