shadcn.io is not affiliated with official shadcn/ui
Layered Story About Block for Solid
A company's story in four layers (Mission, Values, Approach and Proof) as bands ruled from rail to rail, each set a step further in than the last like a stack of sheets, with its label at the start and its content at the end.
Installation
Overview
A layered story for Solid with Ark UI, written for Layerbright, a fictional data catalogue. A start-aligned header says what the company builds and how to read the block, top down. Under it, four layers, Mission, Values, Approach and Proof, are a description list: each is a band with its label at the start and its content at the end (the label above the content on a phone). The first layer uses the page's rails; every later one is set a step further in than the one before, drawing its own side lines and + marks where they meet the band's rule, so the bands read as a stack of sheets that gets narrower as the story goes from why we exist to what we can prove. The content differs by layer: a sentence, three values, a paragraph, three figures. The block ends on the last layer's content. The page's rails and top rule come from the Guides spine. It's built from Guides, with a CSS entrance and your theme's tokens for every colour. For about pages and handbooks that tell a story in order and want the order to show. The figures are example data.
FAQ
How do I change a layer, or add a fifth?
Each layer is a Layer in the component with a label, a depth (0 for the first, then 1, 2 and 3) and any content. To add one, add a Layer with the next depth and a matching entry in INSET and REACH at the top of the file, which hold the classes for how far the layer is set in and how far its rule reaches back to the rails. Past four layers, shrink the step so the last band stays wide enough.
How do the sheets work?
Every layer is a box with a margin that grows by one step: that box draws the side lines and the + marks at its top corners. The rule across the top of the band reaches the rails by the same amount backwards, so each band's top line runs the full width of the page and ends in a T against the box's sides. Nothing is a background, so it follows any theme.
How is it read by a screen reader?
The layers are one description list: each label is a term and its content the description, in the order of the story. The sides, the rules and the + marks are decorative and hidden from assistive technology, so the stepping is a visual aid only.
Are the figures real?
No, they're example data for a fictional company. Replace the PROOF entries with your own; each is a value and a label, and the value is wrapped so a number with a unit keeps its order in a right-to-left layout.