search

Half Sheets

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

hashtag
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.

hashtag
Types of Half Sheets

1. Action Half Sheet (half-sheet-action)

2. Informational Half Sheet (half-sheet-info)

hashtag
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. Title (a-text-h3)

2. Exit

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

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

5. Primary CTA (a-button-primary)

hashtag
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. Title (a-text-h3)

2. Exit

3. Content

4. Primary CTA (a-button-primary)

PreviousButtonsNextHeaders

Last updated

Was this helpful?