USER INTERFACE ELEMENTS
Pills
Overview
Pills are used to select one or more options from a set of choices. In rare instances, a pill also acts as a link with no selection functionality.
Specifications
Pill Spacing
Pill (46px height)
On Load
- Pill Border Color: #6E6E6E
- Pill Border Size: 1px
- Pill Label Color: #333333
- Pill Label Text: Noto Sans 16px Regular
Hover
- Pill Border Color: #0061A0
- Pill Border Size: 3px
- Pill Label Color: #333333
- Pill Label Text: Noto Sans 16px Regular
Selected
- Pill Border Color: #528320
- Pill Border Size: 3px
- Pill Background Color: #528320
- Pill Label Color: #FFFFFF
- Pill Label Text: Noto Sans 16px SemiBold
- Check Icon Color: #528320
On Focus - (ADA compliant) - appears on keyboard navigation only
- Border Color: #007ABC
- Border Size: 2px
- Pill Border Color: #6E6E6E
- Pill Border Size: 1px
- Pill Label Color: #333333
- Pill Label Text: Noto Sans 16px Regular
Pill (46px height) – Removable
These pills include an X on the right side. The X denotes that it is a removable pill, when clicked, the pill will be deleted and goes away.
Removable
- Pill Border Color: #0061A0
- Pill Border Size: 2px
- Pill Label Color: #333333
- Pill Label Text: Noto Sans 16px Regular
- Icon Color: #0061A0
Removable - Hover
- Pill Border Color: #0061A0
- Pill Border Size: 3px
- Pill Background Color: #0061A0
- Pill Label Color: #FFFFFF
- Pill Label Text: Noto Sans 16px Regular
- Icon Color: #FFFFFF
Removable - On Focus
- Border Color: #007ABC
- Border Size: 2px
- Pill Border Color: #0061A0
- Pill Border Size: 2px
- Pill Fill Color: #FFFFFF
- Pill Label Color: #333333
- Pill Label Text: Noto Sans 16px Regular
- Icon Color: #007ABC
Mobile Pill (46px height)
On Load
Selected
Usage Guidelines
Hover State
The Hover state applies to desktop (mouse-havigated) responsive web devices only.
In page example
