SDF Steps
A row of numbered process cards — a sequenced how-it-works block where each step gets a number tile, title, and short description.
1
Install
Add the SDF stylesheet or install the Webflow library. No build step, no dependencies.
2
Compose
Drag components onto the canvas or paste the HTML. Every piece is built to work with the next.
3
Customize
Override the --sdf-* tokens to match your brand, then ship. The cascade is the whole theming model.
The full source is for members
Sign in and choose a plan to view and copy sdf-steps.tsx. The live preview above is free to explore.
How to use. Copy sdf-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.
