shadcn.io is not affiliated with official shadcn/ui
Mission About Block for React
A mission statement for a home-care scheduling company: the mission in large type beside one supporting sentence, three pillars that each carry the figure they are checked by, and a founding line in relative time.
Installation
Overview
A mission statement for React with Base UI, written for Wendwell, a fictional scheduling and visit-notes app for home-care agencies. The mission is the section's heading, set large and calm with its first words muted, and one sentence beside it says why the company exists. Below, three pillars form a description list: a short title, two sentences on how the pillar shows up in the product, and the figure the company checks it by. On wide screens each pillar is a cell whose lines overshoot its corners, and the three cells share their rows, so the titles, the sentences and the figures line up across them; below that, each pillar is a band ruled from rail to rail. A quiet founding line, counted "since our first customer" rather than from a year, and a text link close the block, so it ends on content and never doubles the next block's top rule. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, with a CSS entrance and your theme's tokens for every colour. For about pages, investor updates and any page that has to say in one sentence why the company exists, with the proof under it. The figures are example data.
FAQ
How do I change the mission and the pillars?
The heading and the supporting sentence are plain text in the component. The pillars are PILLARS at the top of the file: each has a title, a description, a figure and the measure the figure counts. Keep three: from lg they sit side by side and the header uses the same three columns, the statement over the first two and the sentence over the third. The founding line's figure is VISITS_PLANNED.
How is it read by a screen reader?
The mission is the section's only heading, an h2, so the outline lists the whole sentence: "Our mission is to give home-care nurses their evenings back." The pillars are one description list: each title is a term with two descriptions, the sentence and the figure, so it reads "Notes are done before the car starts", then its sentence, then "11 min median charting after the last visit". The lines are drawn by a decorative layer hidden from assistive technology.
Why is there no founding year?
A year goes stale the day the page ships, and "Founded in" only says how old the company is. The founding line counts from the first customer instead and says what has happened since. If you prefer a date, put it in a time element with a dateTime attribute, so machines can read it too.
Why does the block end on a sentence and not on the cells?
Every block draws only its top rule: the next block's top rule is this one's bottom edge. Cells with overshooting lines left at the foot, with only empty space under them, would read as a second rule just above the next block's. The founding line and the link sit under the cells, so the block ends on content.
How does it fit on a phone?
The heading steps down from text-5xl to text-3xl and the supporting sentence moves under it. Below lg the pillars become bands, each with a rule from rail to rail and + marks where it meets the rails, and the founding line takes the last band; on a tablet each band puts its title at the start and its text at the end. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the figures stay in reading order and the link's arrow turns around.
Related
- Pro
Mission Pillars About
StatementsA 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.
- Pro
Horizon Vision Statement About
StatementsA vision statement for a climate-data company as a horizon: the vision is the centred heading, and three stations on one hairline (Now, In three years, In ten years) each say what is true by then.
- Pro
Statement With Rule Log About
StatementsA statement for a calendar app beside its rule applied: five proposals in a ruled log, each with the minutes a week it saves or costs, and a Shipped or Cut verdict computed from that number.
- Pro
Founder Letter with Margin Notes About
Company storyA founder letter for a document-signing company, set on a sheet with margin notes that line up beside each paragraph and fold under it on a narrow screen.
- Pro
Split Layout Founder Letter Hero
TestimonialsA start-aligned hero with a headline, a Shine Button and three ruled promises, over a full-width band holding the founder's letter as three cells of one quotation and a signature row.
- Pro
Stamped Number Card Grid Features
Card gridsSix pillars for an infrastructure kit as a grid of cards with large outlined numerals stamped behind the title, each with its owner and its check in a description list.