1 · Declarative inline JSON
The three original 501-style coloured cards, authored as a JSON child of the element. No JavaScript wiring needed.
2 · Progressive enhancement
Plain light-DOM links that work with JavaScript disabled — the component upgrades them into full cards when it loads.
3 · Fetched from a headless CMS
This instance fetches JSON over HTTP — locally from the mock Cloudflare Worker
(npm run serve:cms), with a static fixture as fallback — and maps
it through an adapter. Swap adapter="generic" for
wordpress, contentful, or sanity and
point src at your CMS: that is the whole migration.
Before / after
Before
Three static card images baked into the page: invisible to screen readers, unreadable on small screens, and a designer round-trip for every copy change.
After
One element, real text. Content editors change a CMS entry; the cards re-render. Screen readers get headings, links, and stat context. The grid reflows to its container, not the viewport.
Theming playground
Theming is just CSS custom properties — move the sliders and watch the first section restyle live. No internals touched.
Container-driven responsiveness
Drag the handle — the component responds to its container, not the viewport.