Counter Stats Hero Block for React

Edit STATS: each has a value, written as it should read (2.4B, 99.99%, 24/7), a label and a note that says what the value means, such as the period it covers. Four fill two rows of two on a phone and one row from the lg breakpoint; with three, change lg:grid-cols-4 to lg:grid-cols-3. Keep each note short and true: a number with its source and period is more convincing than a bigger one.

They're static: each value grows slightly into place as it fades in. To count, swap a value for our Counting Number with trigger="view", and keep the suffix beside it (<CountingNumber value={2.4} decimals={1} trigger="view" />B, or value={99.99} decimals={2} for the uptime). Screen readers then hear the final value, never the count, and with reduced motion the final value shows at once. Values that aren't plain numbers, like 24/7, stay as text.

Load the stats where your page gets its data and pass them in place of STATS, keeping the same shape. Round them the way people say them (2.4B, not 2,412,908,114), and refresh them on a schedule rather than on every view: a number that changes while someone reads it draws the eye away from the buttons.

Start sending free and See the status history are links (href="#"): point them at your sign-up page and your status page. Each button renders the link it's given with render, with nativeButton={false}.

They're a description list: each label is a term, and its value and note are its descriptions, so a screen reader hears "Uptime: 99.99%, over the last 12 months". On screen the value sits above its label, moved there with CSS order, so the reading order stays label first. Each value is in a bdi, so 2.4B keeps its suffix at the end in a right-to-left layout. The headline is the page's one h1.

The headline steps down from text-5xl to text-4xl, the buttons wrap below the text, and the four counters sit in two rows of two, their values a step smaller. Both buttons are on the first screen, and nothing scrolls sideways down to 320 px.