Notification panel

<div class="ds_notification-panel">
    <h1 class="ds_notification-panel__title">Thank you</h1>
    <div class="ds_notification-panel__content"><p>Your Saltire Scholarship Application form has been successfully submitted.</p></div>
</div>

About this component

The notification panel component presents important content when a task completes. Use it on confirmation pages to tell users, both:

• that they have completed the thing they wanted to do
• the outcome such as a success message

A notification panel contains a heading and an optional supporting description.

When using a notification panel, you must:

• place it at the top of the main content, either as the page’s main heading or immediately after it
• only use one notification panel per page

Notification panel titles should be a short high-level explanation of what has happened. If you can, use shorter words to limit text wrapping on small devices.

You should not include buttons or links in a notification panel’s content.

When to use this component

Use this component to tell users when they complete a task they started, such as submitting a form.

When not to use this component

Avoid using a notification panel if a page still has further actions a user can take. For example, when further form fields remain on the page after submitting changes.

Other versions of this component

You can use the supporting description to tell the users extra important information. This could include information a user needs to record, such as a reference number.

<div class="ds_notification-panel">
    <h1 class="ds_notification-panel__title">Application complete</h1>
    <div class="ds_notification-panel__content"><p>Your reference number is <br /><strong class="beta">SG0123456</strong></p></div>
</div>

Why we use this component

Using a visually contrasting area for important content will help users find it.

Related components

• Notification banner
• Page header

Accessibility

If you use a notification panel for a page’s main heading, you should make its title the H1 heading for the page. If the page that already has a H1 heading, use a different heading level for the notification panel’s title. The notification panel’s title will look the same regardless of the heading level used.

Add role="alert" to notification panels you add to the page dynamically. This helps screen readers tell users about the change to the page.