Pick a parody theme — tokens only, no shortcuts.

A Web Component, not a widget

<feature-cards>

One custom element replaces three hard-coded card images — accessible, responsive, themable, and CMS-agnostic. Drop it into WordPress, Contentful, Sanity, or plain HTML with minimal adjustment.

Zero framework deps Shadow DOM Container queries AGPL-3.0

501 feature cards — live editor

Replace the three static card images with real text, figures, and icons. Each card has four core fields — top text, middle text, bottom text, and icon/image — plus colour, size, and rotation. Advanced typography and borders live in the panel below.

Core — four elements

Icon

Icons from Lucide (ISC)

7.5rem
0°
1×
18rem
Advanced — typography & borders

Canonical JSON (CMS-ready) — maps top → eyebrow, middle → figure.value, bottom → figure.label, icon → media.src, icon size → appearance.mediaMaxHeight. 


          

        

      


      

        
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.
        

        
          Read the documentation
          Explore the API
          Join the community
        
      


      

        
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.
        

        

          Connecting to the mock CMS…
        

        
      


      

        
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 — tweak the controls and watch the preview
          cards restyle live. No internals touched.
        

        

          
          
          
          
          
        

        
          
        
      


      

        
Schema playground

        

          Edit canonical JSON below — Zod validates live and the preview re-renders.
          Invalid payloads show structured issues (same shape as
          featurecards:error).
        

        

          
          
          
Waiting for input…

          
        

      


      

        
Container-driven responsiveness

        

          Drag the bottom-right corner — the component responds to its container,
          not the viewport.
        

        

          Container width: measuring…