CSS Showcase · Live Demo
Badges that speak.
Status, count, and filter patterns — semantic pills, superscript count badges, toggleable filter chips, and wrapping tag clouds.
Featured demo
mobile · inline-tagsmobile design patterns
badge-inline-tags.css
/* Wrapping tag cloud */
.badge-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.badge-tags .tag {
border-radius: 0.35rem;
background: color-mix(in oklch, var(--foreground) 6%, transparent);
padding: 0.15rem 0.45rem;
}CSS features used
- • color-mix() tonal backgrounds
- • position: absolute superscript
- • flex-wrap tag clouds
- • data-attribute state styling
- • border-radius pills
- • Semantic tokens