PanelBestPractices

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