Inset Featured Focal Logos Block for React

Edit FLAGSHIP for the plate, wordmark and tenure, and the figure and its sentence in the panel for the number. The headline and the bold lead sentence name the customer and the figure too, so change them together.

Edit INTEGRATIONS: each entry is a wordmark (name, icon, lettering, mark) and a syncs line. The rows fill the height of the panel side by side with them, so six rows are at home beside the panel; fewer rows get taller, more get tighter. Keep the syncs lines to a few words, or a row wraps to a second line.

The status is a coloured dot and the word beside it. The dot is decoration and hidden from assistive technology, and the word is what is read, so to show another state change both: use Status with variant="warning" and a word such as "Paused". The sample data says Live for all six.

The two halves are a grid from lg, the second half drawing a solid divider on its start side with + marks where it meets the rails. The padding sits on the halves, not the column, so the divider reaches the top rule. Below lg the divider is a rule across the top of the rows instead.

Yes. The header is an h2; the flagship panel is a card with its name as an h3; the integrations sit under an h3, "Integrations", as a list with each company's name as text, what it syncs and its status in words. The icons and dots are hidden from assistive technology.

The panel and the rows fade up once when the page loads, with CSS transitions, and each wordmark eases to the text colour when its row is hovered. With reduced motion the transitions are off.