Tearsheet
Tearsheets are containers around complex content, such as a form page. They slide out from one direction on the screen. Use a tearsheet if your users need to complete complex tasks without leaving the page they are on.
Demo and Developer GuidelinesAnatomy
Width/Height
Tearsheets can be any percentage width or height of the viewport. This is up to the designer and developer. It is determined on whatever is best suited for the content.
A tearsheet width or height defaults to the entire page (100% of the viewport) if a size is not specified.
However, there will always be a visible scrim that is a minimum of 96px wide to ensure there is enough room for the floating close button.
A tearsheet width or height defaults to the entire page (100% of the viewport) if a size is not specified.
However, there will always be a visible scrim that is a minimum of 96px wide to ensure there is enough room for the floating close button.
Tearsheets can be any percentage of the viewport width.
Tearsheets can be any percentage of the viewport height.
Ensure there is a 96px minimum for the scrim area to allow for the floating close button.
Variations
Placement
Tearsheets support multiple placements: right, left and bottom.
The tearsheet defaults to right.
The tearsheet defaults to right.
Tearsheet with right placement (default)
Tearsheet with left placement
Tearsheet with bottom placement
Behavior
Animation
Each part of the tearsheet animates in sequence, waiting for the preceding step to finish.
First the scrim fades in. After waiting for duration-medium, the tearsheet body slides-in.
After waiting duration-xslow, the button grows in.
These transition delays and similar are reversed when closing the tearsheet.
First the scrim fades in. After waiting for duration-medium, the tearsheet body slides-in.
After waiting duration-xslow, the button grows in.
These transition delays and similar are reversed when closing the tearsheet.
.gif)
Scrim fades in at duration-medium, ease-out
Tearsheet slides in at duration-xslow, ease-out
Button animates in with grow-enter at duration-fast, ease-out
Specifications
Styling
