✴︎ ✴︎

2021 Component Refactors

Made by Leah Garber

Button

States

Primary

DefaultHoverFocusPressedDisabled

Secondary

DefaultHoverFocusPressedDisabled

Tertiary

DefaultHoverFocusPressedDisabled

Overlay

DefaultHoverFocusPressedDisabled

Sizes

Primary

LargeMediumSmallxSmall

Secondary

LargeMediumSmallxSmall

Tertiary

LargeMediumSmallxSmall

Overlay

LargeMediumSmallxSmall

Types

All
Icon Left
Icon right
No text
Number

Icon Left

Large
Medium
Small
xSmall
Large
Medium
Small
xSmall
Large
Medium
Small
xSmall
Large
Medium
Small
xSmall

Icon Right

Large
Medium
Small
xSmall
Large
Medium
Small
xSmall
Large
Medium
Small
xSmall
Large
Medium
Small
xSmall

No Text

Large
Medium
Small
xSmall
Large
Medium
Small
xSmall
Large
Medium
Small
xSmall
Large
Medium
Small
xSmall

Number

10
Large
10
Medium
10
Small
10
xSmall
10
Large
10
Medium
10
Small
10
xSmall
10
Large
10
Medium
10
Small
10
xSmall
10
Large
10
Medium
10
Small
10
xSmall

✴︎ ✴︎

TextInput

States

Default

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Hover

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Focus

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Disabled

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Fixed Label

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Error

Required error message goes here.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sizes

Large

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Medium

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Small

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Types

Icon Left

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Icon Right

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Disabled

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

With Clear

Close
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Close
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Close
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

autocomplete

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

✴︎ ✴︎

TextArea

States

Default

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Hover

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Focus

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Disabled

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Fixed label

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Error

Required error message goes here.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sizes

Large

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Medium

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Small

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

✴︎ ✴︎

Select

States

Default

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Hover

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Focus

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Disabled

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Fixed Label

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sizes

Large

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Medium

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Small

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Unboxed, States

Default

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Hover

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Focus

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Disabled

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Fixed Label

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Unboxed, Sizes

Large

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Medium

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Small

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

✴︎ ✴︎

Nugget

States

Default

Default
Hover
Focus
Pressed
Disabled

Active

Default
Hover
Focus
Pressed
Disabled

Sizes

Default

Large
Medium
Small

Active

Large
Medium
Small

Single select

Large
Medium
Small

Green

Large
Medium
Small

Types

Split

Large
0
Medium
0
Small
0

Active Split

Large
4
Medium
4
Small
4

Clearable

Large
Medium
Small

✴︎ ✴︎

Checkbox

States

Default

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Checked

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Hover

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Focus

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Disabled

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Error

Required error message goes here.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sizes

Medium

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Small

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Types

Counter

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Subtext

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Content

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Color

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

✴︎ ✴︎

Radio

States

Default

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Checked

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Hover

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Focus

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Disabled

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Error

Required error message goes here.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sizes

Medium

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Small

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

✴︎ ✴︎

Slider

States

Default

$0
- $0
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Middle

$0
- $0
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Continuous

$0
- $0
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Disabled

$0
- $0
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Single

0
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

✴︎ ✴︎

Chip

States

Default

Default
Hover
Focus
Pressed
Disabled

With Split

Default
Hover
Focus
Pressed
Disabled

Truncated

Default Truncated
Hover Truncated
Focus Truncated
Pressed Truncated
Disabled Truncated

ChipButton

Default

Default
Hover
Focus
Pressed
Disabled

With Icon

Default
Hover
Focus
Pressed
Disabled

ChipToggle

Default

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

With Icon

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Fixed width

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

✴︎ ✴︎

ChipLabel

Sizes

Large

Default
Invert

Medium

Default
Invert

Small

Default
Invert

✴︎ ✴︎

ChipSelector

Sizes

Large

Chip
Chip
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Medium

Chip
Chip
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Small

Chip
Chip
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

✴︎ ✴︎

DateRangeInput

Types

Default

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

✴︎ ✴︎

DateRangePanel

Types

Default

Select Dates
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

No Icon

Select Dates
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Small

Select Dates
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

✴︎ ✴︎

InputGroup

Types

Text Input

Search
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Select

Search
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Double

Search
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Triple

Search
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

✴︎ ✴︎

InputWithButtonLabel

Sizes

Large

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Medium

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Small

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

✴︎ ✴︎

LoadMoreWrapper

Types

Default

Load More

Loading

Loading

Expandable

Expand List

✴︎ ✴︎

Pager

States

Default

Start

counter

1 of 5

No Labels

✴︎ ✴︎

Pagination

States

Start

Middle

End

✴︎ ✴︎

Accordion

Types

Default

Accordion Title
Internal accordion text, but this content will be customizable.
Accordion Title
Internal accordion text, but this content will be customizable.
Accordion Title
Internal accordion text, but this content will be customizable.

Color

Accordion Title
Internal accordion text, but this content will be customizable.

Light

99.9
Accordion Title
Internal accordion text, but this content will be customizable.
99.9
Accordion Title
Internal accordion text, but this content will be customizable.
99.9
Accordion Title
Internal accordion text, but this content will be customizable.

✴︎ ✴︎

HeadingDropdown

States

Default

Basic Menu

Hover

Basic Menu

Focus

Basic Menu

Press

Basic Menu

Disabled

Basic Menu

Sizes

Large

Basic Menu

Medium

Basic Menu

Small

Basic Menu

✴︎ ✴︎

Toast

Types

Default

Saved to My Schools

Undo

Closeable

Saved to My Schools

close icon

Simple

Success!

Color

Success!

Animated

Success!

✴︎ ✴︎

MessageBox

Types

Default

Sorry, no results match your search criteria.
Sorry, no results match your search criteria.
Reset Filters

ERror

Sorry, no results match your search criteria.
Sorry, no results match your search criteria.
Reset Filters

Warning

Sorry, no results match your search criteria.
Sorry, no results match your search criteria.
Reset Filters

Info

Sorry, no results match your search criteria.
Sorry, no results match your search criteria.
Reset Filters

Success

Sorry, no results match your search criteria.
Sorry, no results match your search criteria.
Reset Filters

Custom

Sorry, no results match your search criteria.

Search Inventory
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
The vehicle isn't available for sale in this ZIP code. Please try searching another ZIP code.

✴︎ ✴︎

"Live" Pages

Results

College Search/Rankings

See mock »

Cars Homepage

See mock »

College Landing Page

See mock »

College Profile Overview

See mock »

Compass Checkout

See mock »

College Profile Academics

See mock »

Credit Card Homepage

See mock »

Doctor Search

See mock »

Light BG