Notice
A notice to convey and highlight information
The notice component replaces the notice and withdrawal notice patterns on GOV.UK.
The component accepts either a simple string description_text parameter that it wraps in a paragraph, or a description_govspeak parameter that is rendered through govspeak for more complex HTML layout.
How it looks (preview all)
How to call this component
<%= render "govuk_publishing_components/components/notice", {
title: "Statistics release cancelled"
} %>Accessibility acceptance criteria
The notice must:
- have a border colour contrast ratio of more than 4.5:1 with its background to be visually distinct.
- always render headings with associated description content, so there are no isolated heading elements inside the component
Other examples
With description (preview)
Statistics release cancelled
The Oil & Gas Authority launched a new website on 3 October 2016 to reflect its new status as a government company.
This formalises the transfer of the Secretary of State’s regulatory powers in respect of oil and gas to the OGA, and grants it new powers. This website will no longer be updated. Visitors should refer to www.ogauthority.co.uk
<%= render "govuk_publishing_components/components/notice", {
title: "Statistics release cancelled",
description: sanitize("<p class=\"govuk-body\">The Oil & Gas Authority launched a new website on 3 October 2016 to reflect its new status as a government company.</p><p class=\"govuk-body\">This formalises the transfer of the Secretary of State’s regulatory powers in respect of oil and gas to the OGA, and grants it new powers. This website will no longer be updated. Visitors should refer to <a class=\"govuk-link\" rel=\"external\" href=\"https://www.ogauthority.co.uk/news-publications/announcements/2015/establishment-of-the-oil-and-gas-authority-1/\">www.ogauthority.co.uk</a></p>")
} %>With description from a block (preview)
Statistics release update
The Oil & Gas Authority launched a new website on 3 October 2016 to reflect its new status as a government company.
This formalises the transfer of the Secretary of State’s regulatory powers in respect of oil and gas to the OGA, and grants it new powers. This website will no longer be updated. Visitors should refer to www.ogauthority.co.uk
<%= render "govuk_publishing_components/components/notice", {
title: "Statistics release update"
} do %>
<p class="govuk-body">The Oil & Gas Authority launched a new website on 3 October 2016 to reflect its new status as a government company.</p><p class="govuk-body">This formalises the transfer of the Secretary of State’s regulatory powers in respect of oil and gas to the OGA, and grants it new powers. This website will no longer be updated. Visitors should refer to <a class="govuk-link" rel="external" href="https://www.ogauthority.co.uk/news-publications/announcements/2015/establishment-of-the-oil-and-gas-authority-1/">www.ogauthority.co.uk</a></p><% end %>With description text (preview)
Statistics release cancelled
Duplicate, added in error
<%= render "govuk_publishing_components/components/notice", {
title: "Statistics release cancelled",
description_text: "Duplicate, added in error"
} %>With description govspeak (preview)
Statistics release update
The Oil & Gas Authority launched a new website on 3 October 2016 to reflect its new status as a government company.
This formalises the transfer of the Secretary of State’s regulatory powers in respect of oil and gas to the OGA, and grants it new powers. This website will no longer be updated. Visitors should refer to www.ogauthority.co.uk
<%= render "govuk_publishing_components/components/notice", {
title: "Statistics release update",
description_govspeak: sanitize("<p>The Oil & Gas Authority launched a new website on 3 October 2016 to reflect its new status as a government company.</p><p>This formalises the transfer of the Secretary of State’s regulatory powers in respect of oil and gas to the OGA, and grants it new powers. This website will no longer be updated. Visitors should refer to <a rel=\"external\" href=\"https://www.ogauthority.co.uk/news-publications/announcements/2015/establishment-of-the-oil-and-gas-authority-1/\">www.ogauthority.co.uk</a></p>")
} %>With markup in the title (preview)
In some circumstances it may be necessary to include simple markup in the title, such as a link. Note that this will be wrapped in a H2 tag if there is no description included, so be sure that any markup inserted is valid inside that tag (e.g. another heading tag inside a H2 would be invalid).
<%= render "govuk_publishing_components/components/notice", {
title: sanitize("Advisory Committee on Novel Foods and Processes has a <a href=\"http://www.food.gov.uk/acnfp\">separate website</a>")
} %>Without title (preview)
Scheduled to publish at 8am on 25 April 2019
Change date
Stop scheduled publishing
<%= render "govuk_publishing_components/components/notice", {
description_govspeak: sanitize("<p>Scheduled to publish at 8am on 25 April 2019<br/><a href=\"change-date\">Change date</a><br/><a href=\"stop-scheduled-publishing\">Stop scheduled publishing</a></p>")
} %>With aria live (preview)
Passing the aria live flag to the notice component will read the notice out to users if the notice changes, e.g on form submission the notice may go from hidden to visible.
Your settings have been saved
This is a confirmation message to tell you your settings have been saved
<%= render "govuk_publishing_components/components/notice", {
title: "Your settings have been saved",
description_govspeak: sanitize("<p>This is a confirmation message to tell you your settings have been saved</p>"),
aria_live: true
} %>