Style Guide
Search…
Pickers
Users can select from multiple options through a few various selector UI.
Dropdown pickers are used when there are multiple, predetermined options for a given input. Our web drop down menus are rendered in the default HTML styling. On desktop, the drop down opens on click. On mobile, the menu opens on tap.

Usage of Pickers

Pickers allow users to select an option before taking an action. Pickers can be found on When and Payment pages.

Type of Pickers

Radio Pickers

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select one choice. Radio groups must be stacked vertically.
1. Current Selection
1
max-width: 24px
2
max-height: 24px
3
4
border: 1px
5
border-color: blue-medium
6
7
Fill:
8
color: blue-medium
9
size: 16px
10
11
padding-right: 16px
Copied!
2. Content
The content must be positioned 16px to the right of the radio button.
1
font-weight: book
2
font-size: 16px
3
font-color: text-black
Copied!
3. Unselected Options
1
max-width: 24px
2
max-height: 24px
3
4
border: 1px
5
border-color: slate-medium
Copied!
4. Dividing Line
Width of dividing lines are variable based on the context. Standalone dividers can take up to 12 columns.
Dividers in cards need to have 32px padding on the left and right and 16px on mobile, in order to have separation within the card.
1
border: 1px
2
color: slate-light
3
4
padding-top: 16px
5
padding-bottom: 16px
Copied!

Checkboxes

Checkboxes are used when the user can select multiple options. For example, adding extras in the booking flow. Each checkbox is independent of all other checkboxes in the list.
1. Current Selection: There can be multiple selections.
1
max-width: 24px
2
max-height: 24px
3
border-radius: 3px
4
color: blue-medium
5
6
padding-right: 16px
Copied!
2. Content
The content must be positioned 16px to the right of the radio button.
1
font-weight: book
2
font-size: 16px
3
font-color: text-black
Copied!
3. Unselected Options
1
max-width: 24px
2
max-height: 24px
3
border-radius: 3px
4
border: 1px
5
border-color: slate-medium
Copied!
4. Dividing Line
Width of dividing lines are variable based on the context. Standalone dividers can take up to 12 columns.
Dividers in cards need to have 32px padding on the left and right and 16px on mobile, in order to have separation within the card.
1
border: 1px
2
color: slate-light
3
4
padding-top: 12px
5
padding-bottom: 12px
Copied!

Steppers

Steppers are used to indicate a specific amount of one thing, usually in the booking flow. The
1. Engaged Stepper
1
Container:
2
max-width: 32px
3
max-height: 32px
4
color: blue-light
5
6
Icon:
7
float: centered
8
color: slate-dark
Copied!
2. Disengaged Stepper
Disengaged steppers are present when a user has reached 0.
1
Container:
2
max-width: 32px
3
max-height: 32px
4
color: blue-light
5
6
Icon:
7
float: centered
8
color: slate-medium
Copied!

Date Picker

Date pickers are used when users are asked to enter their desired service date on When pages. On mobile web, date pickers will be the native date picker.
1. Container
The width of the container will match the width of the corresponding dropdown picker.
1
color: white
2
border-radius: 5px
3
border-color: slate-light
4
border-width: 1px
5
drop-shadow: 0px 0px 2px 4px rbg(0,0,0,.2)
6
padding: 16px
7
max-width: 320px
Copied!
2. Calendar Structure
The width of the calendar will depend on the width of the container. There will be 16px padding around the whole calendar.
1
border-color: slate-medium-light
2
border-width: 1px
3
padding: 16px
4
max-width: 280px
Copied!
3. Typography
The width of the dates and the border around the dates are dependent on the size of the container and calendar. The container should be 1:1 around the dates should be 1:1.
1
Month:
2
font-weight: bold
3
font-size: 16px
4
text-color: text-black
5
6
Days:
7
font-weight: book
8
font-size: 16px
9
text-color: slate-medium-dark
10
max-width: 40px
11
padding-top: 8px
12
padding-top: 8px
13
14
Past Dates:
15
font-weight: book
16
font-size: 16px
17
text-color: slate-medium-dark
18
max-width: 40px
19
padding-top: 8px
20
padding-top: 8px
21
22
Current Date:
23
font-weight: bold
24
font-size: 16px
25
text-color: text-black
26
max-width: 40px
27
padding-top: 8px
28
padding-top: 8px
29
30
Selected Date:
31
font-weight: bold
32
font-size: 16px
33
text-color: white
34
max-width: 40px
35
padding-top: 8px
36
padding-top: 8px
37
38
Future Dates:
39
font-weight: book
40
font-size: 16px
41
text-color: text-black
42
max-width: 40px
43
padding-top: 8px
44
padding-top: 8px
Copied!
4. Selected State:
1
color: medium-blue
2
3
Selected Date:
4
font-weight: bold
5
font-size: 16px
6
text-color: white
Copied!
5. Hover State:
1
color: slate-light
2
3
Hover Text:
4
font-weight: book
5
font-size: 16px
6
text-color: text-black
Copied!

Selectors

Selectors can be used in lieu of radio buttons to add more imagery onto a page. They can be found on payment or build pages.
1. Container
1
border-radius: 5px
2
border-color: slate-medium
3
border-width: 1px
Copied!
2. Icon
1
color: slate-medium
2
max-height: 32px
3
4
padding-top: 16px
5
padding-bottom: 16px
Copied!
3. Label
1
font-weight: Book
2
font-size: 16px
3
font-color: text-black
4
5
padding: 12px
Copied!
4. Selected Container
1
border-radius: 5px
2
border-color: blue-medium
3
border-width: 3px
Copied!
5. Selected Icon
1
max-height: 32px
2
3
padding-top: 16px
4
padding-bottom: 16px
Copied!
6. Selected Label
1
font-weight: medium
2
font-size: 16px
3
font-color: blue-medium
Copied!

Dropdown Pickers

1. Content: Will show the default option upon load
1
font-weight: Book
2
font-size: 16px
3
font-color: text-black
4
5
padding-left: 16px
6
padding-top: 16px
7
padding-bottom: 16px
Copied!
2. Caret: Must have caret to show that there are options.
1
padding-right: 16px
Copied!
3. Structure Width is depends on context.
1
border-radius: 5px
2
border: 1px
3
border color: slate-medium
Copied!
4. Input Area
1
background-color: off-white
Copied!

Dropdown Menus

Drop down menus allow users to quickly navigate to relevant pages. They are used to house options that will take users to a new page or modal. Options in the drop down menu can be text only, or include a line icon on the left. We stylize and standardize our drop down menus with CSS.
On desktop, drop down menus open on hover and close when the user moves the mouse out of range of the the drop down container. On mobile, they open on tab and close when the user taps outside of the container.
1
font: circular-std
2
font-size: 16px
3
top-padding: 16px
4
bottom-padding: 16px
5
left-padding: 24px
6
right-padding: 24px
7
background-color-hover: blue-light #EEF6F9
8
9
icon color: slate-dark
Copied!

Dropdown for Services (Desktop Web Only)

For service discovery purposes, we've broken from our standard dropdown UI on desktop to create space for four columns of services. This menu exists on desktop web only, and breaks to mobile at a screen size of 1024px.

Headers

1
font: circular-bold
2
font-color: blue-medium #036DA1
3
font-size: 14px
4
[no hover state]
Copied!

Services

1
font: circular-std
2
font-color: slate-dark #667884
3
font-size: 14px
4
hover-color: text-black #434343
Copied!

Page Tabs

Page tabs are used to move between multiple pages of content.
1. Typography
1
font-weight: Book
2
font-size: 16px
3
4
Default:
5
font-color: text-black
6
7
Selected:
8
font-color: white
9
10
padding-right: 32px
11
padding-left: 32px
Copied!
2. Selection After the 3, the selection must stay in the middle.
1
color: medium-blue
2
3
padding-right: 32px
4
padding-left: 32px
Copied!
3. Carets
1
font-family: fontawesome
2
font-size: 24px
3
4
padding-right: 64px
5
padding-left: 64px
Copied!
1
border: 1px
2
color: slate-medium #C2CED3
3
4
box on click: blue-medium #0BB8E3
5
6
font: circular-std
7
font-size: 14px
8
top-padding 16px
9
botton padding: 16px
10
11
icon-font-color: slate-dark #667884
12
minus icon: <i class="fas fa-minus"></i>
13
plus icon: <i class="fas fa-plus"></i>
14
info icon: <i class="far fa-info-circle"></i>
Copied!
Last modified 2yr ago