Skip to main content
Component Pad – Experimental – output can be wrong
GOV.UK Frontend

Notification banner

Component guide

Example

Important

You have 7 days left to send your application. View application.

HTML 


  <div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
  <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>
Nunjucks 

{{ govukNotificationBanner({
  "html": "<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>"
}) }}