Open demo

CSS code

HTML 
<div><span class="lbl">Feature labels in a menu</span>
<nav aria-label="Workspace">
<ul class="fnav">
  <li><a href="#" aria-current="page"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></svg>Overview</a></li>
  <li><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3L5 13.5h6L10 21l8-10.5h-6z"/></svg>Automations<span class="fl new">New</span></a></li>
  <li><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l1.8 4.6L18.5 9l-4.7 1.6L12 15l-1.8-4.4L5.5 9l4.7-1.4zM18.5 15l.8 2 2 .8-2 .7-.8 2-.7-2-2-.7 2-.8z"/></svg>Smart summaries<span class="fl beta">Beta</span></a></li>
  <li><span class="off"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 14.5l5-5M8 11l-2.5 2.5a3.5 3.5 0 0 0 5 5L13 16M11 8l2.5-2.5a3.5 3.5 0 0 1 5 5L16 13"/></svg>Webhooks<span class="fl soon">Soon</span></span></li>
  <li><a href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M21 20H3"/></svg>Classic reports<span class="fl old">Deprecated</span></a></li>
</ul>
</nav></div>

<div><span class="lbl">Sale and stock labels on product tiles</span>
<ul class="tiles">
  <li class="tile"><div class="tags"><span class="sl off">−30%</span><span class="sl low">Only 3 left</span></div>
    <div class="art" style="--bg:#fef3c7"><svg viewBox="0 0 84 84" aria-hidden="true"><path d="M18 26h40v30a14 14 0 0 1-14 14H32a14 14 0 0 1-14-14z" fill="#b45309"/><path d="M58 34h6a8 8 0 0 1 0 16h-6" fill="none" stroke="#b45309" stroke-width="6"/><path d="M28 12c-3 4 3 6 0 10M38 10c-3 4 3 6 0 10M48 12c-3 4 3 6 0 10" fill="none" stroke="#d97706" stroke-width="3" stroke-linecap="round"/></svg></div>
    <div class="meta"><h3>Stoneware mug, 350 ml</h3><p class="price">€17.50 <s><span class="sr-only">was </span>€25.00</s></p></div></li>
  <li class="tile"><div class="tags"><span class="sl new">New</span><span class="sl ship">Free shipping</span></div>
    <div class="art" style="--bg:#dbeafe"><svg viewBox="0 0 84 84" aria-hidden="true"><path d="M30 14h24l10 26H20z" fill="#1d4ed8"/><rect x="39" y="40" width="6" height="26" fill="#1e3a8a"/><rect x="26" y="66" width="32" height="6" rx="3" fill="#1e3a8a"/><ellipse cx="42" cy="44" rx="10" ry="3" fill="#fde68a"/></svg></div>
    <div class="meta"><h3>Arc desk lamp</h3><p class="price">€64.00</p></div></li>
  <li class="tile sold"><div class="tags"><span class="sl out">Sold out</span></div>
    <div class="art" style="--bg:#dcfce7"><svg viewBox="0 0 84 84" aria-hidden="true"><rect x="20" y="22" width="44" height="50" rx="12" fill="#15803d"/><path d="M32 22v-4a10 10 0 0 1 20 0v4" fill="none" stroke="#14532d" stroke-width="5"/><rect x="28" y="44" width="28" height="16" rx="4" fill="#14532d"/></svg></div>
    <div class="meta"><h3>Trail daypack, 18 L</h3><p class="price">€89.00</p></div></li>
</ul></div>

<div><span class="lbl">Version and build badges</span>
<ul class="shields">
  <li class="shield"><span>version</span><span>4.2.0</span></li>
  <li class="shield pass"><span>build</span><span><svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2.5 6.3l2.2 2.2 4.8-5"/></svg>passing</span></li>
  <li class="shield warn"><span>coverage</span><span>87%</span></li>
  <li class="shield lic"><span>license</span><span>MIT</span></li>
  <li class="shield"><span>node</span><span>≥ 18</span></li>
</ul>
<p class="ver">v4.2.0 <span class="fl new">Latest</span></p></div>

<div><span class="lbl">Step and progress badges</span>
<ol class="steps" aria-label="Checkout progress">
  <li><span class="step done"><i><svg viewBox="0 0 14 14" aria-hidden="true"><path d="M3 7.3l2.6 2.6L11 4.3"/></svg></i>Cart<span class="sr-only">, completed</span></span></li>
  <li><span class="step done"><i><svg viewBox="0 0 14 14" aria-hidden="true"><path d="M3 7.3l2.6 2.6L11 4.3"/></svg></i>Shipping<span class="sr-only">, completed</span></span></li>
  <li><span class="step now" aria-current="step"><i aria-hidden="true">3</i>Payment<span class="sr-only">, current step</span></span></li>
  <li><span class="step"><i aria-hidden="true">4</i>Review</span></li>
</ol>
<div class="progress-row">
  <span class="pb">3 of 5 lessons<span class="bar" aria-hidden="true"><b style="--p:60%"></b></span></span>
  <span class="ring"><i style="--p:72%">72%</i>Profile complete</span>
</div></div>
CSS 
/* Feature, sale, version and step badges. Each label is a word or number; ticks, strikes and rings always have text beside them. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fl{display:inline-flex;align-items:center;padding:2px 7px;border:1px solid transparent;border-radius:6px;font-size:.66rem;font-weight:800;line-height:1.35;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.fl.new{background:#15803d;color:#fff}
.fl.beta{background:#f5f3ff;border-color:#c4b5fd;color:#5b21b6}
.fl.soon{background:#f1f5f9;color:#475569}
.fl.old{background:#fff7ed;border-color:#fdba74;color:#9a3412}
/* nav with feature labels */
.fnav{max-width:300px;margin:0;padding:8px;list-style:none;border:1px solid #e2e8f0;border-radius:16px;background:#fff}
.fnav a,.fnav span.off{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:#1e293b;font-size:.9rem;font-weight:600;text-decoration:none;
  transition:background-color .15s}
.fnav a:hover{background:#f1f5f9}
.fnav a:focus-visible{outline:2px solid #4f46e5;outline-offset:1px}
.fnav a[aria-current="page"]{background:#eef2ff;color:#3730a3}
.fnav svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fnav .fl{margin-left:auto}
.fnav span.off{color:#526072}
/* product tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.tile{position:relative;overflow:hidden;border:1px solid #e2e8f0;border-radius:18px;background:#fff}
.tile .art{display:grid;place-items:center;height:150px;background:var(--bg,#fef3c7)}
.tile .art svg{width:84px;height:84px}
.tile .meta{padding:14px 16px 16px}
.tile h3{font-size:.92rem;font-weight:700;color:#0f172a}
.tile .price{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:1rem;font-weight:800;color:#0f172a}
.tile .price s{font-size:.82rem;font-weight:500;color:#526072}
.tags{position:absolute;z-index:1;top:12px;left:12px;display:flex;flex-wrap:wrap;gap:6px}
.sl{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:.72rem;font-weight:800;line-height:1.25;white-space:nowrap}
.sl.off{background:#b91c1c;color:#fff}
.sl.low{background:#fff;color:#9a3412;box-shadow:inset 0 0 0 1px #fdba74}
.sl.new{background:#0f172a;color:#fff}
.sl.ship{background:#fff;color:#166534;box-shadow:inset 0 0 0 1px #86efac}
.tile.sold .art{filter:grayscale(1);opacity:.55}
.sl.out{background:#334155;color:#fff}
/* version badges, shields style */
.shields{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.shield{display:inline-flex;overflow:hidden;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.74rem;line-height:1;
  box-shadow:0 1px 0 rgba(15,23,42,.08)}
.shield span{display:inline-flex;align-items:center;gap:4px;padding:6px 8px}
.shield span:first-child{background:#334155;color:#fff}
.shield span+span{background:var(--v,#1d4ed8);color:#fff;font-weight:700}
.shield svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.shield.pass{--v:#15803d}.shield.warn{--v:#a14d07}.shield.lic{--v:#6d28d9}
.ver{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:4px 4px 4px 12px;border:1px solid #e2e8f0;border-radius:999px;background:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;font-weight:700;color:#0f172a}
.ver .fl{border-radius:999px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
/* step badges */
.steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;margin:0;padding:0;list-style:none}
.step{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:#fff;border:1px solid #e2e8f0;font-size:.82rem;font-weight:600;color:#334155}
.step i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#f1f5f9;color:#334155;font-size:.75rem;font-style:normal;font-weight:800}
.step i svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.step.done i{background:#15803d;color:#fff}
.step.now{border-color:#4f46e5;background:#eef2ff;color:#3730a3}
.step.now i{background:#4f46e5;color:#fff;box-shadow:0 0 0 3px #c7d2fe}
.steps li{display:flex;align-items:center;gap:6px}
.steps li+li::before{content:"";width:16px;height:2px;border-radius:2px;background:#94a3b8}
.progress-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.pb{display:inline-flex;align-items:center;gap:10px;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid #e2e8f0;font-size:.8rem;font-weight:700;color:#1e293b}
.pb .bar{width:64px;height:6px;border-radius:6px;background:#e2e8f0;overflow:hidden}
.pb .bar b{display:block;height:100%;width:var(--p);border-radius:inherit;background:#4f46e5}
.ring{display:inline-flex;align-items:center;gap:10px;font-size:.82rem;font-weight:600;color:#334155}
.ring i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-size:.7rem;font-style:normal;font-weight:800;color:#0f172a;
  background:radial-gradient(closest-side,#fff 76%,transparent 78%),conic-gradient(#0f766e var(--p),#e2e8f0 0)}
@media (prefers-reduced-motion:reduce){.fnav a{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Feature labels in a menu</span>
<nav aria-label="Workspace">
<ul class="nav nav-pills flex-column fnav">
  <li class="nav-item"><a class="nav-link active d-flex align-items-center" href="#" aria-current="page"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></svg>Overview</a></li>
  <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3L5 13.5h6L10 21l8-10.5h-6z"/></svg>Automations<span class="badge fl new">New</span></a></li>
  <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l1.8 4.6L18.5 9l-4.7 1.6L12 15l-1.8-4.4L5.5 9l4.7-1.4zM18.5 15l.8 2 2 .8-2 .7-.8 2-.7-2-2-.7 2-.8z"/></svg>Smart summaries<span class="badge fl beta">Beta</span></a></li>
  <li class="nav-item"><span class="nav-link disabled off d-flex align-items-center"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 14.5l5-5M8 11l-2.5 2.5a3.5 3.5 0 0 0 5 5L13 16M11 8l2.5-2.5a3.5 3.5 0 0 1 5 5L16 13"/></svg>Webhooks<span class="badge fl soon">Soon</span></span></li>
  <li class="nav-item"><a class="nav-link d-flex align-items-center" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M21 20H3"/></svg>Classic reports<span class="badge fl old">Deprecated</span></a></li>
</ul>
</nav></div>

<div><span class="lbl">Sale and stock labels on product tiles</span>
<ul class="tiles list-unstyled m-0">
  <li class="card tile"><div class="tags d-flex flex-wrap position-absolute"><span class="badge rounded-pill sl off">−30%</span><span class="badge rounded-pill sl low">Only 3 left</span></div>
    <div class="art" style="--bg:#fef3c7"><svg viewBox="0 0 84 84" aria-hidden="true"><path d="M18 26h40v30a14 14 0 0 1-14 14H32a14 14 0 0 1-14-14z" fill="#b45309"/><path d="M58 34h6a8 8 0 0 1 0 16h-6" fill="none" stroke="#b45309" stroke-width="6"/><path d="M28 12c-3 4 3 6 0 10M38 10c-3 4 3 6 0 10M48 12c-3 4 3 6 0 10" fill="none" stroke="#d97706" stroke-width="3" stroke-linecap="round"/></svg></div>
    <div class="card-body meta"><h3 class="m-0">Stoneware mug, 350 ml</h3><p class="price mb-0">€17.50 <s><span class="visually-hidden">was </span>€25.00</s></p></div></li>
  <li class="card tile"><div class="tags d-flex flex-wrap position-absolute"><span class="badge rounded-pill sl new">New</span><span class="badge rounded-pill sl ship">Free shipping</span></div>
    <div class="art" style="--bg:#dbeafe"><svg viewBox="0 0 84 84" aria-hidden="true"><path d="M30 14h24l10 26H20z" fill="#1d4ed8"/><rect x="39" y="40" width="6" height="26" fill="#1e3a8a"/><rect x="26" y="66" width="32" height="6" rx="3" fill="#1e3a8a"/><ellipse cx="42" cy="44" rx="10" ry="3" fill="#fde68a"/></svg></div>
    <div class="card-body meta"><h3 class="m-0">Arc desk lamp</h3><p class="price mb-0">€64.00</p></div></li>
  <li class="card tile sold"><div class="tags d-flex flex-wrap position-absolute"><span class="badge rounded-pill sl out">Sold out</span></div>
    <div class="art" style="--bg:#dcfce7"><svg viewBox="0 0 84 84" aria-hidden="true"><rect x="20" y="22" width="44" height="50" rx="12" fill="#15803d"/><path d="M32 22v-4a10 10 0 0 1 20 0v4" fill="none" stroke="#14532d" stroke-width="5"/><rect x="28" y="44" width="28" height="16" rx="4" fill="#14532d"/></svg></div>
    <div class="card-body meta"><h3 class="m-0">Trail daypack, 18 L</h3><p class="price mb-0">€89.00</p></div></li>
</ul></div>

<div><span class="lbl">Version and build badges</span>
<ul class="shields list-unstyled d-flex flex-wrap m-0">
  <li class="shield d-inline-flex"><span class="badge rounded-0">version</span><span class="badge rounded-0">4.2.0</span></li>
  <li class="shield pass d-inline-flex"><span class="badge rounded-0">build</span><span class="badge rounded-0"><svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2.5 6.3l2.2 2.2 4.8-5"/></svg>passing</span></li>
  <li class="shield warn d-inline-flex"><span class="badge rounded-0">coverage</span><span class="badge rounded-0">87%</span></li>
  <li class="shield lic d-inline-flex"><span class="badge rounded-0">license</span><span class="badge rounded-0">MIT</span></li>
  <li class="shield d-inline-flex"><span class="badge rounded-0">node</span><span class="badge rounded-0">≥ 18</span></li>
</ul>
<p class="ver d-inline-flex align-items-center rounded-pill mb-0">v4.2.0 <span class="badge rounded-pill fl new">Latest</span></p></div>

<div><span class="lbl">Step and progress badges</span>
<ol class="steps list-unstyled d-flex flex-wrap align-items-center m-0" aria-label="Checkout progress">
  <li><span class="step rounded-pill done"><i><svg viewBox="0 0 14 14" aria-hidden="true"><path d="M3 7.3l2.6 2.6L11 4.3"/></svg></i>Cart<span class="visually-hidden">, completed</span></span></li>
  <li><span class="step rounded-pill done"><i><svg viewBox="0 0 14 14" aria-hidden="true"><path d="M3 7.3l2.6 2.6L11 4.3"/></svg></i>Shipping<span class="visually-hidden">, completed</span></span></li>
  <li><span class="step rounded-pill now" aria-current="step"><i aria-hidden="true">3</i>Payment<span class="visually-hidden">, current step</span></span></li>
  <li><span class="step rounded-pill"><i aria-hidden="true">4</i>Review</span></li>
</ol>
<div class="progress-row d-flex flex-wrap align-items-center">
  <span class="pb rounded-pill d-inline-flex align-items-center">3 of 5 lessons<span class="progress pb-bar" aria-hidden="true"><span class="progress-bar" style="width:60%"></span></span></span>
  <span class="ring"><i style="--p:72%">72%</i>Profile complete</span>
</div></div>
CSS 
/* Feature, sale, version and step badges on Bootstrap's .badge, .nav-pills, .card and .progress, restyled through --bs-* variables.
   Each label is a word or number; ticks, strikes and rings always have text beside them. */
.fl{--bs-badge-padding-x:7px;--bs-badge-padding-y:2px;--bs-badge-font-size:.66rem;--bs-badge-font-weight:800;--bs-badge-color:inherit;--bs-badge-border-radius:6px;display:inline-flex;align-items:center;border:1px solid transparent;line-height:1.35;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.fl.new{background:#15803d;color:#fff}
.fl.beta{background:#f5f3ff;border-color:#c4b5fd;color:#5b21b6}
.fl.soon{background:#f1f5f9;color:#475569}
.fl.old{background:#fff7ed;border-color:#fdba74;color:#9a3412}
/* nav with feature labels */
.fnav{--bs-nav-link-padding-x:10px;--bs-nav-link-padding-y:9px;--bs-nav-link-font-size:.9rem;--bs-nav-link-font-weight:600;--bs-nav-link-color:#1e293b;--bs-nav-link-hover-color:#1e293b;--bs-nav-link-disabled-color:#526072;
  --bs-nav-pills-border-radius:10px;--bs-nav-pills-link-active-bg:#eef2ff;--bs-nav-pills-link-active-color:#3730a3;max-width:300px;padding:8px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;flex-wrap:nowrap}
.fnav .nav-link{gap:10px;transition:background-color .15s}
.fnav a.nav-link:not(.active):hover{background:#f1f5f9}
.fnav .nav-link:focus-visible{outline:2px solid #4f46e5;outline-offset:1px;box-shadow:none}
.fnav svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fnav .fl{margin-left:auto}
/* product tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.tile{--bs-card-border-color:#e2e8f0;--bs-card-border-radius:18px;--bs-card-inner-border-radius:17px;--bs-card-spacer-y:14px;--bs-card-spacer-x:16px;overflow:hidden}
.tile .meta{padding-bottom:16px}
.tile .art{display:grid;place-items:center;height:150px;background:var(--bg,#fef3c7)}
.tile .art svg{width:84px;height:84px}
.tile h3{line-height:normal;font-size:.92rem;font-weight:700;color:#0f172a}
.tile .price{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:1rem;font-weight:800;color:#0f172a}
.tile .price s{font-size:.82rem;font-weight:500;color:#526072}
.tags{z-index:1;top:12px;left:12px;gap:6px}
.sl{--bs-badge-padding-x:9px;--bs-badge-padding-y:4px;--bs-badge-font-size:.72rem;--bs-badge-font-weight:800;--bs-badge-color:inherit;display:inline-flex;align-items:center;line-height:1.25}
.sl.off{background:#b91c1c;color:#fff}
.sl.low{background:#fff;color:#9a3412;box-shadow:inset 0 0 0 1px #fdba74}
.sl.new{background:#0f172a;color:#fff}
.sl.ship{background:#fff;color:#166534;box-shadow:inset 0 0 0 1px #86efac}
.tile.sold .art{filter:grayscale(1);opacity:.55}
.sl.out{background:#334155;color:#fff}
/* version badges, shields style */
.shields{gap:10px}
.shield{overflow:hidden;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.74rem;line-height:1;
  box-shadow:0 1px 0 rgba(15,23,42,.08)}
.shield .badge{--bs-badge-padding-x:8px;--bs-badge-padding-y:6px;--bs-badge-font-size:.74rem;--bs-badge-font-weight:400;--bs-badge-color:#fff;display:inline-flex;align-items:center;gap:4px;line-height:1;font-family:inherit}
.shield .badge:first-child{background:#334155}
.shield .badge+.badge{background:var(--v,#1d4ed8);font-weight:700}
.shield svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.shield.pass{--v:#15803d}.shield.warn{--v:#a14d07}.shield.lic{--v:#6d28d9}
.ver{gap:8px;margin-top:14px;padding:4px 4px 4px 12px;border:1px solid #e2e8f0;background:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;font-weight:700;color:#0f172a}
.ver .fl{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
/* step badges */
.steps{gap:8px 6px}
.step{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;background:#fff;border:1px solid #e2e8f0;font-size:.82rem;font-weight:600;color:#334155}
.step i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#f1f5f9;color:#334155;font-size:.75rem;font-style:normal;font-weight:800}
.step i svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.step.done i{background:#15803d;color:#fff}
.step.now{border-color:#4f46e5;background:#eef2ff;color:#3730a3}
.step.now i{background:#4f46e5;color:#fff;box-shadow:0 0 0 3px #c7d2fe}
.steps li{display:flex;align-items:center;gap:6px}
.steps li+li::before{content:"";width:16px;height:2px;border-radius:2px;background:#94a3b8}
.progress-row{gap:12px;margin-top:16px}
.pb{gap:10px;padding:6px 12px;background:#fff;border:1px solid #e2e8f0;font-size:.8rem;font-weight:700;color:#1e293b}
.pb-bar{--bs-progress-height:6px;--bs-progress-bg:#e2e8f0;--bs-progress-border-radius:6px;--bs-progress-bar-bg:#4f46e5;width:64px}
.pb-bar .progress-bar{border-radius:inherit}
.ring{display:inline-flex;align-items:center;gap:10px;font-size:.82rem;font-weight:600;color:#334155}
.ring i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-size:.7rem;font-style:normal;font-weight:800;color:#0f172a;
  background:radial-gradient(closest-side,#fff 76%,transparent 78%),conic-gradient(#0f766e var(--p),#e2e8f0 0)}
@media (prefers-reduced-motion:reduce){.fnav a{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526072] uppercase">Feature labels in a menu</span>
<nav aria-label="Workspace">
<ul class="max-w-[300px] rounded-2xl border border-[#e2e8f0] bg-white p-2">
  <li><a class="flex items-center gap-2.5 rounded-[10px] px-2.5 py-[9px] text-[.9rem] font-semibold text-[#1e293b] transition-[background-color] duration-150 hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#4f46e5] motion-reduce:transition-none aria-[current=page]:bg-[#eef2ff] aria-[current=page]:text-[#3730a3]" href="#" aria-current="page"><svg class="size-[18px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></svg>Overview</a></li>
  <li><a class="flex items-center gap-2.5 rounded-[10px] px-2.5 py-[9px] text-[.9rem] font-semibold text-[#1e293b] transition-[background-color] duration-150 hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#4f46e5] motion-reduce:transition-none aria-[current=page]:bg-[#eef2ff] aria-[current=page]:text-[#3730a3]" href="#"><svg class="size-[18px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 3L5 13.5h6L10 21l8-10.5h-6z"/></svg>Automations<span class="inline-flex items-center rounded-md border px-[7px] py-0.5 text-[.66rem] leading-[1.35] font-extrabold tracking-[.06em] whitespace-nowrap uppercase border-transparent bg-[#15803d] text-white ml-auto">New</span></a></li>
  <li><a class="flex items-center gap-2.5 rounded-[10px] px-2.5 py-[9px] text-[.9rem] font-semibold text-[#1e293b] transition-[background-color] duration-150 hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#4f46e5] motion-reduce:transition-none aria-[current=page]:bg-[#eef2ff] aria-[current=page]:text-[#3730a3]" href="#"><svg class="size-[18px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l1.8 4.6L18.5 9l-4.7 1.6L12 15l-1.8-4.4L5.5 9l4.7-1.4zM18.5 15l.8 2 2 .8-2 .7-.8 2-.7-2-2-.7 2-.8z"/></svg>Smart summaries<span class="inline-flex items-center rounded-md border px-[7px] py-0.5 text-[.66rem] leading-[1.35] font-extrabold tracking-[.06em] whitespace-nowrap uppercase border-[#c4b5fd] bg-[#f5f3ff] text-[#5b21b6] ml-auto">Beta</span></a></li>
  <li><span class="flex items-center gap-2.5 rounded-[10px] px-2.5 py-[9px] text-[.9rem] font-semibold text-[#526072]"><svg class="size-[18px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.5 14.5l5-5M8 11l-2.5 2.5a3.5 3.5 0 0 0 5 5L13 16M11 8l2.5-2.5a3.5 3.5 0 0 1 5 5L16 13"/></svg>Webhooks<span class="inline-flex items-center rounded-md border px-[7px] py-0.5 text-[.66rem] leading-[1.35] font-extrabold tracking-[.06em] whitespace-nowrap uppercase border-transparent bg-[#f1f5f9] text-[#475569] ml-auto">Soon</span></span></li>
  <li><a class="flex items-center gap-2.5 rounded-[10px] px-2.5 py-[9px] text-[.9rem] font-semibold text-[#1e293b] transition-[background-color] duration-150 hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#4f46e5] motion-reduce:transition-none aria-[current=page]:bg-[#eef2ff] aria-[current=page]:text-[#3730a3]" href="#"><svg class="size-[18px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M21 20H3"/></svg>Classic reports<span class="inline-flex items-center rounded-md border px-[7px] py-0.5 text-[.66rem] leading-[1.35] font-extrabold tracking-[.06em] whitespace-nowrap uppercase border-[#fdba74] bg-[#fff7ed] text-[#9a3412] ml-auto">Deprecated</span></a></li>
</ul>
</nav></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526072] uppercase">Sale and stock labels on product tiles</span>
<ul class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <li class="relative overflow-hidden rounded-[18px] border border-[#e2e8f0] bg-white"><div class="absolute top-3 left-3 z-1 flex flex-wrap gap-1.5"><span class="inline-flex items-center rounded-full px-[9px] py-1 text-[.72rem] leading-[1.25] font-extrabold whitespace-nowrap bg-[#b91c1c] text-white">−30%</span><span class="inline-flex items-center rounded-full px-[9px] py-1 text-[.72rem] leading-[1.25] font-extrabold whitespace-nowrap bg-white text-[#9a3412] shadow-[inset_0_0_0_1px_#fdba74]">Only 3 left</span></div>
    <div class="grid h-[150px] place-items-center bg-[#fef3c7] group-[.sold]:opacity-55 group-[.sold]:grayscale"><svg class="size-[84px]" viewBox="0 0 84 84" aria-hidden="true"><path d="M18 26h40v30a14 14 0 0 1-14 14H32a14 14 0 0 1-14-14z" fill="#b45309"/><path d="M58 34h6a8 8 0 0 1 0 16h-6" fill="none" stroke="#b45309" stroke-width="6"/><path d="M28 12c-3 4 3 6 0 10M38 10c-3 4 3 6 0 10M48 12c-3 4 3 6 0 10" fill="none" stroke="#d97706" stroke-width="3" stroke-linecap="round"/></svg></div>
    <div class="px-4 pt-3.5 pb-4"><h3 class="text-[.92rem] font-bold text-[#0f172a]">Stoneware mug, 350 ml</h3><p class="mt-1.5 flex items-baseline gap-2 text-[1rem] font-extrabold text-[#0f172a]">€17.50 <s class="text-[.82rem] font-medium text-[#526072]"><span class="sr-only">was </span>€25.00</s></p></div></li>
  <li class="relative overflow-hidden rounded-[18px] border border-[#e2e8f0] bg-white"><div class="absolute top-3 left-3 z-1 flex flex-wrap gap-1.5"><span class="inline-flex items-center rounded-full px-[9px] py-1 text-[.72rem] leading-[1.25] font-extrabold whitespace-nowrap bg-[#0f172a] text-white">New</span><span class="inline-flex items-center rounded-full px-[9px] py-1 text-[.72rem] leading-[1.25] font-extrabold whitespace-nowrap bg-white text-[#166534] shadow-[inset_0_0_0_1px_#86efac]">Free shipping</span></div>
    <div class="grid h-[150px] place-items-center bg-[#dbeafe] group-[.sold]:opacity-55 group-[.sold]:grayscale"><svg class="size-[84px]" viewBox="0 0 84 84" aria-hidden="true"><path d="M30 14h24l10 26H20z" fill="#1d4ed8"/><rect x="39" y="40" width="6" height="26" fill="#1e3a8a"/><rect x="26" y="66" width="32" height="6" rx="3" fill="#1e3a8a"/><ellipse cx="42" cy="44" rx="10" ry="3" fill="#fde68a"/></svg></div>
    <div class="px-4 pt-3.5 pb-4"><h3 class="text-[.92rem] font-bold text-[#0f172a]">Arc desk lamp</h3><p class="mt-1.5 flex items-baseline gap-2 text-[1rem] font-extrabold text-[#0f172a]">€64.00</p></div></li>
  <li class="sold group relative overflow-hidden rounded-[18px] border border-[#e2e8f0] bg-white"><div class="absolute top-3 left-3 z-1 flex flex-wrap gap-1.5"><span class="inline-flex items-center rounded-full px-[9px] py-1 text-[.72rem] leading-[1.25] font-extrabold whitespace-nowrap bg-[#334155] text-white">Sold out</span></div>
    <div class="grid h-[150px] place-items-center bg-[#dcfce7] group-[.sold]:opacity-55 group-[.sold]:grayscale"><svg class="size-[84px]" viewBox="0 0 84 84" aria-hidden="true"><rect x="20" y="22" width="44" height="50" rx="12" fill="#15803d"/><path d="M32 22v-4a10 10 0 0 1 20 0v4" fill="none" stroke="#14532d" stroke-width="5"/><rect x="28" y="44" width="28" height="16" rx="4" fill="#14532d"/></svg></div>
    <div class="px-4 pt-3.5 pb-4"><h3 class="text-[.92rem] font-bold text-[#0f172a]">Trail daypack, 18 L</h3><p class="mt-1.5 flex items-baseline gap-2 text-[1rem] font-extrabold text-[#0f172a]">€89.00</p></div></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526072] uppercase">Version and build badges</span>
<ul class="flex flex-wrap gap-2.5">
  <li class="inline-flex overflow-hidden rounded-md font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.74rem] leading-none shadow-[0_1px_0_rgba(15,23,42,.08)]"><span class="inline-flex items-center gap-1 bg-[#334155] px-2 py-1.5 text-white">version</span><span class="inline-flex items-center gap-1 bg-[#1d4ed8] px-2 py-1.5 font-bold text-white">4.2.0</span></li>
  <li class="inline-flex overflow-hidden rounded-md font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.74rem] leading-none shadow-[0_1px_0_rgba(15,23,42,.08)]"><span class="inline-flex items-center gap-1 bg-[#334155] px-2 py-1.5 text-white">build</span><span class="inline-flex items-center gap-1 bg-[#15803d] px-2 py-1.5 font-bold text-white"><svg class="size-[11px]" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 6.3l2.2 2.2 4.8-5"/></svg>passing</span></li>
  <li class="inline-flex overflow-hidden rounded-md font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.74rem] leading-none shadow-[0_1px_0_rgba(15,23,42,.08)]"><span class="inline-flex items-center gap-1 bg-[#334155] px-2 py-1.5 text-white">coverage</span><span class="inline-flex items-center gap-1 bg-[#a14d07] px-2 py-1.5 font-bold text-white">87%</span></li>
  <li class="inline-flex overflow-hidden rounded-md font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.74rem] leading-none shadow-[0_1px_0_rgba(15,23,42,.08)]"><span class="inline-flex items-center gap-1 bg-[#334155] px-2 py-1.5 text-white">license</span><span class="inline-flex items-center gap-1 bg-[#6d28d9] px-2 py-1.5 font-bold text-white">MIT</span></li>
  <li class="inline-flex overflow-hidden rounded-md font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.74rem] leading-none shadow-[0_1px_0_rgba(15,23,42,.08)]"><span class="inline-flex items-center gap-1 bg-[#334155] px-2 py-1.5 text-white">node</span><span class="inline-flex items-center gap-1 bg-[#1d4ed8] px-2 py-1.5 font-bold text-white">≥ 18</span></li>
</ul>
<p class="mt-3.5 inline-flex items-center gap-2 rounded-full border border-[#e2e8f0] bg-white py-1 pr-1 pl-3 font-[ui-monospace,SFMono-Regular,Menlo,Consolas,monospace] text-[.82rem] font-bold text-[#0f172a]">v4.2.0 <span class="inline-flex items-center rounded-full border px-[7px] py-0.5 text-[.66rem] leading-[1.35] font-extrabold tracking-[.06em] whitespace-nowrap uppercase border-transparent bg-[#15803d] text-white font-[-apple-system,BlinkMacSystemFont,'Segoe_UI',Roboto,Helvetica,Arial,sans-serif]">Latest</span></p></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526072] uppercase">Step and progress badges</span>
<ol class="flex flex-wrap items-center gap-x-1.5 gap-y-2 [&>li]:flex [&>li]:items-center [&>li]:gap-1.5 [&>li+li]:before:h-0.5 [&>li+li]:before:w-4 [&>li+li]:before:rounded-sm [&>li+li]:before:bg-[#94a3b8]" aria-label="Checkout progress">
  <li><span class="inline-flex items-center gap-2 rounded-full border py-1 pr-3 pl-1 text-[.82rem] font-semibold border-[#e2e8f0] bg-white text-[#334155]"><i class="grid size-6 place-items-center rounded-full text-[.75rem] font-extrabold not-italic bg-[#15803d] text-white"><svg class="size-[13px]" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7.3l2.6 2.6L11 4.3"/></svg></i>Cart<span class="sr-only">, completed</span></span></li>
  <li><span class="inline-flex items-center gap-2 rounded-full border py-1 pr-3 pl-1 text-[.82rem] font-semibold border-[#e2e8f0] bg-white text-[#334155]"><i class="grid size-6 place-items-center rounded-full text-[.75rem] font-extrabold not-italic bg-[#15803d] text-white"><svg class="size-[13px]" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7.3l2.6 2.6L11 4.3"/></svg></i>Shipping<span class="sr-only">, completed</span></span></li>
  <li><span class="inline-flex items-center gap-2 rounded-full border py-1 pr-3 pl-1 text-[.82rem] font-semibold border-[#4f46e5] bg-[#eef2ff] text-[#3730a3]" aria-current="step"><i class="grid size-6 place-items-center rounded-full text-[.75rem] font-extrabold not-italic bg-[#4f46e5] text-white shadow-[0_0_0_3px_#c7d2fe]" aria-hidden="true">3</i>Payment<span class="sr-only">, current step</span></span></li>
  <li><span class="inline-flex items-center gap-2 rounded-full border py-1 pr-3 pl-1 text-[.82rem] font-semibold border-[#e2e8f0] bg-white text-[#334155]"><i class="grid size-6 place-items-center rounded-full text-[.75rem] font-extrabold not-italic bg-[#f1f5f9] text-[#334155]" aria-hidden="true">4</i>Review</span></li>
</ol>
<div class="mt-4 flex flex-wrap items-center gap-3">
  <span class="inline-flex items-center gap-2.5 rounded-full border border-[#e2e8f0] bg-white px-3 py-1.5 text-[.8rem] font-bold text-[#1e293b]">3 of 5 lessons<span class="h-1.5 w-16 overflow-hidden rounded-md bg-[#e2e8f0]" aria-hidden="true"><b class="block h-full w-[60%] rounded-[inherit] bg-[#4f46e5]"></b></span></span>
  <span class="inline-flex items-center gap-2.5 text-[.82rem] font-semibold text-[#334155]"><i class="grid size-12 place-items-center rounded-full [background:radial-gradient(closest-side,#fff_76%,transparent_78%),conic-gradient(#0f766e_72%,#e2e8f0_0)] text-[.7rem] font-extrabold text-[#0f172a] not-italic">72%</i>Profile complete</span>
</div></div>

About this set

Labels for products and features, and badges that show progress. A workspace menu marks items as New, Beta, Soon and Deprecated with small uppercase labels, and the Soon item is plain text rather than a dead link. Three product tiles with drawn illustrations carry sale and stock labels: a minus 30 percent label with Only 3 left and a struck-through old price, New with Free shipping, and a Sold out tile whose artwork is greyed. Version and build badges follow the familiar two-part shields style for version, build passing, coverage, license and node, plus a v4.2.0 Latest release pill. Step badges show a four-step checkout with ticks on finished steps and aria-current on the current one, and two progress badges show 3 of 5 lessons with a small bar and a 72 percent profile ring drawn with a conic gradient. Use them in navigation, shop grids, README-style pages and onboarding. Every label is a word or a number, the old price has hidden was text, and the ring and bar sit next to text that states the same value.

What’s included

  • New, Beta, Soon and Deprecated labels in a navigation menu
  • Sale, low stock, new, free shipping and sold out product labels
  • Two-part version and build badges in a monospace face
  • Checkout step badges with aria-current="step"
  • Progress pill with a bar and a conic-gradient completion ring

Accessibility

The menu is a labelled nav with aria-current on the active page, and the unavailable item is not a link. The old price reads as was €25.00 through hidden text, finished steps add completed, the current step uses aria-current="step", and the progress bar and ring are decorative because the same value is written beside them. Links show a 2px indigo focus outline and their hover transition stops under prefers-reduced-motion.

Customise it

Feature labels are .fl modifiers, sale labels .sl modifiers, and shields take their value colour from --v. Bootstrap uses .nav-pills with --bs-nav-* variables, .badge, .card and .progress with --bs-progress-* variables; in Tailwind edit the colour utilities and the conic-gradient value in the ring.