Configure a card, preview it, then copy or download the block. The first card on a page needs the full block so the stylesheet comes with it. Every card after that only needs the markup.
Up and down arrows step through the themes, so you can flick between them and watch the preview. They work while the selector has focus, and anywhere on the page as long as you are not typing in a field.
A studio theme sets the colors, surface, pattern, fonts, corners, radius and hover behaviour in one move. It writes into the controls below rather than hiding anything, so pick one as a starting point and then change whatever you like. Reapply puts the theme back after you have wandered off it.
OCR falls back to a monospace stack on machines without an OCR face installed, so load one as a webfont on the host page if you want it guaranteed. A custom stack has the same requirement.
Bar and button both shrink the card a long way vertically. Button sizes itself to its content, so two of them sit side by side.
A pasted glyph is sized to 12px and painted with the badge text color, so leave the fill off or set it to currentColor.
The glyphs are original simplified marks rather than brand logos, so the block carries no licensing baggage. Swap in real logo SVGs later if you want them.
Draw in black. The card recolors it with the pattern ink, so one tile works in every theme.
Draw it for the top left corner. Fills follow the accent through currentColor.
The reveal needs a small script, which the export includes once per block. Cards stay visible if the script is blocked, and the whole thing is skipped for anyone who asks for reduced motion.
--cs-bg-1--cs-bg-2--cs-accent--cs-title--cs-sub--cs-accent-hover--cs-on-accentWith a name, the export writes a real .cs-theme-name rule you can reuse. Without one, the colors ride along in a style attribute.