Stat Hero CTA Block for React

Edit FIGURE at the top of the file and the caption under it. The figure and its caption are one figure, so a screen reader hears them together. The outline is the real text, and the colour that floods it is a copy of it hidden from screen readers, so nothing is read twice.

When at least half of it has scrolled into view, once. Until then it's an outline in your text colour, which already reads at that size; the fill is only the finish. Without scripts the fill is shown from the start, and with reduced motion the figure fills at once instead of flooding.

Yes. Outline Text takes strokeColor, fillColor, strokeWidth, duration and fillFrom (bottom, top, start, end or the centre). The block keeps both to your text colour so any preset keeps its contrast, and the primary colour stays on the button.

Both are links (href="#"): point Start shipping free at your sign-up and Read the case studies at your stories. Each button renders the link it's given with render, with nativeButton={false}.

The two cells share a two-column grid from lg; the copy is first in the document, so it is read first, and the figure is placed in the start column. The divider is the copy cell's own border, with marks drawn by Guides where it meets the top rule. Below lg the cells stack and a Guides rule separates them.

It steps down from text-8xl to text-7xl, and below 26rem to text-5xl, so seven characters stay inside a 320 pixel screen without scrolling sideways. The two buttons wrap onto separate rows when they don't fit side by side.