Results bar

What it is

One bar between the Filter panel and the results. The count and the sort share the first row. The active filters follow as removable chips, with a Clear all link. A hairline closes the bar.

When to use

• Above the results of every catalog: the scholarship directory, the benefits list, site search.

When not to use

• A list with no filter and no sort: a Group heading count is enough.
• Under a card grid, for "Showing 12 of 48": use Load more.

Rules

• Markup, in this order: p.hs-results-bar__count[role="status"], div.hs-results-bar__sort, then an optional ul.hs-results-bar__active.
• The count is a number in strong plus the noun: "128 scholarships". With a keyword: "12 results for “nursing”". Code computes it; never type a count.
• The sort is label.hs-label + select.hs-control with form="FORM-ID" of the filter form, then button.hs-button.hs-button--secondary.hs-button--sm.hs-results-bar__apply[data-hs-filter-apply] "Sort". filter.js hides the button and submits on change.
• Each active filter is one li > a.hs-chip.hs-results-bar__remove to the current URL without that filter. The link text is span.hs-visually-hidden "Remove filter:" plus the value. The cross is drawn by CSS.
• The last li holds a.hs-form-link "Clear all" to the clean URL. Print the list only when a filter is set. On wide screens this is the only Clear all: the filter panel hides its own.
• Leave out the sort when the list has one useful order.

Accessibility

• role="status" on the count: a screen reader announces the new total after a filter change.
• Each remove chip says "Remove filter: Graduate". The cross is content: "×" / "", so it is not read.
• Chips are 40px tall; Clear all and the sort select are full tap targets.
• Count slate 6.2:1, number ink 13.0:1, chip ink 13.0:1 on white.

Variants

Count and sort

No filter set. The Sort button is for the no-JS page; this doc page loads no script, so it shows.

<div class="hs-results-bar">
  <p class="hs-results-bar__count" role="status"><strong>1,003</strong> scholarships</p>
  <div class="hs-results-bar__sort">
    <label class="hs-label" for="sort-1">Sort by</label>
    <select class="hs-control" id="sort-1" name="sort" form="catalog-filter">
      <option value="">Name, A to Z</option>
      <option value="amount">Amount, highest first</option>
      <option value="new">Newest first</option>
    </select>
    <button class="hs-button hs-button--secondary hs-button--sm hs-results-bar__apply" type="submit" form="catalog-filter" data-hs-filter-apply>Sort</button>
  </div>
</div>

With active filters

Two filters and a keyword. Each chip removes one filter.

<div class="hs-results-bar">
  <p class="hs-results-bar__count" role="status"><strong>12</strong> results for &ldquo;leadership&rdquo;</p>
  <div class="hs-results-bar__sort">
    <label class="hs-label" for="sort-2">Sort by</label>
    <select class="hs-control" id="sort-2" name="sort" form="catalog-filter">
      <option value="">Name, A to Z</option>
      <option value="amount">Amount, highest first</option>
    </select>
    <button class="hs-button hs-button--secondary hs-button--sm hs-results-bar__apply" type="submit" form="catalog-filter" data-hs-filter-apply>Sort</button>
  </div>
  <ul class="hs-results-bar__active" aria-label="Active filters">
    <li><a class="hs-chip hs-results-bar__remove" href="/scholarship-directory?q=leadership&amp;type=fellowship"><span class="hs-visually-hidden">Remove filter: </span>Graduate</a></li>
    <li><a class="hs-chip hs-results-bar__remove" href="/scholarship-directory?q=leadership&amp;for=graduate"><span class="hs-visually-hidden">Remove filter: </span>Fellowship</a></li>
    <li><a class="hs-form-link" href="/scholarship-directory">Clear all</a></li>
  </ul>
</div>