Core Components - Filter Chips

Specifications

Small Chips

EXAMPLE

Anatomy

1) Chip
See States below

2) Icon
font-face: Font Awesome 6 Pro Light
font-size: 18px
line-height: 18px
code: plus (f067)
color: See States below

3) Label
font-face: Helvetica Now Text
font-size: 16px
font-weight: 400
line-height: 18px
color: See States below

Size & Spacing

States

Default

Label

Default Hover

Label

Active

Label

Active Hover

Label

Chip
border-color: Teal Dark
border: 1px

Chip
border-color: Teal Dark Hover
border: 2px

Chip
background-color: Teal Dark Active
border: none

Active Transition:
background-color: Transparent to Teal Dark Active, 0.2s ease

Chip
background-color: Teal Dark Hover
border: none

Label
color: Teal Dark

Label
color: Teal Dark Hover
text-decoration: underline

Hover Transition:
text-decoration: underline expands left to right, 0.2s ease

Label
color: Teal Dark Active
text-decoration: underline

Label
color: Teal Dark Hover

Hover Transition:
text-decoration: underline expands left to right, 0.2s ease

Icon
color: Teal Dark

Icon
color: Teal Dark Hover

Icon
color: Teal Dark Active

Active Transition:
rotate: 45 degrees clockwise

Icon
color: Teal Dark Hover

EXAMPLE

Anatomy

1) Chip
See States below

2) Icon
font-face: Font Awesome 6 Pro Light
font-size: 18px
line-height: 18px
code: plus (f067)
color: See States below

3) Label
font-face: Helvetica Now Text
font-size: 16px
font-weight: 400
line-height: 18px
color: See States below

Size & Spacing

States

Default

Label

Default Hover

Label

Active

Label

Active Hover

Label

Chip
border-color: Gray 06
border: 1px

Chip
border-color: Gray 06
border: 2px

Chip
background-color: Gray 06

Active Transition:
background-color: Transparent to Gray 06, 0.2s ease

Chip
background-color: Gray 06

Label
color: Gray 06

Label
color: Gray 06
text-decoration: underline

Hover Transition:
text-decoration: underline expands left to right, 0.2s ease

Label
color: Gray 06

Label
color: Gray 06
text-decoration: underline

Hover Transition:
text-decoration: underline expands left to right, 0.2s ease

Icon
color: Gray 06

Icon
color: Navy

Active Transition:
rotate: 45 degrees clockwise

Icon
color: Navy

Large Chips

EXAMPLE

Anatomy

1) Chip
See States below

2) Icon
font-face: Font Awesome 6 Pro Light
font-size: 18px
line-height: 18px
code: plus (f067)
color: See States below

3) Label
font-face: Helvetica Now Text
font-size: 16px
font-weight: 400
line-height: 18px
color: See States below

Size & Spacing

States

Default

Label

Default Hover

Label

Active

Label

Active Hover

Label

Chip
border: 1px solid
border-color: Teal Dark

Chip
border: 2px solid
border-color: Teal Dark Hover

Chip
background-color: Teal Dark Active
border: none

Chip
background-color: Teal Dark Hover
border: none

Label
color: Teal Dark

Label
color: Teal Dark Hover
text-decoration: underline

Hover Transition:
text-decoration: underline expands left to right, 0.2s ease

Label
color: Gray 06

Label
color: Gray 06
text-decoration: underline

Hover Transition:
text-decoration: underline expands left to right, 0.2s ease

Icon
color: Teal Dark

Icon
color: Teal Dark Hover

Icon
color: Gray 06

Active Transition:
rotate: 45 degrees clockwise

Icon
color: Gray 06

EXAMPLE

Anatomy

1) Chip
See States below

2) Icon
font-face: Font Awesome 6 Pro Light
font-size: 18px
line-height: 18px
code: plus (f067)
color: See States below

3) Label
font-face: Helvetica Now Text
font-size: 16px
font-weight: 400
line-height: 18px
color: See States below

Size & Spacing

States

Default

Label

Default Hover

Label

Active

Label

Active Hover

Label

Chip
border: 1px solid
border-color: Gray 06

Chip
border: 2px solid
border-color: Gray 06

Chip
background-color: Gray 06
border: none

Label
color: Gray 06

Labeltext-decoration: underline

Hover Transition
transition: 0.2s ease
underline expands from left

Label
color: Navy

Label
color: Navy
text-decoration: underline

Hover Transition
0.2s ease
underline expands from left, 0.2s ease

Icon
color: Gray 06

Icon
color: Navy

Active Transition
transition: 0.2s ease
icon rotates 45 degrees to right

Icon
color: Navy

Implementation

Filter functionality should include:

A list of attributes common to items in a collection, and possible values by which to filter
An indication of the currently applied filters
A way to clear the currently applied filters
A display of predefined filters

Collapsed Filters

Use horizontal placement when more than one filter is applied. When more than three filters are applied, condense additional filters in to "More" menu chip. See example below:

Produce Filters

Anatomy

1) Chip
background-color: Teal Dark Active
border: none

2) Label
font-face: Helvetica Now Text
font-weight: 400
font-size: 16px
line-height: 24px
color: Gray 06

3) Counter
background-color: Gray 06
font-face: Helvetica Now Text
font-weight: 700
font-size: 16px
line-height: 24px
color: Teal Dark Active

Filter Chips

Example

Specifications

Small Chips

EXAMPLE

Anatomy

Size & Spacing

States

EXAMPLE

Anatomy

Size & Spacing

States

Large Chips

EXAMPLE

Anatomy

Size & Spacing

States

EXAMPLE

Anatomy

Size & Spacing

States

Implementation

Anatomy

Size & Spacing