Badges

Badges can be used to provide notifications to users.

Badge Examples

Lists

  • New Emails10 new
  • New Voicemails4
  • New Texts2
html
<ul class="no-bullets">
  <li>New Emails<span class="badge bg-primary">10 new</span></li>
  <li>New Voicemails<span class="badge bg-secondary">4</span></li>
  <li>New Texts<span class="badge">2</span></li>
</ul>

Accordions

Accordions are elements that can be clicked to reveal or hide content associated with them.

html
<div class="accordion">
  <input type="checkbox" name="accordion-sample" id="accordion-sample">
  <label for="accordion-sample">
    What is an accordion?<span class="badge bg-primary">New</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
  </label>
  <div class="details">
    <p>Accordions are elements that can be clicked to reveal or hide content associated with them.</p>
  </div>
</div>