shadcn.io is not affiliated with official shadcn/ui
Mission Pillars About Block for Solid
A mission held up by four pillars for a civic-software company: cells that share their hairlines, each with its numeral, a sentence, three initiatives with shipped and in-progress marks, and a progress bar counted from the list.
Installation
Overview
A mission with its pillars for Solid with Ark UI, written for Commonroot, a fictional civic-software company for city halls. A start-aligned header states the mission in one sentence and says how the pillars are shown. Under it, four pillars sit in cells that share their hairlines, two by two from md and one column below: each has a numeral, a title, one sentence, a list of three initiatives that carry it (a filled check when shipped, an empty ring when in progress, with the word said for screen readers) and a Progress bar with the count, "2 of 3 shipped". The count and the bar are computed from the list, so they can't disagree with the marks above them. The cells run from rail to rail and the block ends on them. The page's rails and top rule come from the Guides spine. It's built from Guides and Progress, with a CSS entrance and your theme's tokens for every colour: the bars are your foreground colour, so the primary colour stays free for your call to action. For about pages, annual reports and any mission that has to show what has been done about it. The progress is example data.
FAQ
How do I change the pillars and the initiatives?
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.
Why is the progress bar not the primary colour?
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.
How is a pillar read by a screen reader?
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.
Why are the cells divided by lines and not cards?
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.