Filter & Sort

Filtering & sorting is compromised of the badge component and used to organize and sort content.

Filter & Sort

Used to organize or sort content

Filter


Dismissible
Primary Care Providers

HTML
<span class="badge badge-primary">
  Primary Care Providers
  <i class="fa-solid fa-xmark"></i>
</span>
Selectable / Selected
$0 Copay

HTML
<span class="badge badge-primary">
  $0 Copay
</span>
Not Selected
Worldwide Coverage

HTML
<span class="badge badge-gray">
  Worldwide Coverage
</span>


Sort


Descending

Network: A-Z

HTML
<span class="badge badge-primary">
  Network: A-Z
  <i class="fa-solid fa-arrow-up"></i>
</span>


Price: High-Low

HTML
<span class="badge badge-primary">
  Price: High-Low
  <i class="fa-solid fa-arrow-up"></i>
</span>


Name: A-Z

HTML
<span class="badge badge-primary">
  Name: A-Z
  <i class="fa-solid fa-arrow-up"></i>
</span>
Ascending

Network: A-Z

HTML
<span class="badge badge-primary">
  Network: A-Z
  <i class="fa-solid fa-arrow-down"></i>
</span>


Price: High-Low

HTML
<span class="badge badge-primary">
  Price: High-Low
  <i class="fa-solid fa-arrow-down"></i>
</span>


Name: A-Z

HTML
<span class="badge badge-primary">
  Name: A-Z
  <i class="fa-solid fa-arrow-down"></i>
</span>