Notification banner

Use a notification banner to tell the user about something they need to know, but that’s not directly related to the page content.

Use notification banners sparingly. There’s evidence that people often miss them, and using them too often is likely to make this problem worse.

Notification banner with text arguments

Input

= govuk_notification_banner(title_text: "Important", text: "You have 7 days left to send your application.")

<%= govuk_notification_banner(title_text: "Important", text: "You have 7 days left to send your application.") %>

Output

Important

You have 7 days left to send your application.

<div class="govuk-notification-banner" data-module="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title">
  <div class="govuk-notification-banner__header">
    <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
      Important
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    You have 7 days left to send your application.
  </div>
</div>

Notification banner with a block

Input

= govuk_notification_banner(title_text: "Important") do
  p
    |
      You have 7 days left to send your application. You can send it:

  ul
    li by email
    li by post
    li by courier

<%= govuk_notification_banner(title_text: "Important") do %>
  <p>
    You have 7 days left to send your application. You can send it:
  </p>
  <ul>
    <li>by email</li>
    <li>by post</li>
    <li>by courier</li>
  </ul>
<% end %>

Output

Important

You have 7 days left to send your application. You can send it:

• by email
• by post
• by courier

<div class="govuk-notification-banner" data-module="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title">
  <div class="govuk-notification-banner__header">
    <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
      Important
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    <p>
      You have 7 days left to send your application. You can send it:
    </p>
    <ul>
      <li>
        by email
      </li>
      <li>
        by post
      </li>
      <li>
        by courier
      </li>
    </ul>
  </div>
</div>

Notification banner with heading

Input

= govuk_notification_banner(title_text: "Important") do |nb|
  - nb.with_heading(text: text, link_text: link_text, link_href: link_href)

<%= govuk_notification_banner(title_text: "Important") do |nb|
nb.with_heading(text: text, link_text: link_text, link_href: link_href)
end %>

{
  text: "You have 7 days left to send your application.",
  link_text: "View application",
  link_href: "#"
}

Output

<div class="govuk-notification-banner" data-module="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title">
  <div class="govuk-notification-banner__header">
    <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
      Important
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    <p class="govuk-notification-banner__heading">
      You have 7 days left to send your application. <a class="govuk-notification-banner__link" href="#">
        View application
      </a>
    </p>
  </div>
</div>

Notification banner with success

Input

= govuk_notification_banner(title_text: "Success", success: true) do |nb|
  - nb.with_heading(text: "Your application was successful")

  p Contact the helpdesk if you think there's a problem.

<%= govuk_notification_banner(title_text: "Success", success: true) do |nb|
nb.with_heading(text: "Your application was successful")

 %>
<p>Contact the helpdesk if you think there's a problem.</p>
<% end %>

Output

<div class="govuk-notification-banner govuk-notification-banner--success" data-module="govuk-notification-banner" role="alert" aria-labelledby="govuk-notification-banner-title">
  <div class="govuk-notification-banner__header">
    <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
      Success
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    <p class="govuk-notification-banner__heading">
      Your application was successful
    </p>
    <p>
      Contact the helpdesk if you think there's a problem.
    </p>
  </div>
</div>