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.

Example Panel With Announcement contents

Nunjucksfor Example Panel With Announcement
Nunjucks macro optionsfor Example Panel With Announcement
HTMLfor Example Panel With Announcement

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

Name	Type	Required	Description
body	string	true	The contents of the panel. This can contain HTML.
title	string	false	The title for the error summary panel
titleTag	string	false	The HTML heading tag for the `title`. Use to ensure the title has a correct semantic order on the page. Will default to an `h2`
type	string	false	A single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “warn-branded”, and “announcement”
spacious	boolean	false	Set to “true” to double the padding spacing surrounding the body content if required
classes	string	false	Custom classes to add to the panel
id	string	false	The HTML `id` for the panel
attributes	object	false	HTML attributes to apply to the panel (for example, data attributes)
assistiveTextPrefix	string	false	Sets the visually hidden prefix text for screen readers. Default values for each panel type: `information` and `branded` – “Important information: ” `success` – “Completed: ” `warn` and `warn-branded` – “Warning: ” `error`– “Error: ”
iconType	string	false	Adds an icon to the panel, before the body content, by setting the icon type
iconSize	string	false	Icon 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)