Metric Hero Strip Logos Block for React

The big number is written in the markup, in a bdi element so a right-to-left layout keeps "2.4M" in reading order. The three secondary figures are FIGURES at the top of the file: each entry is a label and a value. Each is a term and its value in one description list, with the label under the number, so a screen reader hears "Brands running a program, 1,800".

Because this block's number is meant to read at once: it sits near the top of a page, and a count that is still rolling when someone glances at it shows the wrong figure. If you want a number that rolls, use the animated counter block, which counts once when it scrolls into view and shows its final value with reduced motion.

Both are links (href="#"): point See the programs at your product page and Talk to sales at your contact form. See the programs is a Shine Button, the block's one primary control, so a band of light sweeps across it once on hover and keyboard focus. Each button renders the link it's given with render, with nativeButton={false}.

Edit CUSTOMERS: each entry is a name, an icon (any Lucide icon), a lettering and a mark. Keep it to eight so every row of the strip is full, or any number that divides by 2 and by 4. The names are fictional placeholders for your own customers, and each turns to the text colour on hover.

The header stacks, the buttons wrap onto separate rows when they do not fit side by side, and the number steps down from text-8xl to text-7xl. The three figures take a row each, the label at the start and the value at the end, and the strip is two across. Nothing scrolls sideways at 320 pixels.

The strip ends the block. The next section draws its own top rule along the strip's foot, so a line here would double it, and the column has no bottom padding for the same reason.