Banner notification

      
   <div class="govuk-notification-banner ncs-notification-banner" role="alert"
      aria-labelledby="govuk-notification-banner-title"
      data-module="govuk-notification-banner">
           <div class="govuk-notification-banner__content">
              <p class="govuk-notification-banner__heading"> Save Your Progress:</p>
                <p class="govuk-body">Add the css or scss style to your stylesheet</p>
                 <ul class="govuk-list govuk-list--bullet">
                 <li>return and continue</li>
                 <li>view report online</li>
                 <li>download and report anytime</li>
              </ul>
        </div>
    </div>

    

When to use this component

You can use the banner notification to keep content about something not directly related to the page content together, such as information about saving progress in a form and returning to it later.

Using the banner notification makes it easy for users to skip over the content after reading the heading if they do not want to take the action.

When not to use this component

Do not use the banner notification component unless you've identified a related task that only some users may want to take and be aware of.

How to use this component

You can copy the HTML and paste it where you'd like to display the banner notification on your page.

You can then edit the heading and paragraph elements to show the content you'd like.