Filter chips and tags

What it is

A filter chip filters one list: 40px pill, 16px/600 sentence case, 1px line-strong border. The current chip fills navy. A tag is a static label, not a link.

When to use

• Filter chips: categories over one list, such as benefit categories on /benefits or article topics on /articles.
• Filter chips: the Articles filter on the member profile.
• Tags: static facts on a profile, such as skills and languages, with an optional level.

When not to use

• To switch between sibling views at their own URLs, use Tabs.
• For a status on a card (“Optional upgrade”), use the card tag .hs-card__tag in Card.
• For an action, use a Button. A chip only filters.

Rules

• Filter chips: ul.hs-chips > li > a.hs-chip or button.hs-chip. Wrap link chips in a nav with an aria-label.
• Mark the current link chip with aria-current="page", and a button chip with aria-pressed. The current chip fills navy. Never gold.
• Write chip labels in sentence case, as the editors wrote the category names. No uppercase.
• Add .hs-chips--scroll for one line that scrolls sideways.
• Tags: ul.hs-chips with an aria-label > li.hs-tag. Put a level in span.hs-tag__meta. A tag is never a link and has no hover.
• The colours follow the ground through the --hs-ctx-* properties. On .hs-band--navy the current chip label turns navy.

Accessibility

• The current state hangs on aria-current or aria-pressed, so it reaches the accessibility tree.
• Contrast: chip label ink 13.0:1, current chip white on navy 12.4:1, tag ink on soft 12.2:1, tag level slate 5.9:1.
• A chip is 40px tall, a full tap target. A tag is not interactive, so it has no 40px height.
• Link chips are real URLs (?category=careers) and work without JavaScript.
• The scrolling row has padding for the focus outline. Transitions stop under prefers-reduced-motion: reduce.

Variants

Filter chips

A link chip uses aria-current="page"; a button chip uses aria-pressed. Add hs-chips--scroll for one line that scrolls.

<nav aria-label="Benefit categories">
  <ul class="hs-chips">
    <li><a class="hs-chip" href="?category=all">All benefits</a></li>
    <li><a class="hs-chip" href="?category=careers" aria-current="page">Careers</a></li>
    <li><a class="hs-chip" href="?category=education">Education</a></li>
  </ul>
</nav>

Tags

14px/600 ink on soft, with an optional slate part for a level.

<ul class="hs-chips" aria-label="Skills">
  <li class="hs-tag">Public speaking</li>
  <li class="hs-tag">Spanish <span class="hs-tag__meta">Fluent</span></li>
  <li class="hs-tag">Data analysis</li>
</ul>