Component

Pill List

SCSS Location: /styles/scss/partial/_pill-list.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Description

A list which can be used to display groups of terms in a filter interface.

Guidelines

Using the optional data-pill-limit attribute will display only the number of pills specified and provide a Show X More button that reveals the hidden items on click.

Usage

Items are designed to be removed from the list when the X button is clicked.

When the Show X More button is clicked focus should be moved to the first pill that was hidden.

An optional Clear Filters button can be included if the interface allows all terms to be cleared at once.

In addition to native tab functionality, pills should be navigable with the LEFT and RIGHT arrow keys.

Pill List: Removeable Pills

  • Term 1
  • Term 2
  • Term 3 Extra Long Term
  • Term 4
  • Term 5
  • Term 6 Extra Long Term
  • Term 7
  • Term 8 Extra Long Term
  • Term 9

Pill List: Removeable Pills with Mobile Pill Limit

  • Term 1
  • Term 2
  • Term 3 Extra Long Term
  • Term 4
  • Term 5
  • Term 6 Extra Long Term
  • Term 7
  • Term 8 Extra Long Term
  • Term 9
  • Term 10
  • Term 11 Extra Long Term
  • Term 12

Pill List: Static Pills

  • Term 1
  • Term 2
  • Term 3 Extra Long Term
  • Term 4
  • Term 5
  • Term 6 Extra Long Term
  • Term 7
  • Term 8 Extra Long Term
  • Term 9

Pill List: Linked Pills