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.