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

Panels are used to draw information to the attention of the user.

Variants

Information

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

Example: Example Panel With Information contents

Nunjucks

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

{{
    onsPanel({
        "body": '<p>Include all rooms built or converted for use as bedrooms</p>'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
bodystringtrueThe contents of the panel. This can contain HTML.
titlestringfalseThe title for the error summary panel
titleTagstringfalseThe HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Will default to an h2
typestringfalseA single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “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:
  • information and branded – “Important information: ”
  • success – “Completed: ”
  • warn and warn-branded – “Warning: ”
  • error– “Error: ”
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-panel ons-panel--info ons-panel--no-title">
  <span class="ons-panel__assistive-text ons-u-vh">Important information: </span>
  <div class="ons-panel__body">
    <p>Include all rooms built or converted for use as bedrooms</p>
  </div>
</div>

Warning

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

Example: Example Panel With Warning contents

Nunjucks

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

{% call onsPanel({
        "type": 'warn'
    })
%}
    All of the information about this person will be deleted
{% endcall %}

Nunjucks macro options

NameTypeRequiredDescription
bodystringtrueThe contents of the panel. This can contain HTML.
titlestringfalseThe title for the error summary panel
titleTagstringfalseThe HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Will default to an h2
typestringfalseA single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “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:
  • information and branded – “Important information: ”
  • success – “Completed: ”
  • warn and warn-branded – “Warning: ”
  • error– “Error: ”
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-panel ons-panel--warn ons-panel--no-title">
  <span class="ons-panel__icon" aria-hidden="true">!</span>
  <span class="ons-panel__assistive-text ons-u-vh">Warning: </span>
  <div class="ons-panel__body"> All of the information about this person will be deleted </div>
</div>

Warning with session expiry timeout

Open this example in a new tab (Example: Example Panel With Timeout Warning)

Example: Example Panel With Timeout Warning contents

Nunjucks

{% from "components/timeout-panel/_macro.njk" import onsTimeoutPanel %}

{{ onsTimeoutPanel ({
    "id": "countdown",
    "redirectUrl": "#!",
    "minutesTextSingular":"minute",
    "minutesTextPlural":"minutes",
    "secondsTextSingular":"second",
    "secondsTextPlural":"seconds",
    "countdownText":"For security, your answers will only be available to view for another",
    "nojsText": "For security, your answers will only be available to view for another 1 minute",
    "countdownExpiredText": "You are being signed out"
}) }}

Nunjucks macro options

NameTypeRequiredDescription
idstringfalseCustom id to add to the panel
sessionExpiresAtstringtrueInitial expiry time set by server on page load in ISO format
minutesTextSingularstringtrueText displayed in timer when minutes left is 1 e.g. ‘minute’
minutesTextPluralstringtrueText displayed in timer when minutes left is more than 1 e.g. ‘minutes’
secondsTextSingularstringtrueText displayed in timer when seconds left is 1 e.g. ‘second’
secondsTextPluralstringtrueText displayed in timer when seconds left is more than 1 e.g. ‘seconds’
countdownTextstringtrueThe text to be displayed alongside the countdown
nojsTextstringtrueThe text to be displayed when js is turned off in the browser
countdownExpiredTextstringfalseThe text to be displayed when countdown expires
redirectUrlstringfalseThe URL to automatically go to when countdown expires
endWithFullStopbooleanfalseIf set to true will end countdown text with full stop

HTML

<div class="ons-panel ons-panel--warn ons-panel--no-title ons-js-panel-with-countdown" data-redirect-url="#!"
  data-server-session-expires-at=""
  data-countdown-text="For security, your answers will only be available to view for another"
  data-countdown-expired-text="You are being signed out" data-minutes-text-singular="minute"
  data-minutes-text-plural="minutes" data-seconds-text-singular="second" data-seconds-text-plural="seconds"
  data-full-stop="" aria-describedby="timeout-time-remaining" id="countdown">
  <span class="ons-panel__icon" aria-hidden="true">!</span>
  <span class="ons-panel__assistive-text ons-u-vh">Warning: </span>
  <div class="ons-panel__body">
    <noscript>
      <p class="ons-js-nojs-text">For security, your answers will only be available to view for another 1 minute</p>
    </noscript>
    <p class="ons-js-timeout-timer" aria-hidden="true" aria-relevant="additions"></p>
    <p class="ons-js-timeout-timer-acc ons-u-vh" role="status" id="timeout-time-remaining"></p>
  </div>
</div>

Use this warning panel variant when a service sets a session expiry time to protect the user’s information.

When the session expiry timer reaches zero, the countdownExpiredText message will be displayed and the browser will redirect to the URL set for a session timed out error page. If the current URL is set, the page will reload.

The content of the warning panel is set using the parameters shown in the macro options table in the previous example.

You will also need to set the parameters:

  • sessionExpiresAt with the current expiry time in ISO format on page load
  • serverSessionExpiryEndpoint with a relative URL to the server’s API endpoint for the component to send requests to
  • redirectUrl with a URL to the session timed out error page the user is directed to when the session has timed out

Server requirements

The timeout panel requires an API endpoint that handles GET request methods and returns a JSON object containing the key expires_at with a value for the session expiry time in ISO format.

A request for the current expiry time

When a request using a GET method is received, the response should contain the current expiry time.

The request is made to check if the same session is being interacted with in another tab.

A request to get the current expiry time will be sent when the following happens:

  • at 20-second intervals after the page loads
  • before the page starts to redirect

Failure responses from the server

If the response status does not have a successful 200 code, the component will handle the response as a session expiry and redirect the user to the URL set in the redirectUrl parameter.

Announcement

This example is an important announcement.

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

Example: Example Panel With Announcement contents

Nunjucks

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

{% call onsPanel({
        "type": '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
titleTagstringfalseThe HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Will default to an h2
typestringfalseA single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “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:
  • information and branded – “Important information: ”
  • success – “Completed: ”
  • warn and warn-branded – “Warning: ”
  • error– “Error: ”
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">
          <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>

Success

This example uses the iconType parameter to show the check icon in the panel. The size of the icon can be set to match the size of the font used in the panel.

There is specific guidance on how to set the size of an icon.

Open this example in a new tab (Example: Example Panel With Success Message)

Example: Example Panel With Success Message contents

Nunjucks

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

{{
    onsPanel({
        "type": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "body": 'Information has been successfully submitted'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
bodystringtrueThe contents of the panel. This can contain HTML.
titlestringfalseThe title for the error summary panel
titleTagstringfalseThe HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Will default to an h2
typestringfalseA single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “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:
  • information and branded – “Important information: ”
  • success – “Completed: ”
  • warn and warn-branded – “Warning: ”
  • error– “Error: ”
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 aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--success ons-panel--no-title"
  id="success-id">
  <span id="alert" class="ons-panel__assistive-text ons-u-vh">Completed: </span>
  <span class="ons-panel__icon ons-u-fs-r">
    <svg class="ons-svg-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
      fill="currentColor">
      <path
        d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
        transform="translate(-1.51 -3.04)" />
    </svg>
  </span>
  <div class="ons-panel__body">Information has been successfully submitted </div>
</div>

Error

There are two types of panel for errors:

  • error summary
  • error details

There is specific guidance on how to correct errors.

Error summary

Open this example in a new tab (Example: Example Panel With Error Summary)

Example: Example Panel With Error Summary contents

Nunjucks

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

{% call onsPanel({
        "title": 'There are 2 problems with your answer',
        "type": 'error'
}) %}
    {{
        onsList({
            "element": 'ol',
            "itemsList": [
                {
                    "text": 'Enter a number',
                    "url": '#container-test-number',
                    "variants": "inPageLink"
                },
                {
                    "text": 'Enter a number less than or equal to 100',
                    "url": '#container-test-percent',
                    "variants": "inPageLink"
                }
            ]
        })
    }}
{% endcall %}

Nunjucks macro options

NameTypeRequiredDescription
bodystringtrueThe contents of the panel. This can contain HTML.
titlestringfalseThe title for the error summary panel
titleTagstringfalseThe HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Will default to an h2
typestringfalseA single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “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:
  • information and branded – “Important information: ”
  • success – “Completed: ”
  • warn and warn-branded – “Warning: ”
  • error– “Error: ”
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 aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error">
  <div class="ons-panel__header">
    <h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">There are 2 problems with your answer
    </h2>
  </div>
  <div class="ons-panel__body">
    <ol class="ons-list">
      <li class="ons-list__item">
        <a href="#container-test-number" class="ons-list__link ons-js-inpagelink">Enter a number</a>
      </li>
      <li class="ons-list__item">
        <a href="#container-test-percent" class="ons-list__link ons-js-inpagelink">Enter a number less than or equal to
          100</a>
      </li>
    </ol>
  </div>
</div>

Error details

Open this example in a new tab (Example: Example Panel With Error Details)

Example: Example Panel With Error Details contents

Nunjucks

{% from "components/input/_macro.njk" import onsInput %}

{{
    onsInput({
        "id": 'number',
        "type": 'number',
        "width": '5',
        "attributes": {
            "min": 0
        },
        "label": {
            "text": 'Number of employees paid monthly'
        },
        "error": {
            "text": 'Enter a number'
        }
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
bodystringtrueThe contents of the panel. This can contain HTML.
titlestringfalseThe title for the error summary panel
titleTagstringfalseThe HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Will default to an h2
typestringfalseA single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “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:
  • information and branded – “Important information: ”
  • success – “Completed: ”
  • warn and warn-branded – “Warning: ”
  • error– “Error: ”
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-panel ons-panel--error ons-panel--no-title">
  <span class="ons-panel__assistive-text ons-u-vh">Error: </span>
  <div class="ons-panel__body">
    <p class="ons-panel__error">
      <strong>Enter a number</strong>
    </p>
    <div class="ons-field">
      <label class="ons-label" for="number">Number of employees paid monthly</label>
      <input type="text" id="number"
        class="ons-input ons-input--text ons-input-type__input ons-input--error ons-input-number--w-5" pattern="[0-9]*"
        inputmode="numeric" min />
    </div>
  </div>
</div>

Spacious

The spacious variant can be used on all inline variants.

Open this example in a new tab (Example: Example Panel With Spacious Information)

Example: Example Panel With Spacious Information contents

Nunjucks

{% from "components/panel/_macro.njk" import onsPanel %}
{{
    onsPanel({
        "spacious": true,
        "body": '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><ul><li>VAT</li><li>Internet sales</li></ul>'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
bodystringtrueThe contents of the panel. This can contain HTML.
titlestringfalseThe title for the error summary panel
titleTagstringfalseThe HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Will default to an h2
typestringfalseA single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “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:
  • information and branded – “Important information: ”
  • success – “Completed: ”
  • warn and warn-branded – “Warning: ”
  • error– “Error: ”
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-panel ons-panel--info ons-panel--no-title ons-panel--spacious">
  <span class="ons-panel__assistive-text ons-u-vh">Important information: </span>
  <div class="ons-panel__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
    <ul>
      <li>VAT</li>
      <li>Internet sales</li>
    </ul>
  </div>
</div>

Bare

The bare variant is used to show text next to an icon. This is used in the access codes pattern.

There is specific guidance on how to use the available set of icons.

Open this example in a new tab (Example: Example Panel Bare)

Example: Example Panel Bare contents

Nunjucks

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

{% call onsPanel({
        "type": 'bare',
        "iconType": 'lock'
    })
%}
    Here is some text with an icon
{% endcall %}

Nunjucks macro options

NameTypeRequiredDescription
bodystringtrueThe contents of the panel. This can contain HTML.
titlestringfalseThe title for the error summary panel
titleTagstringfalseThe HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Will default to an h2
typestringfalseA single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “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:
  • information and branded – “Important information: ”
  • success – “Completed: ”
  • warn and warn-branded – “Warning: ”
  • error– “Error: ”
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-panel ons-panel--bare">
  <span class="ons-panel__assistive-text ons-u-vh">Important information: </span>
  <span class="ons-panel__icon ons-u-fs-r">
    <svg class="ons-svg-icon" viewBox="0 0 10 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
      fill="currentColor">
      <path
        d="M12.25,6h-.72V4.49a3.5,3.5,0,0,0-7,0V6H3.75A.77.77,0,0,0,3,6.75v6.5a.77.77,0,0,0,.75.75h8.5a.77.77,0,0,0,.75-.75V6.75A.77.77,0,0,0,12.25,6ZM5.54,4.49a2.5,2.5,0,1,1,5,0V6h-5ZM9,11.66a.3.3,0,0,1-.26.34H7.29A.29.29,0,0,1,7,11.69v0l.39-1.82a1,1,0,1,1,1.4-.18.77.77,0,0,1-.18.18Z"
        transform="translate(-3 -0.99)" />
    </svg>
  </span>
  <div class="ons-panel__body"> Here is some text with an icon </div>
</div>

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)