Status Pages

Status pages are used to display the state of a system or a response to a user action and suggest next steps to users.

Status pages provide immediate feedback about the outcome of a user's request, clarify why certain actions may have failed, and provide next steps to resolve or understand issues encountered on a site. Effective status messages reduce confusion, help users recover from issues, and support developers in troubleshooting. The pages should be concise and constructive to enhance trust in the site and contribute to smooth experiences.

For accessibility, the svg element should include role="img" , <title>, <desc> and aria-labelledby="[ID]" (where [ID] matches the values of the id attributes on <title> and <desc> )

The five types of status pages defined in Mosaic are illustrated below.

The heading, descriptive text and button text on each page should be customized appropriately for the scenario in which it is used. Refer to Message Guidelines below for more information.

• Error
• Success
• Restricted Access
• Session Timeout
• No Results Found

Status messages should be structured as follows:

1. Title: Short, clear problem statement
2. Description: What went wrong in user-friendly terms
3. Solution: What the user should do next

Consider these key principles for composing status messages.

• Clear problem identification
• Explain the cause
• Provide actionable solutions
• Friendly, professional tone
• User-friendly language (no jargon)

• See also SVG Illustrations for more informtation on SVG icons