# Sheets
Sheets show supplementary content and actions anchored to the bottom or the side of the window.
**Example: A modal bottom sheet with file actions**
*HTML*
```html
Show actions
Share
Get link
Make a copy
```
*JavaScript*
```js
document.querySelector('#open-actions').addEventListener('click', () => {
document.querySelector('#actions').show();
});
```
## Usage guidelines
* **Secondary content.** Sheets hold extra content and actions, not the main content of the app.
* **Match the window size.** Use a [bottom sheet](#bottom-sheets) in compact and medium windows and a [side sheet](#side-sheets) in wider ones.
* **Standard or modal.** A standard sheet sits beside the content so people can keep using it. A modal sheet blocks the page under a scrim until it is closed.
## Anatomy
A bottom sheet has a container and an optional drag handle. A side sheet adds a headline, a close button and actions.
**Example: A bottom sheet and a side sheet, each opened by a button**
*HTML*
```html
Bottom sheet
Side sheet
Share this photo with friends.
Filters
Narrow the results by date or author.
Apply
```
*JavaScript*
```js
document.querySelector('#open-bottom').addEventListener('click', () => {
document.querySelector('#bottom').show();
});
document.querySelector('#open-side').addEventListener('click', () => {
document.querySelector('#side').show();
});
```
## Examples
### Bottom sheets
A bottom sheet rests at a partial height and expands when dragged or when its handle is activated. Without `modal` it is a standard sheet with no scrim. Set `state="expanded"` to open it at full height.
**Example: A bottom sheet that opens expanded**
*HTML*
```html
Show details
Taken on June 3 in Lisbon.
```
*JavaScript*
```js
document.querySelector('#open-expanded').addEventListener('click', () => {
document.querySelector('#expanded').show();
});
```
### Without a drag handle
Add `hide-drag-handle` to remove the handle and dragging. Add `skip-partially-expanded` for a sheet that has no partial height.
**Example: A bottom sheet without a drag handle**
*HTML*
```html
Show options
Sort by name, date, or size.
```
*JavaScript*
```js
document.querySelector('#open-plain').addEventListener('click', () => {
document.querySelector('#plain').show();
});
```
### Side sheets
A side sheet has a `headline`, a close button and an `actions` slot. Add `divider` to separate the actions, and `detached` to float the sheet with margins.
**Example: A modal side sheet with Save and Cancel actions**
*HTML*
```html
Filters
Narrow the results by date or author.
Save
Cancel
```
*JavaScript*
```js
document.querySelector('#open-filters').addEventListener('click', () => {
document.querySelector('#filters').show();
});
```
### Back button
Set `has-back-button` on a side sheet to let people go back to an earlier region. The sheet fires `back` when it is pressed.
**Example: A side sheet with a back button**
*HTML*
```html
Details
Created by Ada on May 2.
```
*JavaScript*
```js
document.querySelector('#open-detail').addEventListener('click', () => {
document.querySelector('#detail').show();
});
```
## Accessibility
* A modal sheet is a `