30 hand-coded CSS badges for SEO dashboards (E-E-A-T, Core Web Vitals, hreflang, schema, search intent), DevOps CI/CD build pipelines, financial tickers, medical ECG, transit line status, and ⌘K keycap shortcuts — plus typing dots, signal bars, reading time, dice, aurora, vaporwave, risograph, botanical tier, cyberpunk glitch, art deco, brutalist, and holographic collectible. 19 pure CSS + 11 vanilla-JS under 25 lines each — zero dependencies (no Radix, shadcn, MUI, Chakra). Scoped under .bdg-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Related24 CSS Tags & Chips20 CSS Banners & Alerts21 CSS Tooltips20 CSS Ribbons20 CSS Kbd Keys
Course pickPartner: Zero to Mastery
Affiliate linkWant to build production-ready CSS layouts, animations and UI from scratch?
You just browsed 30 badges. Learn the Flexbox, Grid and animation thinking behind them, so the next component starts in your head, not in a copy-paste.
Every ZTM course in one membership: $25/month, paid yearly at $299 · 30‑day money-back guarantee
The CSS Bootcamp. We may earn a commission, at no extra cost to you.
.bdg-NN for no-collision pasting, WCAG 2.2 accessible with proper ARIA semantics, and works without Swiper.js / Slick / Tippy / React-Badge / any framework wrapper. Nineteen are Pure CSS; eleven ship a small vanilla JS handler where behaviour genuinely requires it (cursor tracking for holographic, click-to-press for wax seal / keycap / dice, live-data simulation for price ticker / countdown / build pipeline / ECG / upload, card flip for conference lanyard). Every JS demo is under 25 lines of framework-free vanilla JS.:focus-visible ring at 2px minimum with 3:1 contrast (WCAG 2.4.13). State changes fire aria-live="polite" announcements (WCAG 4.1.3 Status Messages) — the build pipeline announces stage progression, the countdown ring announces the last 30 seconds, the dice face announces the rolled value, the upload progress announces completion. Continuous animations (upload shimmer, ECG heartbeat, aurora drift, vaporwave motion, cyberpunk glitch) wrap in @media (prefers-reduced-motion:reduce) { animation: none } per WCAG 2.3.3. Icon-only badges (dice, wax seal, holographic) carry aria-label. The <kbd> element semantic is used for keyboard-shortcut badges. This meets US Section 508 refresh (36 CFR Part 1194), UK EN 301 549 for public sector procurement, Canada ACA, Australia DDA + Digital Service Standard, and Ontario AODA Section 14. If your enterprise buyer runs axe-core, Deque WAVE, or Lighthouse Accessibility against the checkout, all 30 badges pass zero-violation.data-grade="pass|needs-work|fail" attributes on each chip. For real-time integration, connect the numeric values to your Real User Monitoring (RUM) endpoint — the CrUX report for field data, or your own web-vitals library for lab data. Enterprise SEO tools (Ahrefs Site Audit, Semrush Site Audit, Screaming Frog, Sitebulb, Lumar) all display this badge pattern; the visual language is universally understood by SEO managers, developers, and marketing directors alike. INP replacing FID is critical — badges still showing FID look 6+ months out of date.aria-live="polite", colours pair with icons, keyboard-accessible link targets.Intl.NumberFormat for international displays. Fintech ad CPMs in tier-1 markets run 25-45 USD baseline, 40-80 USD on trading / portfolio pages — a hand-coded ticker beats a bloated third-party widget for both Core Web Vitals and enterprise SaaS-buyer trust.<kbd> HTML element — screen readers announce it as a keyboard shortcut, and it defaults to a monospaced font stack that reads as code / key input. Visual chrome: rectangular cap with rounded corners, hairline top-edge highlight, deep bottom-edge shadow for physical depth, monospace key label inside. On :active (mouse press) OR JS-detected keydown (actual keyboard press of the mapped key), the cap depresses via transform:translateY(1px) and the shadow collapses — physical tactile feedback that teaches users the shortcut works. For real command-palette integration (Cmd+K modal, Cmd+P quick-nav, Slash-menu), wire the JS handler to your palette's keyboard listener; for docs / marketing / help pages, static badges are fine. Critical: check event.target in the keydown handler to avoid triggering while users are typing in inputs / textareas / contenteditable — otherwise every space bar press triggers the visual feedback. Use aria-label="Command K" if the visible key is a symbol (⌘, ⌥, ⇧, ⌃) that some screen readers don't announce correctly. Chain multiple keys with a + separator (⌘ + Shift + P) for modifier shortcuts..bdg-07 through .bdg-11, and pair naturally with the Core Web Vitals badge (Demo 12) for a complete SEO dashboard. Enterprise SEO tools charge $99-999/mo per user, and their trust signal depends on badge polish — hand-coded badges beat bloated component libraries for perceived professionalism.class to className, for to htmlFor), Vue / Nuxt (works as-is inside <template>), Svelte / SvelteKit (Svelte accepts class and for natively; the vanilla JS runs in onMount), Astro (drop as a .astro component with the CSS in a <style> block or set is:global; JS goes in a <script> tag), Next.js (drop into any client or server component), Remix (works in any route module), Solid.js (rename event handlers), Qwik (rename event handlers to on:*), Lit (wrap in a shadow DOM), or plain static HTML. Every badge is scoped under .bdg-NN class names so they never collide with your existing styles — you can drop all 30 on one page if you want. Google Fonts (Fraunces, Cinzel, Geist Mono, JetBrains Mono, Cormorant Garamond, VT323, Major Mono Display, Italiana, Bricolage Grotesque) are used by 8 of the aesthetically-driven demos; substitute your own type stack via font-family overrides or self-host the fonts for zero third-party dependency. All 30 demos are MIT licensed and free for commercial use with no attribution required.
20 hand-coded CSS banner and alert bars for e-commerce storefronts, SaaS dashboards, marketing sites, and compliance-bound products. Covers GDPR cookie consent with a real preferences panel, promo bars with countdown timers, free-shipping threshold progress, app-install smart banners, maintenance and incident status bars, newsletter signup bars, age verification gates, limited-stock urgency banners, live event announcements, browser upgrade notices, geo and currency switchers, sticky top announcement bars, bottom cookie bars, inline form validation alerts, icon-aligned alert banners, left-border accent alerts, diagonal stripe promos, full-width hero banners, animated gradient border alerts, and a text-wrapping laboratory that shows five strategies for the unbreakable string that breaks more banners than anything else. Every bar is scoped under a .ba-NN prefix for no-collision pasting, guards prefers-reduced-motion, carries the correct aria-live and role semantics, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
25 CSS blockquotes for article pull quotes, testimonial cards, docs callout admonitions, statement banners, and social-post embeds. Covers giant decorative quotation marks, minimalist hairline and classic left borders, animated gradient and glowing neon borders, glassmorphism and aurora backgrounds, brutalist cards, speech bubbles, thick accent rails, highlighted mark text, newspaper multi-column layouts, an expandable read-more disclosure, a scroll-snap testimonial slider, and one-click copy.
15 hand-coded CSS chat bubbles for messaging apps, AI assistant interfaces, customer support widgets, and testimonial sections. Covers the pure-CSS bubble with a pseudo-element arrow tail, iMessage and WhatsApp Web recreations, a ChatGPT-style AI response bubble, a Tailwind variant, animated typing indicators, avatar-paired bubbles, a live support widget, bordered and comic-book speech bubbles, image attachments, voice messages with a scrubable waveform, a full chat screen built on flexbox, thought bubbles, and a testimonial card built from a speech bubble. Every bubble is scoped under a .cb-NN prefix for no-collision pasting, uses real semantic markup rather than div soup, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.