Facet list

The facet list pattern is used to present different types of filters. Typical use could be a listings page, such as a search, where results can be filtered.

A facet list can be used as standalone filter or grouped together to form a powerful filtering tool, making use of the different filter types available. This can be combined with the filter box pattern to further highlight which options have been selected at any given time.

Options available

Single category option

A single list of options is shown and only one option should be selected at a time. Once an item is selected all other choices are hidden.

Example

Filter

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6
Code 
<!-- Begin pattern: facet list //-->
<h2 class="font-scale-1 facet-title">Filter</h2>
<div class="list-group font-scale-minus-1 facet">
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 1
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 2
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 3
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 4
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 5
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 6
    </span>
  </a>
</div>
<!-- End pattern: facet list //-->

Single category option - selected

This example shows 'Option 1' selected with all other options hidden.

  • Clicking on either the 'Clear all' link or selected option should reset the filter and show all original options.
Example

Filter

Clear all
Option 1 (Selected)
Code 
<!-- Begin pattern: facet list //-->
<h2 class="font-scale-1 facet-title">Filter</h2>
<a href="#" class="facet-clear"><i class="fa fa-times" aria-hidden="true"></i>Clear all</a>
<div class="list-group font-scale-minus-1 facet">
  <a class="list-group-item" href="#">
    <span class="item-label">
      <i class="fa fa-times" aria-hidden="true"></i>
      Option 1
      <span class="sr-only">(Selected)</span>
    </span>
  </a>
</div>
<!-- End pattern: facet list //-->

Multiple category options

More than one option can be selected at a time with checkbox controls to denote which options are selected.

Example

Filter

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6
Code 
<!-- Begin pattern: facet list //-->
<h2 class="font-scale-1 facet-title">Filter</h2>
<div class="list-group font-scale-minus-1 facet">
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-square" aria-hidden="true"></i></span>
      Option 1
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-square" aria-hidden="true"></i></span>
      Option 2
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-square" aria-hidden="true"></i></span>
      Option 3
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-square" aria-hidden="true"></i></span>
      Option 4
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-square" aria-hidden="true"></i></span>
      Option 5
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-square" aria-hidden="true"></i></span>
      Option 6
    </span>
  </a>
</div>
<!-- End pattern: facet list //-->

Multiple category options - selected

This example shows 'Option 1' and 'Option 4' selected.

  • Clicking on the 'Clear all' link should reset the filter and remove all selected filter options.
  • Clicking on an individual option should toggle its state.
Example

Filter

Clear all
Option 1 (Selected) Option 2 Option 3 Option 4 (Selected) Option 5 Option 6
Code 
<!-- Begin pattern: facet list //-->
<h2 class="font-scale-1 facet-title">Filter</h2>
<a href="#" class="facet-clear"><i class="fa fa-times" aria-hidden="true"></i>Clear all</a>
<div class="list-group font-scale-minus-1 facet">
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-check-square" aria-hidden="true"></i></span>
      Option 1
      <span class="sr-only">(Selected)</span>
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-square" aria-hidden="true"></i></span>
      Option 2
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-square" aria-hidden="true"></i></span>
      Option 3
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-check-square" aria-hidden="true"></i></span>
      Option 4
      <span class="sr-only">(Selected)</span>
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-square" aria-hidden="true"></i></span>
      Option 5
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-square" aria-hidden="true"></i></span>
      Option 6
    </span>
  </a>
</div>
<!-- End pattern: facet list //-->

Toggle between category options

This facet type only allows one item from the list to be selected at a time but all remaining non-selected options are still shown.

Example

Filter

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6
Code 
<!-- Begin pattern: facet list //-->
<h2 class="font-scale-1 facet-title">Filter</h2>
<div class="list-group font-scale-minus-1 facet">
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
      Option 1
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
      Option 2
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
      Option 3
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
      Option 4
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
      Option 5
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
      Option 6
    </span>
  </a>
</div>
<!-- End pattern: facet list //-->

Toggle between category options - selected

This example shows 'Option 2' selected.

  • Clicking on the 'Clear all' link should reset the filter and remove the selected filter option.
Example

Filter

Clear all
Option 1 Option 2 (Current) Option 3 Option 4 Option 5 Option 6
Code 
<!-- Begin pattern: facet list //-->
<h2 class="font-scale-1 facet-title">Filter</h2>
<a href="#" class="facet-clear"><i class="fa fa-times" aria-hidden="true"></i>Clear all</a>
<div class="list-group font-scale-minus-1 facet">
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
      Option 1
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-dot-circle" aria-hidden="true"></i></span>
      Option 2
      <span class="sr-only">(Current)</span>
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
      Option 3
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
      Option 4
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
      Option 5
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
      Option 6
    </span>
  </a>
</div>
<!-- End pattern: facet list //-->

Drilldown nested category options

This is used for nested options where the next level of choices are shown once their parent option has been selected. This example shows the options available within 'Category level 3' which has been selected from 'Category level 2' which in turn has been selected from 'Category level 1'.

  • Clicking on a selected option will remove its selection and that of any selected options that are contained underneath it.
  • Clicking on the 'Clear all' link should reset the filter and remove all selections of this filter. The original 'top level' options will then be shown.
Example

Filter

Clear all
Category level 1 (Selected) ↳ Category level 2 (Selected) ↳ Category level 3 (Selected) Option 1 Option 2 Option 3 Option 4
Code 
<!-- Begin pattern: facet list //-->
<h2 class="font-scale-1 facet-title">Filter</h2>
<a href="#" class="facet-clear"><i class="fa fa-times" aria-hidden="true"></i>Clear all</a>
<div class="list-group font-scale-minus-1 facet">
  <a class="list-group-item" href="#">
    <span class="item-label">
      <i class="fa fa-times" aria-hidden="true"></i>
      Category level 1
      <span class="sr-only">(Selected)</span>
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span style="margin-left: 10px" class="facet-control">&#8627;</span>
      <i class="fa fa-times" aria-hidden="true"></i>
      Category level 2
      <span class="sr-only">(Selected)</span>
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <span style="margin-left: 20px" class="facet-control">&#8627;</span>
      <i class="fa fa-times" aria-hidden="true"></i>
      Category level 3
      <span class="sr-only">(Selected)</span>
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 1
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 2
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 3
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 4
    </span>
  </a>
</div>
<!-- End pattern: facet list //-->

Collapsed list of options

A long list of options can be shortened by hiding a number of items in a collapsing panel that is toggled by a button.

  • Options that are within the collapsed panel are not as visible as those above, so this technique should only be used when strictly necessary.
  • If applicable, consider placing the most frequently used options above the collapsed options.
Example

Filter

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 Option 8
Code 
<!-- Begin pattern: facet list //-->
<h2 class="font-scale-1 facet-title">Filter</h2>
<div class="list-group panel-collapse collapse in font-scale-minus-1 facet">
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 1
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 2
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 3
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 4
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 5
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 6
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 7
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 8
    </span>
  </a>
  <div id="facet-list-e1" class="collapse">
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 9
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 10
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 11
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 12
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 13
    </span>
  </a>
  </div>
  <button class="list-group-item collapse-trigger collapsed" data-target="#facet-list-e1" data-toggle="collapse" aria-expanded="false" aria-controls="facet-list-e1"> <i aria-hidden="true" class="facet-list-hidden">...</i></button>
</div>
<!-- End pattern: facet list //-->

Options showing number of results

A 'badge' denoting how many results will appear, if an option is selected, is helpful to set users' expectations.

  • This should only be applied to options that have not yet been selected.
Example

Filter

Clear all
Option 1 21 Option 2 (Selected) Option 3 9 Option 4 104 Option 5 (Selected) Option 6 67
Code 
<!-- Begin pattern: facet list //-->
<h2 class="font-scale-1 facet-title">Filter</h2>
<a href="#" class="facet-clear"><i class="fa fa-times" aria-hidden="true"></i>Clear all</a>
<div class="list-group font-scale-minus-1 facet">
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 1
    </span>
    <span class="badge">21</span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <i class="fa fa-times" aria-hidden="true"></i>
      Option 2
      <span class="sr-only">(Selected)</span>
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 3
    </span>
    <span class="badge">9</span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 4
    </span>
    <span class="badge">104</span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      <i class="fa fa-times" aria-hidden="true"></i>
      Option 5
      <span class="sr-only">(Selected)</span>
    </span>
  </a>
  <a class="list-group-item" href="#">
    <span class="item-label">
      Option 6
    </span>
    <span class="badge">67</span>
  </a>
</div>
<!-- End pattern: facet list //-->

Group of facets

A group of different lists can be combined using the accordion group pattern to form a complex series of filters. The following example shows two different types of filter combined into a single filter tool.

  • The default state of all facet lists within an accordion group is collapsed.
Example

Filter

Code 
<!-- Begin pattern: facet list //-->
<h2 class="font-scale-1 facet-title facet-title--group">Filter</h2>
<button class="accordion-group__toggle">Open all</button>
<ul class="accordion-group accordion-group__toggle-container">
  <li class="accordion-item">
    <div class="accordion-item__toggle">
      <h3 class="accordion-item__toggle-title font-scale-0">
        <button class="accordion-item__toggle-button" aria-expanded="false" aria-controls="facet-f1">Category type 1</button>
      </h3>
    </div>
    <div class="accordion-item__content remove-outer-padding" id="facet-f1" aria-hidden="true">
    <div class="list-group list-group--remove-outer-border list-group--border-top remove-margin-bottom font-scale-minus-1 facet">
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 1
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 2
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 3
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 4
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 5
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 6
          </span>
        </a>
      </div>
    </div>
  </li>
  <li class="accordion-item">
    <div class="accordion-item__toggle">
      <h3 class="accordion-item__toggle-title font-scale-0">
        <button class="accordion-item__toggle-button" aria-expanded="false" aria-controls="facet-f2">Category type 2</button>
      </h3>
    </div>
    <div class="accordion-item__content remove-outer-padding" id="facet-f2" aria-hidden="true">
    <div class="list-group list-group--remove-outer-border list-group--border-top remove-margin-bottom font-scale-minus-1 facet">
      <a class="list-group-item" href="#">
        <span class="item-label">
          <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
          Option 1
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
          Option 2
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
          Option 3
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
          Option 4
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
          Option 5
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          <span class="facet-control"><i class="far fa-circle" aria-hidden="true"></i></span>
          Option 6
          </span>
        </a>
      </div>
    </div>
  </li>
</ul>
<!-- End pattern: facet list //-->

Group of facets - selected

The following example shows a group of different lists with the first two lists containing selected items.

  • If a facet contains selected items then the list should initially be opened within the accordion group.
Example

Filter

Code 
<!-- Begin pattern: facet list //-->
<h2 class="font-scale-1 facet-title facet-title--group">Filter</h2>
<button class="accordion-group__toggle">Open all</button>
<ul class="accordion-group accordion-group__toggle-container">
  <li class="accordion-item">
    <div class="accordion-item__toggle open">
      <h3 class="accordion-item__toggle-title font-scale-0">
        <button class="accordion-item__toggle-button" aria-expanded="true" aria-controls="facet-g1">Category type 1</button>
      </h3>
    </div>
    <div class="accordion-item__content remove-outer-padding" id="facet-g1" aria-hidden="false" style="display:block;">
      <a href="#" class="facet-clear"><i class="fa fa-times" aria-hidden="true"></i>Clear all</a>
    <div class="list-group list-group--remove-outer-border list-group--border-top remove-margin-bottom font-scale-minus-1 facet">
      <a class="list-group-item" href="#">
        <span class="item-label">
          <span class="facet-control"><i class="far fa-check-square" aria-hidden="true"></i></span>
          Item 1
          <span class="sr-only">(Selected)</span>
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          <span class="facet-control"><i class="far fa-square" aria-hidden="true"></i></span>
          Item 2
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          <span class="facet-control"><i class="far fa-square" aria-hidden="true"></i></span>
          Item 3
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          <span class="facet-control"><i class="far fa-square" aria-hidden="true"></i></span>
          Item 4
          </span>
        </a>
      </div>
    </div>
  </li>
  <li class="accordion-item">
    <div class="accordion-item__toggle open">
      <h3 class="accordion-item__toggle-title font-scale-0">
        <button class="accordion-item__toggle-button" aria-expanded="true" aria-controls="facet-g2">Category type 2</button>
      </h3>
    </div>
    <div class="accordion-item__content remove-outer-padding" id="facet-g2" aria-hidden="false" style="display:block;">
      <a href="#" class="facet-clear"><i class="fa fa-times" aria-hidden="true"></i>Clear all</a>
    <div class="list-group list-group--remove-outer-border list-group--border-top remove-margin-bottom font-scale-minus-1 facet">
      <a class="list-group-item" href="#">
        <span class="item-label">
          <i class="fa fa-times" aria-hidden="true"></i>
          Category level 1
          <span class="sr-only">(Selected)</span>
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          <span style="margin-left: 10px" class="facet-control">&#8627;</span>
          <i class="fa fa-times" aria-hidden="true"></i>
          Category level 2
          <span class="sr-only">(Selected)</span>
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          <span style="margin-left: 20px" class="facet-control">&#8627;</span>
          <i class="fa fa-times" aria-hidden="true"></i>
          Category level 3
          <span class="sr-only">(Selected)</span>
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 1
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 2
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 3
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 4
          </span>
        </a>
      </div>
    </div>
  </li>
  <li class="accordion-item">
    <div class="accordion-item__toggle">
      <h3 class="accordion-item__toggle-title font-scale-0">
        <button class="accordion-item__toggle-button" aria-expanded="false" aria-controls="facet-g3">Category type 3</button>
      </h3>
    </div>
    <div class="accordion-item__content remove-outer-padding" id="facet-g3" aria-hidden="true">
    <div class="list-group list-group--remove-outer-border list-group--border-top remove-margin-bottom panel-collapse collapse in font-scale-minus-1 facet">
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 1
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 2
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 3
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 4
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 5
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 6
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 7
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 8
          </span>
        </a>
      <div id="facet-list-g3" class="collapse">
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 9
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 10
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 11
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 12
          </span>
        </a>
      <a class="list-group-item" href="#">
        <span class="item-label">
          Option 13
          </span>
        </a>
      </div>
      <a class="list-group-item collapse-trigger collapsed" data-target="#facet-list-g3" data-toggle="collapse"></a>
      </div>
    </div>
  </li>
</ul>
<!-- End pattern: facet list //-->