Style Guide
Search…
Half Sheets
Half sheets contain supplementary actions or content and are anchored to the bottom of the screen.
Usage of Half Sheets
Half sheets display supplementary actions (filtering a list) or content (from tool tips). Half sheets slide up from the bottom of the screen.
Types of Half Sheets
Action Half Sheet (half-sheet-action)
Users can take actions like filtering list views or changing the status of a pro on action half sheet. Actions will be taken once a user selects an option and hits the CTA.
1
Background-color: #00000; Opacity: 0.3
Copied!
1. Title (a-text-h3)
1
font-weight: bold
2
font-size: 20px
3
font-color: text-black
4
padding-left: 16px
5
padding-right: 16px
6
padding-top: 48px
7
padding-bottom: 24px
Copied!
2. Exit
1
max-width: 16px
2
max-height-:16px
3
color: text-black
4
border-width: 2px
5
padding-top: 16px
6
padding-right: 16px
Copied!
3. Content
Can use filter, radio, or checkbox pickers
1
Title (a-text-h4):
2
font-weight: bold
3
font-size: 16px
4
font-color: text-black #434343
5
​
6
padding-left: 16px
7
padding-right: 16px
8
padding-top: 24px
9
padding-bottom: 16px
10
​
11
​
12
Pickers:
13
padding-bottom: 24px
Copied!
4. Link CTA (a-text-paragraph)
The Link CTA can take the user down another flow or expand the half sheet with more content.
1
font-weight: book
2
font-size: 16px
3
font-color: blue-medium
4
​
5
padding-top: 24px
6
padding-bottom: 24px
7
​
8
expansion:
9
padding-top: 24px
10
padding-bottom: 24px
Copied!
5. Primary CTA (a-button-primary)
1
max-height: 57px
2
border-radius: 5px
3
padding-left: 16px
4
padding-right: 16px
5
padding-top: 24px
6
padding-bottom: 16px
7
color: blue-medium
8
​
9
CTA Text (a-text-button)
10
font-weight: book
11
font-size: 20px
12
font-color: white
13
padding: 16px
Copied!
Informational Half Sheet (half-sheet-info)
Users can view more information about features on an informational half sheet by tapping on a tool tip.
1
Background-color: #00000; Opacity: 0.3
Copied!
1. Title (a-text-h3)
1
font-weight: bold
2
font-size: 20px
3
font-color: text-black
4
padding-left: 16px
5
padding-right: 16px
6
padding-top: 48px
7
padding-bottom: 24px
Copied!
2. Exit
1
max-width: 16px
2
max-height-:16px
3
color: text-black
4
border-width: 2px
5
padding-top: 16px
6
padding-right: 16px
Copied!
3. Content
1
Body Copy (a-text-paragraph):
2
font-weight: book
3
font-size: 16px
4
font-color: text-black
5
line-height: 1.5
6
​
7
padding-left: 16px
8
padding-right: 16px
9
padding-top: 16px
10
padding-bottom: 16px
Copied!
4. Primary CTA (a-button-primary)
1
max-height: 57px
2
border-radius: 5px
3
padding-left: 16px
4
padding-right: 16px
5
padding-top: 24px
6
padding-bottom: 16px
7
color: blue-medium
8
​
9
CTA Text (a-text-button)
10
font-weight: book
11
font-size: 20px
12
font-color: white
13
padding: 16px
Copied!
Last modified 2yr ago