8 results

Preview
Brutal Badge
Thick rules and uppercase
Preview
Chic Badge
Serif type and a thin rule
Preview
Corner Mark
A short mark that sits on a corner
Preview
Count Badge
A badge that shows a count
Preview
Dense Badge
Tight gaps and mono type
Preview
Editorial Badge
Measure against a heading
Preview
Modern Badge
Red on a short white plane
Preview
Soft Badge
Large radii and a pale plane

Count Badge

A badge that shows a count

Preview

PaletteDarkMonoWarm

HTML

<p>Inbox <data value="12">12</data></p>

CSS

:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}

p {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-weight: 700;
}

data {
  min-width: 1.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8rem;
  text-align: center;
}

Tailwind

<style>
:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}
</style>
<p class="inline-flex items-center gap-[0.45rem] m-0 font-bold">Inbox <data class="min-w-[1.4rem] p-[0.1rem_0.4rem] rounded-full bg-[var(--accent)] text-[var(--on-accent)] text-[0.8rem] text-center" value="12">12</data></p>