Stacked Partner Logo Banner Block for React

Each wordmark is one Wordmark in the file: a tile (its children) and the lettering beside it. Replace the tile's icon and the name with your partner's logo as an img (give it an alt with the company's name and drop the aria-hidden on the tile), or an inline SVG that uses currentColor, so it follows the theme. Mind the brand's usage rules: most ask for clear space around the mark and a one-colour version on busy backgrounds.

A small circle with a multiplication sign, on top of the divider between the two cells (a vertical divider side by side, a horizontal one when they stack). It's decoration, hidden from screen readers; the lockup is a list named "Partners", so a screen reader hears both names, and the heading says how they relate. In right-to-left layouts the cross stays centred, because its offset mirrors.

Change grid-cols-2 to grid-cols-3 and add a third Wordmark; the dividers are divide-x, so they follow. Drop the cross, or move it to a gap of its own, because a single cross reads as "two companies" and the third would be left out of the sentence. Past three, use a logo block instead: this card is a lockup, not a wall.

To the page that explains the partnership: an announcement, an integration guide or a case study. The words say where it goes ("Read the partnership announcement"), not "Learn more". Keep the figures in the sentence true and dated by the page they come from; they sit in bdi so they stay in order in any direction.

The heading and sentence wrap in the centre, and in the lockup band the two wordmarks stack, one over the other, with the cross on the rule between them, so neither is cramped at 320 pixels. Nothing scrolls sideways.