Panel - information
Overview
Information panels highlight important information that a user might otherwise miss.
There are three types of information panel:
- Information panel
- Spacious information panel
- Icon information panel
When to use this component
Use this panel to highlight information:
- about the page itself
- about eligibility
- that would prevent a user from contacting us
When not to use this component
Do not use this component more than once under the same heading. It will lose its impact if overused.
information panel
Use this panel to highlight short information panel content.
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 (not supported for the warn, warn-branded, announcement and bare panels ) |
| headingLevel | int | false | Number 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 |
| variant | string | false | A single value to adjust the component using available variants: "info", “success”, “bare”, “error”, “warn”, “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>Spacious information panel
Use a spacious information panel when a list is used in an information panel.
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 (not supported for the warn, warn-branded, announcement and bare panels ) |
| headingLevel | int | false | Number 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 |
| variant | string | false | A single value to adjust the component using available variants: "info", “success”, “bare”, “error”, “warn”, “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>Icon information panel
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 Panel Bare contents
Nunjucks
{% from "components/panel/_macro.njk" import onsPanel %}
{%
call onsPanel({
"variant": '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 (not supported for the warn, warn-branded, announcement and bare panels ) |
| headingLevel | int | false | Number 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 |
| variant | string | false | A single value to adjust the component using available variants: "info", “success”, “bare”, “error”, “warn”, “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-icon" viewBox="0 0 10 13" xmlns="http://www.w3.org/2000/svg"
focusable="false" fill="currentColor" role="img" title="ons-icon-lock">
<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)