Foliotype Steps
How-it-works section with a heading and a grid of sequential step cards.
How it works
Three moves from blank page to published.
01
Draft
Open a clean canvas and write. Autosave, offline support, and version history run quietly in the background so you never lose a word.
02
Structure
Switch to outline mode to reorder sections, tighten your argument, and see the shape of the whole piece at a glance.
03
Ship
Publish to your domain, newsletter, or API in one click. Formatting is handled, so your words arrive exactly as written.
The full source is for members
Sign in and choose a plan to view and copy foliotype-steps.tsx. The live preview above is free to explore.
How to use. Copy foliotype-steps.tsx into your project (it's self-contained — the styles ship with it and dedupe across instances in React 19). Theme it by setting --sdf-* tokens on any ancestor. No dependencies, no build step.
