Filter box

The filter box pattern is used to display a series of filter 'tags' that have been applied to the content. A typical use would be on a filtered search results page.

Rules for filter box

  • Each filter can be individually removed by clicking it's tag.
  • A 'clear all' filter option reduces the number of required clicks.
  • A heading should be used to introduce the filter tags to screen readers.

Options available

Filter box

A series of filters that are not related to one another.

Example
Clear all filters

Filtered by:

Code 
<!-- Begin pattern: filter box //-->
<div class="filter-box">
    <a class="filter-box__clear" href="" title="Remove all refinements">
        <i class="fa fa-times" aria-hidden="true"></i>Clear all filters
    </a>
    <h3 class="sr-only">Filtered by:</h3>
    <ul class="filter-box__list">
        <li>
            <a class="btn-xsmall-tag" href="#"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Clear</span> Filter A</a>
        </li>
        <li>
            <a class="btn-xsmall-tag" href="#"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Clear</span> Filter B</a>
        </li>
        <li>
            <a class="btn-xsmall-tag" href="#"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Clear</span> Filter C</a>
        </li>
    </ul>
</div>
<!-- End pattern: filter box //-->

Filter box with grouped filters

Where filters are reliant on others they should be grouped together. This is typical for a 'drilldown' style filter where a filter selection reveals subsequent filter options.

  • Only the top level filter tag of the group is bold. This should shown the name of the filter group.
  • Clearing a filter by clicking on it's tag will clear any of its lower level filter tags.
  • Groups of filters should appear on a new line.
Example
Clear all filters

Filtered by:

Code 
<!-- Begin pattern: filter box //-->
<div class="filter-box">
    <a class="filter-box__clear" href="" title="Remove all refinements">
        <i class="fa fa-times" aria-hidden="true"></i>Clear all filters
    </a>
    <h3 class="sr-only">Filtered by:</h3>
    <ul class="filter-box__list filter-box__list-group">
        <li>
            <a class="btn-xsmall-tag" href="#"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Clear</span> Filter group A</a>
        </li>
        <li>
            <a class="btn-xsmall-tag" href="#"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Clear</span> Top level filter</a>
        </li>
        <li>
            <a class="btn-xsmall-tag" href="#"><span>&#8627;</span><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Clear</span> Second level filter</a>
        </li>
    </ul>
    <ul class="filter-box__list filter-box__list-group">
        <li>
            <a class="btn-xsmall-tag" href="#"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Clear</span> Filter group B</a>
        </li>
        <li>
            <a class="btn-xsmall-tag" href="#"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Clear</span> Top level filter</a>
        </li>
    </ul>
</div>
<!-- End pattern: filter box //-->

Filter box with mix of filter types

Filter groups and individual filters may appear together.

  • Groups of filters should appear on a new line.
Example
Clear all filters

Filtered by:

Code 
<!-- Begin pattern: filter box //-->
<div class="filter-box">
    <a class="filter-box__clear" href="" title="Remove all refinements">
        <i class="fa fa-times" aria-hidden="true"></i>Clear all filters
    </a>
    <h3 class="sr-only">Filtered by:</h3>
    <ul class="filter-box__list filter-box__list-group">
        <li>
            <a class="btn-xsmall-tag" href="#"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Clear</span> Filter group A</a>
        </li>
        <li>
            <a class="btn-xsmall-tag" href="#"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Clear</span> Top level filter</a>
        </li>
        <li>
            <a class="btn-xsmall-tag" href="#"><span>&#8627;</span><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Clear</span> Second level filter</a>
        </li>
    </ul>
    <ul class="filter-box__list">
        <li>
            <a class="btn-xsmall-tag" href="#"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Clear</span> Filter B</a>
        </li>
        <li>
            <a class="btn-xsmall-tag" href="#"><i class="fa fa-times" aria-hidden="true"></i><span class="sr-only">Clear</span> Filter C</a>
        </li>
    </ul>
</div>
<!-- End pattern: filter box //-->