Icon Left Alert Banner Block for React

Edit BUILDS at the top of the file: each entry is a label and a number of seconds. The heading's percentage is worked out from the slowest and the fastest, and each bar's width is its time as a share of the slowest, rounded, so there is nothing else to keep in step. Two entries is the design; more would need the bars' labels to share a narrower column.

The bars are decorative: they sit in aria-hidden boxes. The list around them is named "Median preview build time" and each row is a plain label and value ("Last week", "78 s"), so the numbers are all in the text. The heading and the sentence say the same thing in words.

The chip is a neutral tint on purpose: this is a plain announcement, not an alert about something wrong. If you want a status colour, put text-success or text-info on the icon and keep the text in your theme's foreground colours; never fill the chip with a status colour.

See the build report is a plain inline link (href="#"): point it at your report or changelog. It is underlined so it reads as a link without colour, and its arrow mirrors in right-to-left layouts.

Below lg the block is one column: the chip and text first, then the bars at the full width of the page column inside a bordered box. Each row keeps its label, bar and value on one line down to 320 pixels, and numbers are kept in reading order in a right-to-left layout.

Only the one-time fade-up of the whole block on load, which stops under reduced motion. The bars are static: they show a result, not a process.