Split Panel Counter Stats Grid CTA Block for React

Edit STATS at the top of the file: each entry has an icon, a value, a label and the definition shown on the back. The grid holds four tiles in two columns; with an odd number the last one sits alone in its row.

Each tile holds two faces in the same grid cell, so it is always as tall as the taller one and nothing around it moves. The front is turned by a CSS 3D rotation with the back face hidden from behind, and the faces swap their inert state with it, so only the face you can see can be reached. The ruled cell around it never turns: it is a separate layer outside the flipping element. One open value holds the open tile, which is why opening a second turns the first back.

Yes. The front of a tile is a button whose name is its figure and label, with "show how it is measured" read after it. Pressing it moves focus to the Back button on the new face, which is named "Back to" and the label, and pressing Back returns focus to the tile's front. The hidden face is inert and hidden from assistive technology, so a screen reader only ever meets one face.

The tile doesn't rotate: the two faces swap with a short fade instead, and the entrance fade is off. The Shine Button's light fades in instead of sweeping. Everything else works the same.

No. They're plain text, readable the moment the page loads and in a screenshot. A count-up that nobody can pause only delays the number you came for.

Both are links (href="#"): point Start building at your sign-up and Read the methodology at the page that explains your numbers. Each button renders the link it's given with render, with nativeButton={false}.

The copy stacks above the grid, with a rule between them, and the grid keeps two columns until the screen is narrower than 26rem, where the tiles stack one per row so a definition has room to wrap. The cells are spaced a full gutter apart so their overshooting lines never touch. From the lg breakpoint the grid and the copy sit side by side, the grid at the start.