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
