SDF Feature Split
Alternating image / text rows — a headline, body, and checklist paired with a framed visual, flipping sides for a zig-zag rhythm.
Build
Ship polished pages in a weekend
Drop in production-grade sections and go. Every component is accessible, responsive, and built to compose with the next.
Copy-paste HTML or drag Webflow components
Framework-free, zero dependencies
Accessible and responsive by default
Scale
One source of truth, every surface
Design tokens keep code, Webflow, and Figma in lockstep. Update once and every surface stays consistent — no drift, no rebuilds.
Shared design tokens across all three surfaces
Theme globally with CSS variables
Update once, ship everywhere
The full source is for members
Sign in and choose a plan to view and copy sdf-feature-split.tsx. The live preview above is free to explore.
How to use. Copy sdf-feature-split.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.
