Panel
Panels are used to draw information to the attention of the user.
Variants
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
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:
|
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-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
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
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:
|
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-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
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
Name | Type | Required | Description |
---|---|---|---|
id | string | false | Custom id to add to the panel |
sessionExpiresAt | string | true | Initial expiry time set by server on page load in ISO format |
minutesTextSingular | string | true | Text displayed in timer when minutes left is 1 e.g. ‘minute’ |
minutesTextPlural | string | true | Text displayed in timer when minutes left is more than 1 e.g. ‘minutes’ |
secondsTextSingular | string | true | Text displayed in timer when seconds left is 1 e.g. ‘second’ |
secondsTextPlural | string | true | Text displayed in timer when seconds left is more than 1 e.g. ‘seconds’ |
countdownText | string | true | The text to be displayed alongside the countdown |
nojsText | string | true | The text to be displayed when js is turned off in the browser |
countdownExpiredText | string | false | The text to be displayed when countdown expires |
redirectUrl | string | false | The URL to automatically go to when countdown expires |
endWithFullStop | boolean | false | If 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 loadserverSessionExpiryEndpoint
with a relative URL to the server’s API endpoint for the component to send requests toredirectUrl
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.
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
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:
|
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">
<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.
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
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:
|
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 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
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
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:
|
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 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
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
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:
|
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-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.
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
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:
|
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-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.
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
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:
|
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-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)