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 - warning

Overview

There are three different types of warning panels:

  • standard warning panel
  • warning with session expiry timeout
  • branded warning panel

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

To deliver a message that is not related to the content of a page, use the announcement panel.

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

Standard warning panel

Use the standard warning panel when you need to warn users about something important, such as legal consequences.

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

Example Panel With Warning contents

Nunjucks

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

{%
    call onsPanel({
        "variant": '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
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
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 panel with session expiry timeout

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

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

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>

How this component works

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.

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

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 so that when the session has timed out the user is directed to the session timed out error page

If the current URL is set, the page will reload.

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:

  • 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.

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