Verified and Role Badges in CSS, Bootstrap & Tailwind

Open demo

CSS code

HTML

<div><span class="lbl">Verified seal and name badges</span>
<ul class="people">
  <li class="person"><span class="ini" aria-hidden="true">AO</span><div><span class="nm">Ada Okafor <svg class="vf" viewBox="0 0 20 20" role="img" aria-label="Verified account"><path class="seal" d="M10 .6l2.04 1.77 2.66-.51.89 2.55 2.55.89-.51 2.66L19.4 10l-1.77 2.04.51 2.66-2.55.89-.89 2.55-2.66-.51L10 19.4l-2.04-1.77-2.66.51-.89-2.55-2.55-.89.51-2.66L.6 10l1.77-2.04-.51-2.66 2.55-.89.89-2.55 2.66.51z"/><path class="tick" d="M6.6 10.2l2.2 2.2 4.6-4.8"/></svg></span><small>@adaokafor · 18.4k followers</small></div></li>
  <li class="person"><span class="ini" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">NB</span><div><span class="nm">Nordbank <svg class="vf gold" viewBox="0 0 20 20" role="img" aria-label="Verified organisation"><path class="seal" d="M10 .6l2.04 1.77 2.66-.51.89 2.55 2.55.89-.51 2.66L19.4 10l-1.77 2.04.51 2.66-2.55.89-.89 2.55-2.66-.51L10 19.4l-2.04-1.77-2.66.51-.89-2.55-2.55-.89.51-2.66L.6 10l1.77-2.04-.51-2.66 2.55-.89.89-2.55 2.66.51z"/><path class="tick" d="M6.6 10.2l2.2 2.2 4.6-4.8"/></svg></span><small>Official account · banking</small></div></li>
  <li class="person"><span class="ini" style="--a:#c2410c;--b:#be185d" aria-hidden="true">LM</span><div><span class="nm">Luca Marini <span class="ub staff">Staff</span> <span class="ub op">OP<span class="sr-only"> (original poster)</span></span></span><small>Replied 12 minutes ago</small></div></li>
</ul></div>

<div><span class="lbl">Plan badges</span>
<ul class="row">
  <li><span class="ub free">Free</span></li>
  <li><span class="ub plus">Plus</span></li>
  <li><span class="ub pro"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2l1.8 3.8 4.2.5-3.1 2.9.8 4.1L8 11.3l-3.7 2 .8-4.1L2 6.3l4.2-.5z"/></svg>Pro</span></li>
  <li><span class="ub team"><svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="6" cy="6" r="2.2"/><path d="M2 13c.6-2.2 2.1-3.3 4-3.3s3.4 1.1 4 3.3"/><path d="M10.5 3.9a2.2 2.2 0 0 1 0 4.2M11.5 9.8c1.4.3 2.2 1.4 2.6 3.2"/></svg>Team</span></li>
  <li><span class="ub ent"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 12.5h11M3 11l-.8-6.5 3.6 2.8L8 3l2.2 4.3 3.6-2.8L13 11z"/></svg>Enterprise</span></li>
</ul></div>

<div><span class="lbl">Role badges in a member list</span>
<ul class="members">
  <li><span class="ini" aria-hidden="true">HS</span><span class="who"><b>Hana Sato</b><small>[email protected]</small></span><span class="ub owner"><svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="5.5" cy="10.5" r="3"/><path d="M7.7 8.3L13.5 2.5M11.5 4.5l1.5 1.5M10 6l1.2 1.2"/></svg>Owner</span></li>
  <li><span class="ini" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">FA</span><span class="who"><b>Femi Adeyemi</b><small>[email protected]</small></span><span class="ub admin"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.8l5 2v4c0 3-2.2 5.3-5 6.4-2.8-1.1-5-3.4-5-6.4v-4z"/></svg>Admin</span></li>
  <li><span class="ini" style="--a:#047857;--b:#0e7490" aria-hidden="true">PN</span><span class="who"><b>Priya Nair</b><small>[email protected]</small></span><span class="ub editor"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10.5 2.5l3 3L6 13H3v-3z"/></svg>Editor</span></li>
  <li><span class="ini" style="--a:#334155;--b:#475569" aria-hidden="true">EB</span><span class="who"><b>Elliot Brandt</b><small>[email protected]</small></span><span class="ub viewer"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="2"/></svg>Viewer</span></li>
  <li><span class="ini" style="--a:#b45309;--b:#c2410c" aria-hidden="true">KM</span><span class="who"><b>Kai Moreno</b><small>Invited · link expires in 6 days</small></span><span class="ub guest"><svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="5.5"/><path d="M8 5v3.2l2 1.3"/></svg>Guest</span></li>
</ul></div>

<div><span class="lbl">Corner badges on profile cards</span>
<div class="cards">
  <article class="pcard"><span class="ribbon">Top 1%</span><span class="ini" aria-hidden="true">MC</span><h3>Maya Chen</h3><p>Answered 1,204 questions</p></article>
  <article class="pcard"><span class="av-tag"><span class="ini" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">KM</span><span class="ub pro">Pro</span></span><h3>Kofi Mensah</h3><p>Motion designer · Accra</p></article>
  <article class="pcard"><span class="tab"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2l1.8 3.8 4.2.5-3.1 2.9.8 4.1L8 11.3l-3.7 2 .8-4.1L2 6.3l4.2-.5z"/></svg>Mentor</span><span class="ini" style="--a:#c2410c;--b:#be185d" aria-hidden="true">SL</span><h3>Sofia Lindqvist</h3><p>Mentoring 6 junior designers</p></article>
</div></div>

CSS

/* User badges: a verified seal with hidden text, plan and role badges that always carry a word, and corner badges on profile cards. */
.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}
.ub{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid transparent;border-radius:999px;font-size:.72rem;font-weight:700;
  line-height:1.3;letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
.ub svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* verified seal */
.vf{display:inline-block;width:18px;height:18px;flex:none;vertical-align:-3px}
.vf .seal{fill:#2563eb;stroke:#2563eb;stroke-width:1.2;stroke-linejoin:round}
.vf .tick{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vf.gold .seal{fill:#b45309;stroke:#b45309}
/* name rows */
.people{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.person{display:flex;align-items:center;gap:12px}
.ini{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--a,#4f46e5),var(--b,#9333ea));
  color:#fff;font-size:.82rem;font-weight:700}
.person .nm{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.95rem;font-weight:700;color:#0f172a}
.person small{display:block;margin-top:2px;font-size:.8rem;color:#526072}
.ub.staff{background:#0f172a;color:#fff}
.ub.op{background:#e0e7ff;color:#3730a3}
/* plan badges */
.ub.free{border-color:#94a3b8;color:#334155;background:#fff}
.ub.plus{background:#dbeafe;color:#1e40af}
.ub.pro{background:linear-gradient(135deg,#6d28d9,#c026d3);color:#fff;text-transform:uppercase;letter-spacing:.08em}
.ub.team{background:#0f172a;color:#fff}
.ub.ent{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#451a03;border-color:#d97706}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
/* role badges in a member list */
.members{margin:0;padding:6px 16px;list-style:none;border:1px solid #e2e8f0;border-radius:16px;background:#fff}
.members li{display:flex;align-items:center;gap:12px;padding:12px 0}
.members li+li{border-top:1px solid #f1f5f9}
.members .who{flex:1;min-width:0}
.members b{display:block;font-size:.9rem;color:#0f172a}
.members small{display:block;font-size:.78rem;color:#526072;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ub.owner{background:#fef3c7;color:#92400e}
.ub.admin{background:#fee2e2;color:#991b1b}
.ub.editor{background:#dcfce7;color:#166534}
.ub.viewer{background:#f1f5f9;color:#334155}
.ub.guest{border:1px dashed #64748b;color:#334155;background:#fff}
/* corner badges on profile cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.pcard{position:relative;overflow:hidden;padding:26px 18px 20px;border:1px solid #e2e8f0;border-radius:18px;background:#fff;text-align:center}
.pcard .ini{width:64px;height:64px;margin:0 auto;font-size:1.3rem}
.pcard h3{margin-top:14px;font-size:.98rem;font-weight:700;color:#0f172a}
.pcard p{margin-top:3px;font-size:.8rem;color:#526072}
.ribbon{position:absolute;top:18px;right:-34px;width:130px;padding:5px 0;transform:rotate(45deg);background:#be185d;color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center;box-shadow:0 4px 10px -4px rgba(190,24,93,.6)}
.av-tag{position:relative;display:inline-block}
.av-tag .ub{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);padding:2px 8px;font-size:.62rem;box-shadow:0 0 0 2.5px #fff}
.tab{position:absolute;top:0;left:0;display:inline-flex;align-items:center;gap:5px;padding:6px 12px 6px 10px;border-bottom-right-radius:14px;
  background:#0f766e;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.04em}
.tab svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML

<div><span class="lbl">Verified seal and name badges</span>
<ul class="people list-unstyled m-0">
  <li class="person d-flex align-items-center"><span class="ini rounded-circle" aria-hidden="true">AO</span><div><span class="nm">Ada Okafor <svg class="vf" viewBox="0 0 20 20" role="img" aria-label="Verified account"><path class="seal" d="M10 .6l2.04 1.77 2.66-.51.89 2.55 2.55.89-.51 2.66L19.4 10l-1.77 2.04.51 2.66-2.55.89-.89 2.55-2.66-.51L10 19.4l-2.04-1.77-2.66.51-.89-2.55-2.55-.89.51-2.66L.6 10l1.77-2.04-.51-2.66 2.55-.89.89-2.55 2.66.51z"/><path class="tick" d="M6.6 10.2l2.2 2.2 4.6-4.8"/></svg></span><small>@adaokafor · 18.4k followers</small></div></li>
  <li class="person d-flex align-items-center"><span class="ini rounded-circle" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">NB</span><div><span class="nm">Nordbank <svg class="vf gold" viewBox="0 0 20 20" role="img" aria-label="Verified organisation"><path class="seal" d="M10 .6l2.04 1.77 2.66-.51.89 2.55 2.55.89-.51 2.66L19.4 10l-1.77 2.04.51 2.66-2.55.89-.89 2.55-2.66-.51L10 19.4l-2.04-1.77-2.66.51-.89-2.55-2.55-.89.51-2.66L.6 10l1.77-2.04-.51-2.66 2.55-.89.89-2.55 2.66.51z"/><path class="tick" d="M6.6 10.2l2.2 2.2 4.6-4.8"/></svg></span><small>Official account · banking</small></div></li>
  <li class="person d-flex align-items-center"><span class="ini rounded-circle" style="--a:#c2410c;--b:#be185d" aria-hidden="true">LM</span><div><span class="nm">Luca Marini <span class="badge rounded-pill ub staff">Staff</span> <span class="badge rounded-pill ub op">OP<span class="visually-hidden"> (original poster)</span></span></span><small>Replied 12 minutes ago</small></div></li>
</ul></div>

<div><span class="lbl">Plan badges</span>
<ul class="ub-row list-unstyled d-flex flex-wrap align-items-center m-0">
  <li><span class="badge rounded-pill ub free">Free</span></li>
  <li><span class="badge rounded-pill ub plus">Plus</span></li>
  <li><span class="badge rounded-pill ub pro"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2l1.8 3.8 4.2.5-3.1 2.9.8 4.1L8 11.3l-3.7 2 .8-4.1L2 6.3l4.2-.5z"/></svg>Pro</span></li>
  <li><span class="badge rounded-pill ub team"><svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="6" cy="6" r="2.2"/><path d="M2 13c.6-2.2 2.1-3.3 4-3.3s3.4 1.1 4 3.3"/><path d="M10.5 3.9a2.2 2.2 0 0 1 0 4.2M11.5 9.8c1.4.3 2.2 1.4 2.6 3.2"/></svg>Team</span></li>
  <li><span class="badge rounded-pill ub ent"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 12.5h11M3 11l-.8-6.5 3.6 2.8L8 3l2.2 4.3 3.6-2.8L13 11z"/></svg>Enterprise</span></li>
</ul></div>

<div><span class="lbl">Role badges in a member list</span>
<ul class="list-group members">
  <li class="list-group-item d-flex align-items-center"><span class="ini rounded-circle" aria-hidden="true">HS</span><span class="who"><b>Hana Sato</b><small>[email protected]</small></span><span class="badge rounded-pill ub owner"><svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="5.5" cy="10.5" r="3"/><path d="M7.7 8.3L13.5 2.5M11.5 4.5l1.5 1.5M10 6l1.2 1.2"/></svg>Owner</span></li>
  <li class="list-group-item d-flex align-items-center"><span class="ini rounded-circle" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">FA</span><span class="who"><b>Femi Adeyemi</b><small>[email protected]</small></span><span class="badge rounded-pill ub admin"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.8l5 2v4c0 3-2.2 5.3-5 6.4-2.8-1.1-5-3.4-5-6.4v-4z"/></svg>Admin</span></li>
  <li class="list-group-item d-flex align-items-center"><span class="ini rounded-circle" style="--a:#047857;--b:#0e7490" aria-hidden="true">PN</span><span class="who"><b>Priya Nair</b><small>[email protected]</small></span><span class="badge rounded-pill ub editor"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10.5 2.5l3 3L6 13H3v-3z"/></svg>Editor</span></li>
  <li class="list-group-item d-flex align-items-center"><span class="ini rounded-circle" style="--a:#334155;--b:#475569" aria-hidden="true">EB</span><span class="who"><b>Elliot Brandt</b><small>[email protected]</small></span><span class="badge rounded-pill ub viewer"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="2"/></svg>Viewer</span></li>
  <li class="list-group-item d-flex align-items-center"><span class="ini rounded-circle" style="--a:#b45309;--b:#c2410c" aria-hidden="true">KM</span><span class="who"><b>Kai Moreno</b><small>Invited · link expires in 6 days</small></span><span class="badge rounded-pill ub guest"><svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="5.5"/><path d="M8 5v3.2l2 1.3"/></svg>Guest</span></li>
</ul></div>

<div><span class="lbl">Corner badges on profile cards</span>
<div class="cards">
  <article class="card pcard"><span class="ribbon">Top 1%</span><span class="ini rounded-circle" aria-hidden="true">MC</span><h3>Maya Chen</h3><p>Answered 1,204 questions</p></article>
  <article class="card pcard"><span class="av-tag"><span class="ini rounded-circle" style="--a:#0f766e;--b:#0369a1" aria-hidden="true">KM</span><span class="badge rounded-pill ub pro">Pro</span></span><h3>Kofi Mensah</h3><p>Motion designer · Accra</p></article>
  <article class="card pcard"><span class="tab"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2l1.8 3.8 4.2.5-3.1 2.9.8 4.1L8 11.3l-3.7 2 .8-4.1L2 6.3l4.2-.5z"/></svg>Mentor</span><span class="ini rounded-circle" style="--a:#c2410c;--b:#be185d" aria-hidden="true">SL</span><h3>Sofia Lindqvist</h3><p>Mentoring 6 junior designers</p></article>
</div></div>

CSS

/* User badges on Bootstrap's .badge, .rounded-pill, .list-group and .card, restyled through --bs-badge-*, --bs-list-group-* and --bs-card-* variables.
   The verified seal has hidden text; plan and role badges always carry a word. */
.ub{--bs-badge-padding-x:9px;--bs-badge-padding-y:3px;--bs-badge-font-size:.72rem;--bs-badge-font-weight:700;--bs-badge-color:inherit;
  display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;line-height:1.3;letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
.ub svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* verified seal */
.vf{display:inline-block;width:18px;height:18px;flex:none;vertical-align:-3px}
.vf .seal{fill:#2563eb;stroke:#2563eb;stroke-width:1.2;stroke-linejoin:round}
.vf .tick{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vf.gold .seal{fill:#b45309;stroke:#b45309}
/* name rows */
.people{display:grid;gap:14px}
.person{gap:12px}
.ini{display:grid;place-items:center;flex:none;width:40px;height:40px;background:linear-gradient(135deg,var(--a,#4f46e5),var(--b,#9333ea));
  color:#fff;font-size:.82rem;font-weight:700}
.person .nm{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.95rem;font-weight:700;color:#0f172a}
.person small{display:block;margin-top:2px;font-size:.8rem;color:#526072}
.ub.staff{background:#0f172a;color:#fff}
.ub.op{background:#e0e7ff;color:#3730a3}
/* plan badges */
.ub.free{border-color:#94a3b8;color:#334155;background:#fff}
.ub.plus{background:#dbeafe;color:#1e40af}
.ub.pro{background:linear-gradient(135deg,#6d28d9,#c026d3);color:#fff;text-transform:uppercase;letter-spacing:.08em}
.ub.team{background:#0f172a;color:#fff}
.ub.ent{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#451a03;border-color:#d97706}
.ub-row{gap:10px}
/* role badges in a member list */
.members{--bs-list-group-item-padding-x:0;--bs-list-group-item-padding-y:12px;--bs-list-group-border-width:0;--bs-list-group-color:#0f172a;padding:6px 16px;border:1px solid #e2e8f0;border-radius:16px;background:#fff}
.members .list-group-item{gap:12px}
.members .list-group-item+.list-group-item{border-top:1px solid #f1f5f9}
.members .who{flex:1;min-width:0}
.members b{display:block;font-size:.9rem;color:#0f172a}
.members small{display:block;font-size:.78rem;color:#526072;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ub.owner{background:#fef3c7;color:#92400e}
.ub.admin{background:#fee2e2;color:#991b1b}
.ub.editor{background:#dcfce7;color:#166534}
.ub.viewer{background:#f1f5f9;color:#334155}
.ub.guest{border:1px dashed #64748b;color:#334155;background:#fff}
/* corner badges on profile cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.pcard{--bs-card-border-color:#e2e8f0;--bs-card-border-radius:18px;overflow:hidden;padding:26px 18px 20px;text-align:center}
.pcard .ini{width:64px;height:64px;margin:0 auto;font-size:1.3rem}
.pcard h3{margin:14px 0 0;font-size:.98rem;font-weight:700;color:#0f172a}
.pcard p{margin:3px 0 0;font-size:.8rem;color:#526072}
.ribbon{position:absolute;top:18px;right:-34px;width:130px;padding:5px 0;transform:rotate(45deg);background:#be185d;color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center;box-shadow:0 4px 10px -4px rgba(190,24,93,.6)}
.av-tag{position:relative;display:inline-block}
.av-tag .ub{--bs-badge-padding-x:8px;--bs-badge-padding-y:2px;--bs-badge-font-size:.62rem;position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);box-shadow:0 0 0 2.5px #fff}
.tab{position:absolute;top:0;left:0;display:inline-flex;align-items:center;gap:5px;padding:6px 12px 6px 10px;border-bottom-right-radius:14px;
  background:#0f766e;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.04em}
.tab svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526072] uppercase">Verified seal and name badges</span>
<ul class="grid gap-3.5">
  <li class="flex items-center gap-3"><span class="grid flex-none place-items-center size-10 text-[.82rem] rounded-full bg-linear-135 from-[#4f46e5] to-[#9333ea] font-bold text-white" aria-hidden="true">AO</span><div><span class="flex flex-wrap items-center gap-1.5 text-[.95rem] font-bold text-[#0f172a]">Ada Okafor <svg class="inline-block size-[18px] flex-none align-[-3px]" viewBox="0 0 20 20" role="img" aria-label="Verified account"><path d="M10 .6l2.04 1.77 2.66-.51.89 2.55 2.55.89-.51 2.66L19.4 10l-1.77 2.04.51 2.66-2.55.89-.89 2.55-2.66-.51L10 19.4l-2.04-1.77-2.66.51-.89-2.55-2.55-.89.51-2.66L.6 10l1.77-2.04-.51-2.66 2.55-.89.89-2.55 2.66.51z" fill="#2563eb" stroke="#2563eb" stroke-width="1.2" stroke-linejoin="round"/><path d="M6.6 10.2l2.2 2.2 4.6-4.8" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span><small class="mt-0.5 block text-[.8rem] text-[#526072]">@adaokafor · 18.4k followers</small></div></li>
  <li class="flex items-center gap-3"><span class="grid flex-none place-items-center size-10 text-[.82rem] rounded-full bg-linear-135 from-[#0f766e] to-[#0369a1] font-bold text-white" aria-hidden="true">NB</span><div><span class="flex flex-wrap items-center gap-1.5 text-[.95rem] font-bold text-[#0f172a]">Nordbank <svg class="inline-block size-[18px] flex-none align-[-3px]" viewBox="0 0 20 20" role="img" aria-label="Verified organisation"><path d="M10 .6l2.04 1.77 2.66-.51.89 2.55 2.55.89-.51 2.66L19.4 10l-1.77 2.04.51 2.66-2.55.89-.89 2.55-2.66-.51L10 19.4l-2.04-1.77-2.66.51-.89-2.55-2.55-.89.51-2.66L.6 10l1.77-2.04-.51-2.66 2.55-.89.89-2.55 2.66.51z" fill="#b45309" stroke="#b45309" stroke-width="1.2" stroke-linejoin="round"/><path d="M6.6 10.2l2.2 2.2 4.6-4.8" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span><small class="mt-0.5 block text-[.8rem] text-[#526072]">Official account · banking</small></div></li>
  <li class="flex items-center gap-3"><span class="grid flex-none place-items-center size-10 text-[.82rem] rounded-full bg-linear-135 from-[#c2410c] to-[#be185d] font-bold text-white" aria-hidden="true">LM</span><div><span class="flex flex-wrap items-center gap-1.5 text-[.95rem] font-bold text-[#0f172a]">Luca Marini <span class="inline-flex items-center gap-[5px] rounded-full border px-[9px] py-[3px] align-middle text-[.72rem] leading-[1.3] font-bold tracking-[.02em] whitespace-nowrap bg-[#0f172a] text-white border-transparent">Staff</span> <span class="inline-flex items-center gap-[5px] rounded-full border px-[9px] py-[3px] align-middle text-[.72rem] leading-[1.3] font-bold tracking-[.02em] whitespace-nowrap bg-[#e0e7ff] text-[#3730a3] border-transparent">OP<span class="sr-only"> (original poster)</span></span></span><small class="mt-0.5 block text-[.8rem] text-[#526072]">Replied 12 minutes ago</small></div></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526072] uppercase">Plan badges</span>
<ul class="flex flex-wrap items-center gap-2.5">
  <li><span class="inline-flex items-center gap-[5px] rounded-full border px-[9px] py-[3px] align-middle text-[.72rem] leading-[1.3] font-bold tracking-[.02em] whitespace-nowrap border-[#94a3b8] bg-white text-[#334155]">Free</span></li>
  <li><span class="inline-flex items-center gap-[5px] rounded-full border px-[9px] py-[3px] align-middle text-[.72rem] leading-[1.3] font-bold tracking-[.02em] whitespace-nowrap bg-[#dbeafe] text-[#1e40af] border-transparent">Plus</span></li>
  <li><span class="inline-flex items-center gap-[5px] rounded-full border px-[9px] py-[3px] align-middle text-[.72rem] leading-[1.3] font-bold tracking-[.02em] whitespace-nowrap bg-linear-135 from-[#6d28d9] to-[#c026d3] text-white uppercase tracking-[.08em] border-transparent"><svg class="size-3 flex-none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2l1.8 3.8 4.2.5-3.1 2.9.8 4.1L8 11.3l-3.7 2 .8-4.1L2 6.3l4.2-.5z"/></svg>Pro</span></li>
  <li><span class="inline-flex items-center gap-[5px] rounded-full border px-[9px] py-[3px] align-middle text-[.72rem] leading-[1.3] font-bold tracking-[.02em] whitespace-nowrap bg-[#0f172a] text-white border-transparent"><svg class="size-3 flex-none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="6" r="2.2"/><path d="M2 13c.6-2.2 2.1-3.3 4-3.3s3.4 1.1 4 3.3"/><path d="M10.5 3.9a2.2 2.2 0 0 1 0 4.2M11.5 9.8c1.4.3 2.2 1.4 2.6 3.2"/></svg>Team</span></li>
  <li><span class="inline-flex items-center gap-[5px] rounded-full border px-[9px] py-[3px] align-middle text-[.72rem] leading-[1.3] font-bold tracking-[.02em] whitespace-nowrap border-[#d97706] bg-linear-135 from-[#fde68a] to-[#f59e0b] text-[#451a03]"><svg class="size-3 flex-none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 12.5h11M3 11l-.8-6.5 3.6 2.8L8 3l2.2 4.3 3.6-2.8L13 11z"/></svg>Enterprise</span></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526072] uppercase">Role badges in a member list</span>
<ul class="rounded-2xl border border-[#e2e8f0] bg-white px-4 py-1.5">
  <li class="flex items-center gap-3 py-3"><span class="grid flex-none place-items-center size-10 text-[.82rem] rounded-full bg-linear-135 from-[#4f46e5] to-[#9333ea] font-bold text-white" aria-hidden="true">HS</span><span class="min-w-0 flex-1"><b class="block text-[.9rem] text-[#0f172a]">Hana Sato</b><small class="block truncate text-[.78rem] text-[#526072]">[email protected]</small></span><span class="inline-flex items-center gap-[5px] rounded-full border px-[9px] py-[3px] align-middle text-[.72rem] leading-[1.3] font-bold tracking-[.02em] whitespace-nowrap bg-[#fef3c7] text-[#92400e] border-transparent"><svg class="size-3 flex-none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="5.5" cy="10.5" r="3"/><path d="M7.7 8.3L13.5 2.5M11.5 4.5l1.5 1.5M10 6l1.2 1.2"/></svg>Owner</span></li>
  <li class="flex items-center gap-3 py-3 border-t border-[#f1f5f9]"><span class="grid flex-none place-items-center size-10 text-[.82rem] rounded-full bg-linear-135 from-[#0f766e] to-[#0369a1] font-bold text-white" aria-hidden="true">FA</span><span class="min-w-0 flex-1"><b class="block text-[.9rem] text-[#0f172a]">Femi Adeyemi</b><small class="block truncate text-[.78rem] text-[#526072]">[email protected]</small></span><span class="inline-flex items-center gap-[5px] rounded-full border px-[9px] py-[3px] align-middle text-[.72rem] leading-[1.3] font-bold tracking-[.02em] whitespace-nowrap bg-[#fee2e2] text-[#991b1b] border-transparent"><svg class="size-3 flex-none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 1.8l5 2v4c0 3-2.2 5.3-5 6.4-2.8-1.1-5-3.4-5-6.4v-4z"/></svg>Admin</span></li>
  <li class="flex items-center gap-3 py-3 border-t border-[#f1f5f9]"><span class="grid flex-none place-items-center size-10 text-[.82rem] rounded-full bg-linear-135 from-[#047857] to-[#0e7490] font-bold text-white" aria-hidden="true">PN</span><span class="min-w-0 flex-1"><b class="block text-[.9rem] text-[#0f172a]">Priya Nair</b><small class="block truncate text-[.78rem] text-[#526072]">[email protected]</small></span><span class="inline-flex items-center gap-[5px] rounded-full border px-[9px] py-[3px] align-middle text-[.72rem] leading-[1.3] font-bold tracking-[.02em] whitespace-nowrap bg-[#dcfce7] text-[#166534] border-transparent"><svg class="size-3 flex-none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.5 2.5l3 3L6 13H3v-3z"/></svg>Editor</span></li>
  <li class="flex items-center gap-3 py-3 border-t border-[#f1f5f9]"><span class="grid flex-none place-items-center size-10 text-[.82rem] rounded-full bg-linear-135 from-[#334155] to-[#475569] font-bold text-white" aria-hidden="true">EB</span><span class="min-w-0 flex-1"><b class="block text-[.9rem] text-[#0f172a]">Elliot Brandt</b><small class="block truncate text-[.78rem] text-[#526072]">[email protected]</small></span><span class="inline-flex items-center gap-[5px] rounded-full border px-[9px] py-[3px] align-middle text-[.72rem] leading-[1.3] font-bold tracking-[.02em] whitespace-nowrap bg-[#f1f5f9] text-[#334155] border-transparent"><svg class="size-3 flex-none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="2"/></svg>Viewer</span></li>
  <li class="flex items-center gap-3 py-3 border-t border-[#f1f5f9]"><span class="grid flex-none place-items-center size-10 text-[.82rem] rounded-full bg-linear-135 from-[#b45309] to-[#c2410c] font-bold text-white" aria-hidden="true">KM</span><span class="min-w-0 flex-1"><b class="block text-[.9rem] text-[#0f172a]">Kai Moreno</b><small class="block truncate text-[.78rem] text-[#526072]">Invited · link expires in 6 days</small></span><span class="inline-flex items-center gap-[5px] rounded-full border px-[9px] py-[3px] align-middle text-[.72rem] leading-[1.3] font-bold tracking-[.02em] whitespace-nowrap border-dashed border-[#64748b] bg-white text-[#334155]"><svg class="size-3 flex-none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="5.5"/><path d="M8 5v3.2l2 1.3"/></svg>Guest</span></li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#526072] uppercase">Corner badges on profile cards</span>
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <article class="relative overflow-hidden rounded-[18px] border border-[#e2e8f0] bg-white px-[18px] pt-[26px] pb-5 text-center"><span class="absolute top-[18px] -right-[34px] w-[130px] rotate-45 bg-[#be185d] py-[5px] text-center text-[.68rem] font-extrabold tracking-[.08em] text-white uppercase shadow-[0_4px_10px_-4px_rgba(190,24,93,.6)]">Top 1%</span><span class="grid flex-none place-items-center mx-auto size-16 text-[1.3rem] rounded-full bg-linear-135 from-[#4f46e5] to-[#9333ea] font-bold text-white" aria-hidden="true">MC</span><h3 class="mt-3.5 text-[.98rem] font-bold text-[#0f172a]">Maya Chen</h3><p class="mt-[3px] text-[.8rem] text-[#526072]">Answered 1,204 questions</p></article>
  <article class="relative overflow-hidden rounded-[18px] border border-[#e2e8f0] bg-white px-[18px] pt-[26px] pb-5 text-center"><span class="relative inline-block"><span class="grid flex-none place-items-center mx-auto size-16 text-[1.3rem] rounded-full bg-linear-135 from-[#0f766e] to-[#0369a1] font-bold text-white" aria-hidden="true">KM</span><span class="absolute -bottom-2 left-1/2 inline-flex -translate-x-1/2 items-center rounded-full bg-linear-135 from-[#6d28d9] to-[#c026d3] px-2 py-0.5 text-[.62rem] leading-[1.3] font-bold tracking-[.08em] whitespace-nowrap text-white uppercase shadow-[0_0_0_2.5px_#fff]">Pro</span></span><h3 class="mt-3.5 text-[.98rem] font-bold text-[#0f172a]">Kofi Mensah</h3><p class="mt-[3px] text-[.8rem] text-[#526072]">Motion designer · Accra</p></article>
  <article class="relative overflow-hidden rounded-[18px] border border-[#e2e8f0] bg-white px-[18px] pt-[26px] pb-5 text-center"><span class="absolute top-0 left-0 inline-flex items-center gap-[5px] rounded-br-[14px] bg-[#0f766e] py-1.5 pr-3 pl-2.5 text-[.7rem] font-bold tracking-[.04em] text-white"><svg class="size-3 flex-none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2l1.8 3.8 4.2.5-3.1 2.9.8 4.1L8 11.3l-3.7 2 .8-4.1L2 6.3l4.2-.5z"/></svg>Mentor</span><span class="grid flex-none place-items-center mx-auto size-16 text-[1.3rem] rounded-full bg-linear-135 from-[#c2410c] to-[#be185d] font-bold text-white" aria-hidden="true">SL</span><h3 class="mt-3.5 text-[.98rem] font-bold text-[#0f172a]">Sofia Lindqvist</h3><p class="mt-[3px] text-[.8rem] text-[#526072]">Mentoring 6 junior designers</p></article>
</div></div>

About this set

Badges that say something about a person or an account. A scalloped verified seal sits after a name in blue for a person and in amber for an organisation, and a forum reply shows Staff and OP name badges. Plan badges cover Free, Plus, a gradient Pro, Team and a gold Enterprise, each with a word and, where it helps, a small icon. Role badges sit at the end of each row in a member list: Owner, Admin, Editor, Viewer and a dashed Guest badge for a pending invitation, each with its own icon and tint. Three profile cards show corner badges: a diagonal ribbon reading Top 1 percent, a Pro tag that overlaps the bottom of the avatar, and a Mentor tab fixed to the top left corner. Use the seal next to names in feeds and search results, plan badges in account menus and billing pages, role badges in team settings, and corner badges on directory or community cards. The seal is an SVG with role=”img” and an aria-label such as Verified account, and the OP badge spells out original poster for screen readers.

What’s included

Scalloped verified seal with an accessible label
Plan badges from Free to Enterprise, including a gradient Pro
Role badges with icons in a member list
Diagonal ribbon, overlapping avatar tag and corner tab on cards
Every badge carries a visible word

Accessibility

The verified seal is an SVG with role="img" and an aria-label of Verified account or Verified organisation. Plan, role and corner badges are visible words, the OP badge adds visually hidden text that expands it to original poster, and decorative icons are aria-hidden. The set has no interactive elements or animations.

Customise it

Each badge is a .ub modifier that sets background, border and text colour; the seal colour is the fill and stroke of .vf .seal. Bootstrap uses the same modifiers on .badge.rounded-pill with --bs-badge-* variables and .list-group for the member list; in Tailwind edit the bg-, text- and border- utilities.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Badges & Avatars