Side Sheets
Side sheets are surfaces containing supplementary content that slide in from the side of the screen. They are used for detailed information or secondary tasks.
Live Preview
Product Details
Size
30ml
Price
$49.00
Filters
Category
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| width | string | 256px - 400px | 280px - 360px | 280px - 360px |
| backgroundColor | color | #F7F2FA | #FFFFFF | #FFFFFF |
| elevation (shadow) | shadow | 0 1px 3px rgba(0,0,0,0.12) | 0 4px 6px rgba(0,0,0,0.1) | 0 4px 6px rgba(0,0,0,0.1) |
| dividerColor | color | #CAC4D0 | #999999 (20%) | #8A8A8A (20%) |
| scrimColor (modal) | color | rgba(0,0,0,0.32) | rgba(0,0,0,0.5) | rgba(0,0,0,0.5) |
| padding | string | 24px | 16px | 16px |
| headerHeight | string | 56px | 56px | 56px |
Side Sheet Types
- Standard - Coexists with main content, remains visible while interacting with main UI
- Modal - Overlays main content with a scrim, requires dismissal before returning to main content
Usage Guidelines
- Use side sheets for detailed information or secondary tasks
- Standard side sheets work well for desktop layouts with sufficient width
- Modal side sheets are better for mobile or focused tasks
- Include a clear close button or way to dismiss modal side sheets
- Consider converting to bottom sheets on narrow screens