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

This website no longer supports your browser. You can upgrade your browser to the latest version.

BETA

This is a new service. To help us improve it, give feedback

Service manual
Search results
    Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.

    Information and media 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

    [object Object]undefined

    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

    [object Object]undefined

    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

    [object Object]undefined

    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" aria-hidden="true">
      <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