[Library] How it works
How it works
A process in order, numbered so the reader knows where they are in it. 4 patterns, 4 variations between them: every variation is its own copy-paste file, one click from its pattern.
Thumbnails on this page are rendered in Twenty Twenty-Five. Your theme is applied to every live preview, on a pattern's own page.
4 patterns
Thumbnail in Twenty Twenty-Five
How it worksStandard
Steps cards
Four plated steps in a row, each one sitting lower than the one before it: the plates are grid children stretched to their row and each carries its own bottom margin, so the feet step down in a straight diagonal whatever the copy does to the words above them. A tracked step label, a short title and one sentence inside each plate, ruled in currentColor. The grid takes a 16rem minimum column, so the row is four across on a desktop, two on a tablet and one on a phone, where the steps become a plain numbered run. States no colour and no font of its own.
3 blocks · core only · 1 variation Preview Ruled stair
Thumbnail in Twenty Twenty-Five
How it worksStandard
Steps ledger
A process set as a printed schedule: a ruled column-head row (No., Stage, What happens) and then five full-width rows, each one a display numeral, a title and a short description in three columns, hairlines in currentColor between them and a closing rule under the last. The numerals and the column heads make it read in order, which is what lets the same table serve as a conference agenda. States no colour and no font of its own.
5 blocks · core only · 1 variation Preview Night schedule
Thumbnail in Twenty Twenty-Five
How it worksStandard
Steps run
A process as one horizontal run: three display numerals across the band, each over a short title and a packed line of copy, with a single hairline threading the gaps between the numerals at numeral height so the row reads as a sequence rather than as three separate cards. The thread is currentColor, so it follows your text. Below 782px the columns stack and the same two hairlines become the rules between the steps. States no colour and no font of its own.
6 blocks · core only · 1 variation Preview Night run
Thumbnail in Twenty Twenty-Five
How it worksStandard
Steps screens
A software walkthrough in four columns: an empty 16:10 screenshot frame ruled in currentColor, then a numeral chip that laps half into the frame and half into the caption below it, then the step title and one sentence. The chip is the section's mark: it inverts to your contrast with your base on it, so it reads as a tab pressed into the bottom edge of each screen. Image blocks ship empty for your own screenshots. States no colour and no font of its own.
6 blocks · core only · 1 variation Preview Titles on the seam