Statement Metric Hero Logos Block for React

Edit the heading: each figure is a Highlight Text with its text, and the words between are plain text. The figures sit in bdi elements so a right-to-left layout keeps "12,000" and "60" in reading order inside the sentence. Change delay on each to stagger the marks, or remove the Highlight Text from one to mark only the other.

The primary colour marks one action per block, here the Shine Button. The marker is the text colour at 12% (MARKER at the top of the file), so it reads as a highlighter on any theme without competing with the button, and the text on it stays at full contrast. Pass any other CSS colour as highlightColor to change it.

It is a link (href="#"): point it at your customer stories or your pricing. It is a Shine Button, so a band of light sweeps across it once on hover and keyboard focus. The button renders the link it's given with render, with nativeButton={false}.

The highlighter is simply there, already drawn across both figures, and the section's entrance transition is off. A visitor without script sees the marks too. The text never depends on the animation: the sentence reads the same with or without the marker.

Edit CUSTOMERS: each entry is a name, an icon (any Lucide icon), a lettering and a mark. Keep it to six so every row of the tray is full at every width (two across, then three across). The names are fictional placeholders for your own customers, and each turns to the text colour on hover.

Yes. The panel has no dark scope, so it is light on a light page and dark on a dark one, and nothing in it is a fixed colour. The tinted shell, the ring and the shadow keep it separate from the page in both modes.