### Layout

- Use for self-contained experiences where someone doesn’t need to interact with the app view to complete the task.
- Consider how the panel and its contained contents will scale across responsive web breakpoints.

#### Header

- Include a close button in the top-right corner.
- Lock the title to the top of the panel.
- The header can contain a variety of components. Components are stacked under the main title, locked to the top, and push content down.

#### Body

- The body is a flexible container that can house a wide variety of components, content, and formatting.
- Content can scroll.

#### Footer

- Standard footers include primary and secondary buttons to confirm or cancel the changes or task.
- Read-only panels may contain a single Close button.
- Lock the footer to the bottom of the panel.

### Content

#### Title

- Titles should explain the panel content in clear, concise, and specific terms.
- Keep the length of the title to one line, if possible.
- Use sentence-style capitalization—only capitalize the first word. For more info, see [Capitalization](https://docs.microsoft.com/style-guide/capitalization) in the Microsoft Writing Style Guide.
- Don’t put a period at the end of the title.

#### Button labels

- Be concise. Limit labels to one or two words. Usually a single verb is best. Include a noun if there’s any room for interpretation about what the verb means. For example, “Save” or “Save settings.”