Metric Split Logos Block for React

It is the first words of the h2: a large span holding a bdi, then a second span with the sentence. Change the text and keep the figure in its bdi, so the plus sign stays put in a right-to-left layout. Because the figure is part of the heading, a screen reader reads the whole claim in one go.

Six fill the column in every layout without a gap: six rows from lg, three rows of two on a phone and two rows of three at sm. The cells share their hairlines, so the wall has to fill every row, or the border colour shows through the empty cell. Keep CUSTOMERS at six, or any multiple of six.

Both are links (href="#"): point the Shine Button at your case studies and the outline button at your contact page. Each button renders the link it's given with render, with nativeButton={false}.

The page column carries no padding of its own: the figure's cell and the logo column each pad themselves, so the divider starts at the top rule and meets it at a + mark. On a phone, where the parts stack, a rule with its own marks sits between them instead.

Yes. The figure and its sentence are the h2, the customers are a list named "Customers" whose items are the company names (the icons are hidden from assistive technology), and the two buttons are real links with visible focus. The names use the theme's muted text colour at full strength, which passes WCAG AA on the page background.

The figure and the wordmark column fade up once when the page loads, with CSS transitions, and each wordmark's colour eases on hover. With reduced motion the transitions are off: the section simply appears.