Left Right CTA with Compliance Badges Block for React

Edit MARKS at the top of the file: a mark and a line of detail for each, in the order they're stamped. Each is a list item in a list named "Certifications", so a screen reader hears the four of them; the stamping is decoration over text that's always there. List only certifications you hold: the marks here are examples.

Each mark's text is a Stamp Text. The block keeps the number of marks that have landed, and starts the next one when the last character of the one before settles, so a mark can never overlap its neighbour. The boxes are all drawn from the start, with the waiting texts hidden, so nothing moves as they land. Each box keeps to the top of its cell, so the four marks line up. The four take about a second and a half in all.

With reduced motion the marks aren't animated: Stamp Text reports each one as complete at once, so all four are there straight away, still leaning a few degrees like a stamp pressed by hand. Without scripting the first mark is stamped by CSS alone and the other three are shown as plain text.

Both are links (href="#"): point Contact sales at your sales form and the security page at where your reports and policies live. Each renders the link it's given with render, with nativeButton={false}.

Below the lg breakpoint the text and the buttons sit above the cells, under a rule, and the cells stay two by two. The buttons wrap onto a second line when they don't fit, and nothing has a fixed width, so it reads down to a 320 px screen.

Use it when the certifications are the argument and you want the eye to land on them in turn. When each badge needs a sentence explaining what it covers, Centered Light Trust Row gives every one a tooltip.