Skip to main content

Notification banner examples

  • # default

    Open this example in a new tab: button

    Important

    This publication was withdrawn on 7 March 2014. 

    {
  "text": "This publication was withdrawn on 7 March 2014."
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "text": "This publication was withdrawn on 7 March 2014."
}) }}

  • # with text as html

    Open this example in a new tab: button

    Important

    This publication was withdrawn on 7 March 2014

    The following 4 files are available 

    {
  "html": "<h3 class=\"govuk-notification-banner__heading\">\n  This publication was withdrawn on 7 March 2014\n</h3>\n<p class=\"govuk-body\">\n  The following 4 files are available\n</p>\n<ul class=\"govuk-list govuk-list--bullet govuk-!-margin-bottom-0\">\n  <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy.pdf</a></li>\n  <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v2.pdf</a></li>\n  <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v3-FINAL.pdf</a></li>\n  <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v4-FINAL-v2.pdf</a></li>\n</ul>\n"
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "html": "<h3 class=\"govuk-notification-banner__heading\">\n  This publication was withdrawn on 7 March 2014\n</h3>\n<p class=\"govuk-body\">\n  The following 4 files are available\n</p>\n<ul class=\"govuk-list govuk-list--bullet govuk-!-margin-bottom-0\">\n  <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy.pdf</a></li>\n  <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v2.pdf</a></li>\n  <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v3-FINAL.pdf</a></li>\n  <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v4-FINAL-v2.pdf</a></li>\n</ul>\n"
}) }}

  • # with type as success

    Open this example in a new tab: button 
    {
  "type": "success",
  "text": "Email sent to example@email.com"
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "type": "success",
  "text": "Email sent to example@email.com"
}) }}

  • # with long heading

    Open this example in a new tab: button

    Important

    This publication was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters. 

    {
  "text": "This publication was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters."
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "text": "This publication was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters."
}) }}

  • # with lots of content

    Open this example in a new tab: button

    Important

    Check if you need to apply the reverse charge to this application

    You will have to apply the reverse charge if the applicant supplies any of these services:

    • constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services
    • constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours
    {
  "html": "<h3 class=\"govuk-notification-banner__heading\">\n  Check if you need to apply the reverse charge to this application\n</h3>\n<p class=\"govuk-body\">\n  You will have to apply the <a href=\"#\" class=\"govuk-notification-banner__link\">reverse charge</a> if the applicant supplies any of these services:\n</p>\n<ul class=\"govuk-list govuk-list--bullet govuk-list--spaced\">\n  <li>constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services</li>\n  <li>constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours</li>\n</ul>\n"
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "html": "<h3 class=\"govuk-notification-banner__heading\">\n  Check if you need to apply the reverse charge to this application\n</h3>\n<p class=\"govuk-body\">\n  You will have to apply the <a href=\"#\" class=\"govuk-notification-banner__link\">reverse charge</a> if the applicant supplies any of these services:\n</p>\n<ul class=\"govuk-list govuk-list--bullet govuk-list--spaced\">\n  <li>constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services</li>\n  <li>constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours</li>\n</ul>\n"
}) }}

  • # custom title

    Open this example in a new tab: button

    Important information

    This publication was withdrawn on 7 March 2014. 

    {
  "titleText": "Important information",
  "text": "This publication was withdrawn on 7 March 2014."
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "titleText": "Important information",
  "text": "This publication was withdrawn on 7 March 2014."
}) }}

  • # title as html

    Open this example in a new tab: button

    Important information

    This publication was withdrawn on 7 March 2014. 

    {
  "titleHtml": "<span>Important information</span>",
  "text": "This publication was withdrawn on 7 March 2014."
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "titleHtml": "<span>Important information</span>",
  "text": "This publication was withdrawn on 7 March 2014."
}) }}

  • # title html as text

    Open this example in a new tab: button

    <span>Important information</span>

    This publication was withdrawn on 7 March 2014. 

    {
  "titleText": "<span>Important information</span>",
  "text": "This publication was withdrawn on 7 March 2014."
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "titleText": "<span>Important information</span>",
  "text": "This publication was withdrawn on 7 March 2014."
}) }}

  • # custom title heading level

    Open this example in a new tab: button

    Important

    This publication was withdrawn on 7 March 2014. 

    {
  "titleHeadingLevel": 3,
  "text": "This publication was withdrawn on 7 March 2014."
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "titleHeadingLevel": 3,
  "text": "This publication was withdrawn on 7 March 2014."
}) }}

  • # custom title id

    Open this example in a new tab: button

    Important

    This publication was withdrawn on 7 March 2014. 

    {
  "titleId": "my-id",
  "text": "This publication was withdrawn on 7 March 2014."
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "titleId": "my-id",
  "text": "This publication was withdrawn on 7 March 2014."
}) }}

  • # custom title id with type as success

    Open this example in a new tab: button 
    {
  "type": "success",
  "titleId": "my-id",
  "text": "Email sent to example@email.com"
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "type": "success",
  "titleId": "my-id",
  "text": "Email sent to example@email.com"
}) }}

  • # custom text

    Open this example in a new tab: button

    Important

    This publication was withdrawn on 7 March 2014. 

    {
  "text": "This publication was withdrawn on 7 March 2014."
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "text": "This publication was withdrawn on 7 March 2014."
}) }}

  • # html as text

    Open this example in a new tab: button

    Important

    <span>This publication was withdrawn on 7 March 2014.</span> 

    {
  "text": "<span>This publication was withdrawn on 7 March 2014.</span>"
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "text": "<span>This publication was withdrawn on 7 March 2014.</span>"
}) }}

  • # custom role

    Open this example in a new tab: button 
    {
  "role": "banner",
  "text": "This publication was withdrawn on 7 March 2014."
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "role": "banner",
  "text": "This publication was withdrawn on 7 March 2014."
}) }}

  • # classes

    Open this example in a new tab: button

    Important

    This publication was withdrawn on 7 March 2014. 

    {
  "text": "This publication was withdrawn on 7 March 2014.",
  "classes": "app-my-class"
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "text": "This publication was withdrawn on 7 March 2014.",
  "classes": "app-my-class"
}) }}

  • # attributes

    Open this example in a new tab: button

    Important

    This publication was withdrawn on 7 March 2014. 

    {
  "text": "This publication was withdrawn on 7 March 2014.",
  "attributes": {
    "my-attribute": "value"
  }
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "text": "This publication was withdrawn on 7 March 2014.",
  "attributes": {
    "my-attribute": "value"
  }
}) }}

  • # with invalid type

    Open this example in a new tab: button

    Important

    This publication was withdrawn on 7 March 2014. 

    {
  "type": "some-type",
  "text": "This publication was withdrawn on 7 March 2014."
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "type": "some-type",
  "text": "This publication was withdrawn on 7 March 2014."
}) }}

  • # auto-focus disabled, with type as success

    Open this example in a new tab: button 
    {
  "type": "success",
  "disableAutoFocus": true,
  "text": "Email sent to example@email.com"
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "type": "success",
  "disableAutoFocus": true,
  "text": "Email sent to example@email.com"
}) }}

  • # auto-focus explicitly enabled, with type as success

    Open this example in a new tab: button 
    {
  "type": "success",
  "disableAutoFocus": false,
  "text": "Email sent to example@email.com"
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "type": "success",
  "disableAutoFocus": false,
  "text": "Email sent to example@email.com"
}) }}

  • # role=alert overridden to role=region, with type as success

    Open this example in a new tab: button

    Success

    Email sent to example@email.com 

    {
  "type": "success",
  "role": "region",
  "text": "Email sent to example@email.com"
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "type": "success",
  "role": "region",
  "text": "Email sent to example@email.com"
}) }}

  • # custom tabindex

    Open this example in a new tab: button 
    {
  "type": "success",
  "text": "Email sent to example@email.com",
  "attributes": {
    "tabindex": 2
  }
}
    
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{{ govukNotificationBanner({
  "type": "success",
  "text": "Email sent to example@email.com",
  "attributes": {
    "tabindex": 2
  }
}) }}