Featured Focal With Metric Trio Logos Block for React

Edit METRICS: each entry is a value and a label. Each figure is a term and its description in one list, so a screen reader hears "Uptime on bill-run days, 99.99%". The values sit in a bdi element so a sign or a unit stays in reading order in a right-to-left layout. The band is drawn for three.

Edit FLAGSHIP (the name and the tenure line) and MODULES (what the customer runs, as badges). The mark is a Lucide icon in a tinted square; swap it for the customer's own artwork at the same size. The tenure is written as a fixed past year, so it doesn't go stale.

A count of years since a date changes every year and goes stale in the page's source. The figures here are properties of the product, so they stay true until you change them.

Yes. The header is an h2, the modules are a list named "What Lakeshore runs on Millrace" and the figures are a description list. The flagship mark is hidden from assistive technology because the name beside it says the same. Nothing in the block is focusable.

The header, the card and the band fade up once when the page loads, with CSS transitions. With reduced motion the transitions are off and the section simply appears.

The card stacks its mark and name above the module badges, which wrap. The three figures take a row each, divided by hairlines, with the number at the start and its label at the end. Nothing scrolls sideways at 320 pixels.