SDF Feature Grid
Responsive grid of icon + title + body features with hairline dividers. 2/3/4 columns.
Everything you need, nothing you don't.
Copy-paste ready
Every component is one self-contained file. Paste it in and it just works.
Tokenized
Re-skin the whole set by overriding --sdf-* tokens at any ancestor.
Accessible
Keyboard-tested, screen-reader-tested, contrast-checked before it ships.
Framework-free
Vanilla HTML/CSS in Webflow, headless primitives in React. Same DOM.
Dark mode
Light and dark surfaces from the same tokens — no duplicate markup.
Versioned
Every component carries a version number and a changelog entry.
The full source is for members
Sign in and choose a plan to view and copy SdfFeatureGrid.tsx. The live preview above is free to explore.
How to use. Copy SdfFeatureGrid.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.
