Components

Filters

When a list contains more than 25 items, use filtering to help find options from the list. May only be used with Dropdown or Multi-select Dropdown. Cannot be used with Inline Dropdown.

Filter

Created with Sketch. Default filter: All
Table Closed 
.filter-label {
font-family: Lato-Regular;
font-size: 14px;
color: #002D41;
line-height: 14px;
}

.filter-dropdown {
font-family: Lato-Regular;
font-size: 14px;
color: #0074D9;
line-height: 14px;
}

Standard open filter

Created with Sketch. Option A All Option B Option C Option D Default filter: All

See Dropdowns 

Open with filter search

Created with Sketch. All Or filter by email campaign Campaign with a long name Another campaign name Campaign with an even longer name Search None Anna Clayborn Anna Duke Anna Freeman Anna Graham Anna Hunter 80 results found in search Anna | Tribute to: None All Or filter by email campaign Campaign with a long name Another campaign name Campaign with an even longer name Search None Anna Clayborn Anna Duke Anna Freeman Anna Graham Anna Hunter 80 results found in search Search tributes Tribute to: Anna Duke All Or filter by email campaign Campaign with a long name Another campaign name Campaign with an even longer name Search None Anna Clayborn Anna Duke Anna Freeman Anna Graham Anna Hunter Type to search 4,667 results Search tributes Tribute to: None

See Dropdowns 

Overview of CSS Classes

Selector
Summary
Parent Selector

.filter-label

.filter-dropdown

Left side label that puts the dropdown filter in context

the dropdown that the user interacts with to make their filter choice