Style Guide
  • Handy Style Guide
  • Brand Guidelines
    • Logo
    • Color System
    • Line Icons
    • Expressive Icons
    • Typography
  • Native
    • Action Cards
      • Booking Cards
      • Job Cards
      • List Cards
      • Message Cards
      • User Cards
    • Avatars
    • Banners
    • Callouts
    • Buttons
    • Half Sheets
    • Headers
    • Icon Lists
    • Input Fields
    • Marketing
    • Message Bubbles
    • Modal
    • Navigation
    • Pickers
    • Reviews
    • Skeleton Loading States
    • Tabs
    • Typography - Native
      • Native Text Combinations
  • Web
    • Navigation
    • Grid and Layout
    • Forms
    • Typography (Web)
    • Buttons
    • Pickers
    • Modals
    • Cards
Powered by GitBook
On this page
  • Usage of Half Sheets
  • Types of Half Sheets
  • Action Half Sheet (half-sheet-action)
  • Informational Half Sheet (half-sheet-info)

Was this helpful?

  1. Native

Half Sheets

Half sheets contain supplementary actions or content and are anchored to the bottom of the screen.

PreviousButtonsNextHeaders

Last updated 5 years ago

Was this helpful?

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.

Background-color: #00000; Opacity: 0.3

1. Title (a-text-h3)

font-weight: bold
font-size: 20px
font-color: text-black
padding-left: 16px
padding-right: 16px
padding-top: 48px
padding-bottom: 24px

2. Exit

max-width: 16px
max-height-:16px
color: text-black
border-width: 2px
padding-top: 16px
padding-right: 16px

3. Content Can use filter, radio, or checkbox pickers

Title (a-text-h4):
font-weight: bold
font-size: 16px
font-color: text-black #434343

padding-left: 16px
padding-right: 16px
padding-top: 24px
padding-bottom: 16px


Pickers:
padding-bottom: 24px

4. Link CTA (a-text-paragraph) The Link CTA can take the user down another flow or expand the half sheet with more content.

font-weight: book
font-size: 16px
font-color: blue-medium

padding-top: 24px
padding-bottom: 24px

expansion:
padding-top: 24px
padding-bottom: 24px

5. Primary CTA (a-button-primary)

max-height: 57px
border-radius: 5px
padding-left: 16px
padding-right: 16px
padding-top: 24px
padding-bottom: 16px
color: blue-medium
​
CTA Text (a-text-button)
font-weight: book
font-size: 20px
font-color: white
padding: 16px

Informational Half Sheet (half-sheet-info)

Users can view more information about features on an informational half sheet by tapping on a tool tip.

Background-color: #00000; Opacity: 0.3

1. Title (a-text-h3)

font-weight: bold
font-size: 20px
font-color: text-black
padding-left: 16px
padding-right: 16px
padding-top: 48px
padding-bottom: 24px

2. Exit

max-width: 16px
max-height-:16px
color: text-black
border-width: 2px
padding-top: 16px
padding-right: 16px

3. Content

Body Copy (a-text-paragraph):
font-weight: book
font-size: 16px
font-color: text-black
line-height: 1.5

padding-left: 16px
padding-right: 16px
padding-top: 16px
padding-bottom: 16px

4. Primary CTA (a-button-primary)

max-height: 57px
border-radius: 5px
padding-left: 16px
padding-right: 16px
padding-top: 24px
padding-bottom: 16px
color: blue-medium
​
CTA Text (a-text-button)
font-weight: book
font-size: 20px
font-color: white
padding: 16px

1. Action Half Sheet (half-sheet-action)
2. Informational Half Sheet (half-sheet-info)