Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Panel - announcement

Use an announcement panel is used to display important messages that should be seen by all users but are not directly related to the page content. For example, issues with an entire service.

Open this example in a new tab (Example Panel With Announcement)

Example Panel With Announcement contents

Nunjucks

{% from "components/panel/_macro.njk" import onsPanel %}

{%
    call onsPanel({
        "variant": 'announcement'
    })
%}
    <p class="ons-u-mb-no">National lockdown: stay at home</p>

    <div class="ons-u-fs-r">
        <p>Coronavirus (COVID-19) remains a serious threat across the country. <a href="#0">Find out more</a></p>
    </div>
{% endcall %}

Nunjucks macro options

NameTypeRequiredDescription
bodystringtrueThe contents of the panel. This can contain HTML.
titlestringfalseThe title for the error summary panel (not supported for the warn, warn-branded, announcement and bare panels )
headingLevelintfalseNumber used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Defaults to 2
variantstringfalseA single value to adjust the component using available variants: "info", “success”, “bare”, “error”, “warn”, “warn-branded”, and “announcement”
spaciousbooleanfalseSet to “true” to double the padding spacing surrounding the body content if required
classesstringfalseCustom classes to add to the panel
idstringfalseThe HTML id for the panel
attributesobjectfalseHTML attributes to apply to the panel (for example, data attributes)
assistiveTextPrefixstringfalseSets the visually hidden prefix text for screen readers. Default values for each panel type:
  • info – “Important information: ”
  • success – “Completed: ”
  • warn and warn-branded – “Warning: ”
  • error– “Error: ”
  • announcement– “Announcement: ”
iconTypestringfalseAdds an icon to the panel, before the body content, by setting the icon type
iconSizestringfalseIcon size can be set to match the size of the body content text as detailed in the typography type scale

HTML

<div class="ons-announcement">
  <div class="ons-container">
    <div class="ons-panel ons-panel--announcement ons-panel--no-title">
      <span class="ons-panel__icon" aria-hidden="true"><svg class="" xmlns="http://www.w3.org/2000/svg" width="24px"
          height="24px" viewBox="0 0 24 24" focusable="false" aria-hidden="true" role="img"
          title="ons-icon-arrow-forward">
          <path
            d="M4.2,12c0-0.6,0.4-1,1-1h11.2l-4.9-4.9c-0.4-0.4-0.4-1,0-1.4c0.4-0.4,1-0.4,1.4,0l6.6,6.6c0.4,0.4,0.4,1,0,1.4l-6.6,6.6c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4l4.9-4.9H5.2C4.7,13,4.2,12.6,4.2,12z"
            fill="currentColor"></path>
        </svg></span>
      <span class="ons-panel__assistive-text ons-u-vh">Announcement: </span>
      <div class="ons-panel__body">
        <p class="ons-u-mb-no">National lockdown: stay at home</p>
        <div class="ons-u-fs-r">
          <p>Coronavirus (COVID-19) remains a serious threat across the country. <a href="#0">Find out more</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

When not to use this component

Do not use this component if the message is not relevant to every user or the message needs to be displayed permanently.

To warn the user of something important, use the warning panel.

To inform the user of an error, use an error details and an error summary.

To highlight important text to users, use the information panel.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Panel’ component on GitHub (opens in a new tab) 

Back to top