Vitreo
Components

Chips

Small, removable choices

Removable

Select the cross to remove one.

Design Engineering Research Marketing
Code 
<span class="chip">Design<button type="button" aria-label="Remove Design" data-remove><svg class="icon icon-sm" viewBox="0 0 24 24" aria-hidden="true">…</svg></button></span>
<span class="chip">Engineering<button type="button" aria-label="Remove Engineering" data-remove><svg class="icon icon-sm" viewBox="0 0 24 24" aria-hidden="true">…</svg></button></span>
<span class="chip">Research<button type="button" aria-label="Remove Research" data-remove><svg class="icon icon-sm" viewBox="0 0 24 24" aria-hidden="true">…</svg></button></span>
<span class="chip">Marketing<button type="button" aria-label="Remove Marketing" data-remove><svg class="icon icon-sm" viewBox="0 0 24 24" aria-hidden="true">…</svg></button></span>

With avatars

MLMaya TOTheo ICInes
Code 
<span class="chip"><span class="avatar avatar-xs" style="background: linear-gradient(135deg, #8E9AFF, #4645BB)">ML</span>Maya</span>
<span class="chip"><span class="avatar avatar-xs" style="background: linear-gradient(135deg, #5EC8F8, #1C64C8)">TO</span>Theo</span>
<span class="chip"><span class="avatar avatar-xs" style="background: linear-gradient(135deg, #4ADEB5, #0E7A62)">IC</span>Ines</span>

Filters

Pills that narrow a list.

  • Safari checkout fixOpen
  • Faster searchClosed
  • Contrast in dark chartsOpen
  • Old pricing pageArchived
Code 
<div class="pills" role="group" aria-label="Status" data-filter-list="pill-demo">
  <button type="button" class="pill" aria-pressed="true" data-value>All</button>
  <button type="button" class="pill" aria-pressed="false" data-value="open">Open</button>
  <button type="button" class="pill" aria-pressed="false" data-value="closed">Closed</button>
  <button type="button" class="pill" aria-pressed="false" data-value="archived">Archived</button>
</div>
<ul class="list list-divided mt-3" id="pill-demo">
  <li class="list-empty" hidden>Nothing with this status</li>
  <li data-tags="open">
    <div class="list-row"><span>Safari checkout fix</span><span class="badge badge-info badge-sm">Open</span></div>
  </li>
  <li data-tags="closed">
    <div class="list-row"><span>Faster search</span><span class="badge badge-success badge-sm">Closed</span></div>
  </li>
  <li data-tags="open">
    <div class="list-row"><span>Contrast in dark charts</span><span class="badge badge-info badge-sm">Open</span></div>
  </li>
  <li data-tags="archived">
    <div class="list-row"><span>Old pricing page</span><span class="badge badge-sm">Archived</span></div>
  </li>
</ul>
© Vitreo. All rights reserved.