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

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

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

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

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

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

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

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

Back to top