Mission Pillars About Block for React

Edit PILLARS at the top of the file: each pillar has a numeral, a title, a description and its initiatives, each with a label and a done flag. The count, the bar's value and the sentence under it are computed from the flags, so you only mark an initiative shipped. Keep four for a two-by-two grid; with six it makes three rows.

The primary colour marks one action per block, and Progress fills with it by default. Here the fill is the foreground colour, so the bars read in any theme, and the shipped marks use the same weight. Remove the override on the Progress to use your theme's primary instead.

Each pillar is an article with an h3, its sentence and a list; every initiative is announced with its state in words, "Shipped:" or "In progress:", before its label, because the filled and empty marks are drawn and hidden. The bar is hidden and the count under it, "2 of 3 shipped", says the same thing in text.

Cells that share one hairline read cleaner than four bordered cards with gaps, which would double every edge. The grid's gap is the line, and the cells are your page background, so the block follows the theme.

The header and the grid fade up once on load. With reduced motion they simply appear. Nothing else moves, and the block has no state.

The four pillars become one column, each with the same parts in the same order and its bar at the foot, separated by a hairline. Nothing scrolls sideways at 320 pixels.