Hero With Stats Block for React

Edit the STATS array at the top of the file: each figure has a value, a label, a period and a trend, twelve bar heights in percent. The value is text, so write it as you want it read, "2.4B", "99.99%" or "180 ms". tabular-nums gives every digit the same width. The figures here are samples for a fictional product: replace them with your own, and keep the period honest, since "in the last 30 days" is a claim. Four cells fill the two-by-two rail; for six, change the rail to grid-rows-3.

The figures are a description list (dl): each label is a term (dt) and its figure and period the descriptions (dd), so a screen reader pairs them, "Uptime, 99.99%, over the last 12 months". The figure is shown above its label, but the label comes first in the markup, as a reader expects; the order-* classes swap them on screen only. The trend bars are decoration, hidden from assistive technology. The headline is the page's one h1.

All three are links to #: point them at your status page, sign-up and documentation. On Base UI, each button renders its link with render={<a href="/signup" />} and nativeButton={false}.

Values such as "2.4B", "99.99%" and "24/7" mix digits with symbols, and in a right-to-left page the browser can reorder them, showing "7/24". <bdi> isolates each value, so it reads the same in every language direction while the grid itself mirrors. The bars keep dir="ltr", since a time series reads oldest to newest in every language.

They're static by design: a figure that starts at zero says, for a moment, that you have no users. If you want the motion, the CountingNumber component counts up to a value once it's in view, gives screen readers the final value and shows it at once under reduced motion; give it the number and keep the suffix ("B", "%") as text beside it. "24/7" stays text either way.

Below the lg breakpoint the copy comes first and the figures under it, behind a rule with + marks, two by two. The trend bars are hidden below sm so the cells stay short, and the figures drop to text-3xl. The headline wraps, balanced, at text-4xl, and the buttons wrap onto a second line if they don't fit on one.

Use figures when your numbers are the strongest proof you have: a large user base, a high uptime, a fast response time. Use customer logos when the names of the teams already on board say more than any figure. Before launch, when the figures would be small, use neither and lead with the product.