Ring Chart Metric Logos Block for React

Change RENEWAL at the top of the file. The ring's arc takes it as its value and the number in the ring's middle prints the same constant, so they cannot disagree. Edit the caption under the ring and the sentence in the header to say what the percentage measures.

The ring itself is a drawing and is hidden from assistive technology. What it says is text: the figure's caption reads "of teams renew after year one" and the big number sits inside the same figure, so the percentage and what it measures are read together. The three facts are a description list, each label with its value.

Circular Progress draws its arc in the primary colour by default. This block overrides it to the text colour and its track to the text colour at 15%, because the primary colour marks one action per block, and the ring reads better as a quiet figure than as a call to action.

The facts are FACTS: each entry is a label and a value, written with their units ("2 days", "97%"). The customers are CUSTOMERS: each is a name, an icon (any Lucide icon), a lettering and a mark. Keep the strip at six so its rows are full at two, three and six across. The names are fictional placeholders.

It becomes one column in this order: the header, the ring in its frame, then the facts. A hairline with + marks rules the ring off from the header, and the strip below is two across. The split divider appears from lg, where the claim and the facts are on one side and the ring is on the other.

The strip ends the block. The next section draws its own top rule along the strip's foot, so a line here would double it, and the column has no bottom padding for the same reason.