Bento With Compliance Cells Logos Block for React

Edit STANDARDS at the top of the file: each entry is a name and a context line. The grid is drawn for four, two by two beside the story; a different count needs the grid's rows changed, and an odd count leaves an empty cell showing the hairline colour. List only a standard you actually hold, and keep the context line to one short sentence.

The marks of an audit body or a standards organisation are trademarked and licensed, so the block writes each standard's name in text with a check beside it. If you hold a licence to show a mark, put it where the check is. The names read the same to everyone, including screen readers.

Edit STORY: the customer's name, its industry badge, the figure and its label, the quote and who said it. Keep the quote to one sentence: on a phone the story has to end early enough that the four cells appear on the first screen. The figure is wrapped in a bdi element so a sign or a unit stays in reading order in a right-to-left layout.

Yes. The header is an h2, the quote is a blockquote in a figure with a figcaption, and the standards are a list named "Compliance standards" with each standard as an h3. The checks, the flagship mark and the initials are hidden from assistive technology, because the text says the same thing. Nothing in the block is focusable.

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

One column: the story first, then the four standards two by two with tighter padding. Nothing scrolls sideways at 320 pixels.