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

Editorial Badge

Measure against a heading

Preview

PaletteIvory

HTML

<p>Editorial</p>

CSS

:root {
  --ink: #1c1915;
  --paper: #fbf7ee;
  --accent: #6b3f2a;
  --accent-2: #2c3a4a;
  --on-accent: #fbf7ee;
  --muted: #6f675c;
  --line: #cfc4b0;
  --chip: #f0e9db;
}

p {
  display: inline-block;
  margin: 0;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--chip);
  color: var(--ink);
  font-family: Palatino, Georgia, serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

Tailwind

<style>
:root {
  --ink: #1c1915;
  --paper: #fbf7ee;
  --accent: #6b3f2a;
  --accent-2: #2c3a4a;
  --on-accent: #fbf7ee;
  --muted: #6f675c;
  --line: #cfc4b0;
  --chip: #f0e9db;
}
</style>
<p class="inline-block m-0 p-[0.2rem_0.55rem] [border:1px_solid_var(--line)] rounded-[0] bg-[var(--chip)] text-[var(--ink)] font-[Palatino,_Georgia,_serif] text-[0.72rem] font-semibold tracking-[0.02em] normal-case">Editorial</p>