Skip to main content

User testing

Help us improve this service. Take part in a short online exercise

Panel

Panels are used to draw information to the attention of the user.

Variants

Information

Open this example in a new tab  
<div class="ons-panel ons-panel--info ons-panel--no-title">
  <span class="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>
{% from "components/panel/_macro.njk" import onsPanel %}

{{
    onsPanel({
        "body": '<p>Include all rooms built or converted for use as bedrooms</p>'
    })
}}
Name Type Required Description
body string true The contents of the panel. This can be a string of HTML
title string false The title for the panel. If this is not provided the inline/no title version will be rendered
titleTag string false The html tag to wrap the title text in. Will default to a div (for error summaries this is set to h2)
type string false The type of panel to render. Available options are success, warn, error, branded, warn-branded and announcement
spacious boolean false Will render a more spacious version of the panel if set to true
classes string false Custom classes to add to the panel
id string false Custom id to add to the panel
attributes object false HTML attributes to apply to the panel (for example, data attributes)
iconType string false Set this to the name of the icon you want to be included before the contents of the panel
assistiveTextPrefix string false Overrides the visually hidden accessible default prefix text. Available for the following panels with no title:
  • information and branded (‘Important information: ‘)
  • success (‘Completed: ‘)
  • warn and warn-branded (‘Warning: ‘),
  • error (‘Error: ‘)
iconSize string false Set this to the size of the icon you want can be set to “m”, “l” “xl” to match heading size. Defaults to the size of regular text
iconsPath string false Set this to the path to the icon you want to be included before the contents of the panel
dsExample boolean false Defaulted to true in Design System examples but wont be set when used outside of the Design System. This will stop the page focusing on the panel on load - only for use in DS examples 
{% macro onsPanel(params) %}

    {% if params is defined and params and params.classes is defined and params.classes %}
        {% set classes = ' ' + params.classes %}
    {% endif %}

    {% if params is not defined or params.title is not defined and params.type != "bare" %}
        {% set noTitleClass = ' ons-panel--no-title' %}
    {% endif %}

    {% if params is defined and params and params.type is defined and params.type %}
        {% set typeClass = ' ons-panel--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-panel--info' %}
    {% endif %}

    {% if params is defined and params.type == "warn-branded" %}
        {% set containerClass = 'ons-census-warning' %}
    {% endif %}

    {% if params is defined and params.type == "announcement" %}
        {% set containerClass = 'ons-announcement' %}
    {% endif %}

    {% if params is defined and params and params.spacious is defined and params.spacious %}
        {% set spaciousClass = ' ons-panel--spacious' %}
    {% endif %}

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
        <div class="{{containerClass}}">
            <div class="ons-container">
    {% endif %}

        <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>

            {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
                <span class="ons-panel__icon" aria-hidden="true">!</span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
            {% endif %}

            {% if params is defined and params and params.type == "announcement" %}
                {% from "components/icons/_macro.njk" import onsIcon %}
                <span class="ons-panel__icon" aria-hidden="true">
                    {{
                        onsIcon({
                            "iconType": 'arrow-forward'
                        })
                    }}
                </span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
            {% endif %}

            {% if params is defined and params %}
                {% if params.title is defined and params.title %}
                    {% if params is defined and params and params.type == 'error' %}
                        {% set defaultTitleTag = "h2" %}
                    {% else %}
                        {% set defaultTitleTag = "div" %}
                    {% endif %}
                    {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                    <div class="ons-panel__header">
                        <{{ titleTag }} id="error-summary-title" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                    </div>
                {% else %}
                    {% if params.type is not defined or params.type == "branded" %}
                        <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
                    {% else %}
                        {% if params.type is defined and params.type == "success" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Completed: ") }}</span>
                        {% elif params.type is defined and params.type == "error" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Error: ") }}</span>
                        {% endif %}
                    {% endif %}
                {% endif %}

                {% if params.iconType is defined and params.iconType %}
                    {% from "components/icons/_macro.njk" import onsIcon %}
                    <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                        {{
                            onsIcon({
                                "iconType": params.iconType,
                                "iconSize": params.iconSize
                            })
                        }}
                    </span>
                {% endif %}
            {% endif %}

            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                {{ caller() if caller }}
            </div>
        </div>

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
            </div>
        </div>
    {% endif %}

{% endmacro %}

@mixin panel-type($name, $color, $color-bg) {
  .ons-panel {
    &--#{$name} {
      background: $color-bg;
      border-color: $color;
    }

    &--#{$name} & {
      &__header {
        background: $color;
      }
    }
  }
}

.ons-census-warning {
  background: $color-branded-tertiary;
}

.ons-announcement {
  background-color: $color-black;
}

.ons-panel {
  border-radius: 0;
  position: relative;

  // Removes inherited bottom margin to make whitespace inside panel equal
  > *:last-child {
    margin-bottom: 0;
  }

  .ons-field {
    margin-bottom: 0;
  }

  &:focus {
    box-shadow: none;
    outline: 4px solid $color-focus !important;
    outline-offset: 0;
  }

  &__header {
    border-radius: 0;
    color: $color-white;
    margin: 0;
    padding: 0.75rem 1rem;
  }

  &__timer {
    white-space: nowrap;
  }

  &__title {
    margin: 0;
  }

  &__body {
    padding: 1rem;

    // Removes inherited bottom margin to make whitespace inside panel equal
    > *:last-child,
    strong > *:last-child {
      margin-bottom: 0;
    }

    &.ons-svg-icon-margin--xxxl {
      padding-left: 2.7rem !important;

      @include mq(m) {
        padding-left: 3.5rem !important;
      }
    }
    &.ons-svg-icon-margin--xxl {
      padding-left: 2.45rem !important;

      @include mq(m) {
        padding-left: 2.9rem !important;
      }
    }
    &.ons-svg-icon-margin--xl {
      padding-left: 2.35rem !important;

      @include mq(m) {
        padding-left: 2.55rem !important;
      }
    }
    &.ons-svg-icon-margin--l {
      padding-left: 2.25rem !important;

      @include mq(m) {
        padding-left: 2.35rem !important;
      }
    }
    &.ons-svg-icon-margin--m {
      padding-left: 2.05rem !important;

      @include mq(m) {
        padding-left: 2.2rem !important;
      }
    }
    &.ons-svg-icon-margin--s {
      padding-left: 1.7rem !important;
    }
  }

  &__error {
    color: $color-errors;
  }

  &--warn {
    border: 0 !important;
    margin-bottom: 1rem;
    padding: 0;

    &--footer {
      background-color: $color-grey-15 !important;
      margin-bottom: 0;
      padding: 1rem 0 !important;
    }
  }

  &--warn-branded,
  &--announcement {
    border: 0 !important;
    color: $color-white;
    margin-bottom: 0;
    padding: 1rem 0 !important;
    a {
      color: inherit;
      text-decoration: underline solid $color-white 1px;
    }
    a:hover {
      text-decoration-thickness: 2px;
    }
  }

  &--announcement {
    a:focus {
      box-shadow: 0 -2px #fd0, 0 4px #fd0 !important; // Override focus style because the black border is not visible on a black background
    }
  }

  &--no-title {
    border-left: 8px solid transparent;
    padding: 1rem;
    .ons-panel__body {
      background: none;
      padding: 0;
    }
    &.ons-panel--warn {
      padding: 0;
    }
  }

  &--spacious {
    padding: 1rem;

    @include mq(m) {
      padding: 2rem;
    }
  }

  &--warn &,
  &--warn-branded &,
  &--announcement & {
    &__body {
      font-weight: $font-weight-bold;
      min-height: 2rem; // Height of icon
      padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
    }
    &__icon {
      background: $color-black;
      border-radius: 50%;
      color: $color-white;
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 2rem;
      min-height: 2rem;
      min-width: 2rem;
      text-align: center;
    }
  }

  &--announcement & {
    &__body div > *:last-child {
      margin-bottom: 0;
    }

    &__icon {
      background-color: $color-white;
      color: $color-black;
      display: flex;
      svg {
        margin: auto;
      }
    }
  }

  &--warn-branded & {
    &__icon {
      background-color: $color-white;
      color: $color-branded-tertiary;
    }
  }

  &--success & {
    &__icon {
      left: 0;
      padding-left: 1rem;
      .ons-svg-icon {
        fill: $color-success !important;
        margin-top: -15% !important;
      }
    }
  }

  &__icon + &__body {
    padding-left: 2rem;
  }

  &--bare & {
    &__icon {
      height: 1.3rem;
      width: 1.3rem;
    }
    &__body {
      padding: 0 0 0 1.5rem;
    }
  }

  &--info,
  &--bare,
  &--success,
  &--warn,
  &--warn-branded,
  &--announcement {
    .ons-panel__icon {
      position: absolute;
    }
  }
}

@include panel-type(error, $color-errors, $color-errors-tint);
@include panel-type(success, $color-success, $color-success-tint);
@include panel-type(info, $color-info, $color-info-tint);
@include panel-type(branded, $color-branded, $color-branded-tint);
@include panel-type(warn, $color-white, $color-white);
@include panel-type(warn-branded, $color-branded-tertiary, $color-branded-tertiary);
@include panel-type(announcement, $color-black, $color-black);

Warning

Open this example in a new tab  
<div class="ons-panel ons-panel--warn ons-panel--no-title">
  <span class="ons-panel__icon" aria-hidden="true">!</span>
  <span class="ons-u-vh">Warning: </span>
  <div class="ons-panel__body">
    All of the information about this person will be deleted
  </div>
</div>
{% from "components/panel/_macro.njk" import onsPanel %}

{% call onsPanel({
        "type": 'warn'
    })
%}
    All of the information about this person will be deleted
{% endcall %}
Name Type Required Description
body string true The contents of the panel. This can be a string of HTML
title string false The title for the panel. If this is not provided the inline/no title version will be rendered
titleTag string false The html tag to wrap the title text in. Will default to a div (for error summaries this is set to h2)
type string false The type of panel to render. Available options are success, warn, error, branded, warn-branded and announcement
spacious boolean false Will render a more spacious version of the panel if set to true
classes string false Custom classes to add to the panel
id string false Custom id to add to the panel
attributes object false HTML attributes to apply to the panel (for example, data attributes)
iconType string false Set this to the name of the icon you want to be included before the contents of the panel
assistiveTextPrefix string false Overrides the visually hidden accessible default prefix text. Available for the following panels with no title:
  • information and branded (‘Important information: ‘)
  • success (‘Completed: ‘)
  • warn and warn-branded (‘Warning: ‘),
  • error (‘Error: ‘)
iconSize string false Set this to the size of the icon you want can be set to “m”, “l” “xl” to match heading size. Defaults to the size of regular text
iconsPath string false Set this to the path to the icon you want to be included before the contents of the panel
dsExample boolean false Defaulted to true in Design System examples but wont be set when used outside of the Design System. This will stop the page focusing on the panel on load - only for use in DS examples 
{% macro onsPanel(params) %}

    {% if params is defined and params and params.classes is defined and params.classes %}
        {% set classes = ' ' + params.classes %}
    {% endif %}

    {% if params is not defined or params.title is not defined and params.type != "bare" %}
        {% set noTitleClass = ' ons-panel--no-title' %}
    {% endif %}

    {% if params is defined and params and params.type is defined and params.type %}
        {% set typeClass = ' ons-panel--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-panel--info' %}
    {% endif %}

    {% if params is defined and params.type == "warn-branded" %}
        {% set containerClass = 'ons-census-warning' %}
    {% endif %}

    {% if params is defined and params.type == "announcement" %}
        {% set containerClass = 'ons-announcement' %}
    {% endif %}

    {% if params is defined and params and params.spacious is defined and params.spacious %}
        {% set spaciousClass = ' ons-panel--spacious' %}
    {% endif %}

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
        <div class="{{containerClass}}">
            <div class="ons-container">
    {% endif %}

        <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>

            {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
                <span class="ons-panel__icon" aria-hidden="true">!</span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
            {% endif %}

            {% if params is defined and params and params.type == "announcement" %}
                {% from "components/icons/_macro.njk" import onsIcon %}
                <span class="ons-panel__icon" aria-hidden="true">
                    {{
                        onsIcon({
                            "iconType": 'arrow-forward'
                        })
                    }}
                </span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
            {% endif %}

            {% if params is defined and params %}
                {% if params.title is defined and params.title %}
                    {% if params is defined and params and params.type == 'error' %}
                        {% set defaultTitleTag = "h2" %}
                    {% else %}
                        {% set defaultTitleTag = "div" %}
                    {% endif %}
                    {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                    <div class="ons-panel__header">
                        <{{ titleTag }} id="error-summary-title" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                    </div>
                {% else %}
                    {% if params.type is not defined or params.type == "branded" %}
                        <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
                    {% else %}
                        {% if params.type is defined and params.type == "success" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Completed: ") }}</span>
                        {% elif params.type is defined and params.type == "error" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Error: ") }}</span>
                        {% endif %}
                    {% endif %}
                {% endif %}

                {% if params.iconType is defined and params.iconType %}
                    {% from "components/icons/_macro.njk" import onsIcon %}
                    <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                        {{
                            onsIcon({
                                "iconType": params.iconType,
                                "iconSize": params.iconSize
                            })
                        }}
                    </span>
                {% endif %}
            {% endif %}

            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                {{ caller() if caller }}
            </div>
        </div>

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
            </div>
        </div>
    {% endif %}

{% endmacro %}

@mixin panel-type($name, $color, $color-bg) {
  .ons-panel {
    &--#{$name} {
      background: $color-bg;
      border-color: $color;
    }

    &--#{$name} & {
      &__header {
        background: $color;
      }
    }
  }
}

.ons-census-warning {
  background: $color-branded-tertiary;
}

.ons-announcement {
  background-color: $color-black;
}

.ons-panel {
  border-radius: 0;
  position: relative;

  // Removes inherited bottom margin to make whitespace inside panel equal
  > *:last-child {
    margin-bottom: 0;
  }

  .ons-field {
    margin-bottom: 0;
  }

  &:focus {
    box-shadow: none;
    outline: 4px solid $color-focus !important;
    outline-offset: 0;
  }

  &__header {
    border-radius: 0;
    color: $color-white;
    margin: 0;
    padding: 0.75rem 1rem;
  }

  &__timer {
    white-space: nowrap;
  }

  &__title {
    margin: 0;
  }

  &__body {
    padding: 1rem;

    // Removes inherited bottom margin to make whitespace inside panel equal
    > *:last-child,
    strong > *:last-child {
      margin-bottom: 0;
    }

    &.ons-svg-icon-margin--xxxl {
      padding-left: 2.7rem !important;

      @include mq(m) {
        padding-left: 3.5rem !important;
      }
    }
    &.ons-svg-icon-margin--xxl {
      padding-left: 2.45rem !important;

      @include mq(m) {
        padding-left: 2.9rem !important;
      }
    }
    &.ons-svg-icon-margin--xl {
      padding-left: 2.35rem !important;

      @include mq(m) {
        padding-left: 2.55rem !important;
      }
    }
    &.ons-svg-icon-margin--l {
      padding-left: 2.25rem !important;

      @include mq(m) {
        padding-left: 2.35rem !important;
      }
    }
    &.ons-svg-icon-margin--m {
      padding-left: 2.05rem !important;

      @include mq(m) {
        padding-left: 2.2rem !important;
      }
    }
    &.ons-svg-icon-margin--s {
      padding-left: 1.7rem !important;
    }
  }

  &__error {
    color: $color-errors;
  }

  &--warn {
    border: 0 !important;
    margin-bottom: 1rem;
    padding: 0;

    &--footer {
      background-color: $color-grey-15 !important;
      margin-bottom: 0;
      padding: 1rem 0 !important;
    }
  }

  &--warn-branded,
  &--announcement {
    border: 0 !important;
    color: $color-white;
    margin-bottom: 0;
    padding: 1rem 0 !important;
    a {
      color: inherit;
      text-decoration: underline solid $color-white 1px;
    }
    a:hover {
      text-decoration-thickness: 2px;
    }
  }

  &--announcement {
    a:focus {
      box-shadow: 0 -2px #fd0, 0 4px #fd0 !important; // Override focus style because the black border is not visible on a black background
    }
  }

  &--no-title {
    border-left: 8px solid transparent;
    padding: 1rem;
    .ons-panel__body {
      background: none;
      padding: 0;
    }
    &.ons-panel--warn {
      padding: 0;
    }
  }

  &--spacious {
    padding: 1rem;

    @include mq(m) {
      padding: 2rem;
    }
  }

  &--warn &,
  &--warn-branded &,
  &--announcement & {
    &__body {
      font-weight: $font-weight-bold;
      min-height: 2rem; // Height of icon
      padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
    }
    &__icon {
      background: $color-black;
      border-radius: 50%;
      color: $color-white;
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 2rem;
      min-height: 2rem;
      min-width: 2rem;
      text-align: center;
    }
  }

  &--announcement & {
    &__body div > *:last-child {
      margin-bottom: 0;
    }

    &__icon {
      background-color: $color-white;
      color: $color-black;
      display: flex;
      svg {
        margin: auto;
      }
    }
  }

  &--warn-branded & {
    &__icon {
      background-color: $color-white;
      color: $color-branded-tertiary;
    }
  }

  &--success & {
    &__icon {
      left: 0;
      padding-left: 1rem;
      .ons-svg-icon {
        fill: $color-success !important;
        margin-top: -15% !important;
      }
    }
  }

  &__icon + &__body {
    padding-left: 2rem;
  }

  &--bare & {
    &__icon {
      height: 1.3rem;
      width: 1.3rem;
    }
    &__body {
      padding: 0 0 0 1.5rem;
    }
  }

  &--info,
  &--bare,
  &--success,
  &--warn,
  &--warn-branded,
  &--announcement {
    .ons-panel__icon {
      position: absolute;
    }
  }
}

@include panel-type(error, $color-errors, $color-errors-tint);
@include panel-type(success, $color-success, $color-success-tint);
@include panel-type(info, $color-info, $color-info-tint);
@include panel-type(branded, $color-branded, $color-branded-tint);
@include panel-type(warn, $color-white, $color-white);
@include panel-type(warn-branded, $color-branded-tertiary, $color-branded-tertiary);
@include panel-type(announcement, $color-black, $color-black);

Warning with session expiry timer

Open this example in a new tab  
<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-server-session-expiry-endpoint="" 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-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>
{% 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"
}) }}
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 
{% from "components/panel/_macro.njk" import onsPanel %}
{% macro onsTimeoutPanel(params) %}
    {% call onsPanel({
            "id": params.id,
            "classes": "ons-js-panel-with-countdown",
            "type": "warn",
            "attributes": {
                "data-redirect-url": params.redirectUrl,
                "data-server-session-expires-at": params.sessionExpiresAt,
                "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
                "data-countdown-text": params.countdownText,
                "data-countdown-expired-text": params.countdownExpiredText,
                "data-minutes-text-singular": params.minutesTextSingular,
                "data-minutes-text-plural": params.minutesTextPlural,
                "data-seconds-text-singular": params.secondsTextSingular,
                "data-seconds-text-plural": params.secondsTextPlural,
                "data-full-stop": params.endWithFullStop,
                "aria-describedby": "timeout-time-remaining"
            }
        })
    %}
        <noscript><p class="ons-js-nojs-text">{{ params.nojsText }}</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>
    {% endcall %}
{% endmacro %}

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 load
  • serverSessionExpiryEndpoint with a relative URL to the server’s API endpoint for the component to send requests to
  • redirectUrl 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.

Warning branded

This example is a warning variant designed only for the census respond phase. It is to warn users that they must complete the census by law.

Open this example in a new tab  
<div class="ons-census-warning">
  <div class="ons-container">
    <div class="ons-panel ons-panel--warn-branded ons-panel--no-title">
      <span class="ons-panel__icon" aria-hidden="true">!</span>
      <span class="ons-u-vh">Warning: </span>
      <div class="ons-panel__body">
        <p class="ons-u-mb-no">You must complete the census by law or you could be fined up to £1,000</p>
        <p class="ons-u-fs-r">Some questions are labelled as voluntary. It is not an offence if you do not answer these.</p>
      </div>
    </div>
  </div>
</div>
{% from "components/panel/_macro.njk" import onsPanel %}

{% call onsPanel({
        "type": 'warn-branded'
    })
%}

<p class="ons-u-mb-no">You must complete the census by law or you could be fined up to £1,000</p>
<p class="ons-u-fs-r">Some questions are labelled as voluntary. It is not an offence if you do not answer these.</p>

{% endcall %}
Name Type Required Description
body string true The contents of the panel. This can be a string of HTML
title string false The title for the panel. If this is not provided the inline/no title version will be rendered
titleTag string false The html tag to wrap the title text in. Will default to a div (for error summaries this is set to h2)
type string false The type of panel to render. Available options are success, warn, error, branded, warn-branded and announcement
spacious boolean false Will render a more spacious version of the panel if set to true
classes string false Custom classes to add to the panel
id string false Custom id to add to the panel
attributes object false HTML attributes to apply to the panel (for example, data attributes)
iconType string false Set this to the name of the icon you want to be included before the contents of the panel
assistiveTextPrefix string false Overrides the visually hidden accessible default prefix text. Available for the following panels with no title:
  • information and branded (‘Important information: ‘)
  • success (‘Completed: ‘)
  • warn and warn-branded (‘Warning: ‘),
  • error (‘Error: ‘)
iconSize string false Set this to the size of the icon you want can be set to “m”, “l” “xl” to match heading size. Defaults to the size of regular text
iconsPath string false Set this to the path to the icon you want to be included before the contents of the panel
dsExample boolean false Defaulted to true in Design System examples but wont be set when used outside of the Design System. This will stop the page focusing on the panel on load - only for use in DS examples 
{% macro onsPanel(params) %}

    {% if params is defined and params and params.classes is defined and params.classes %}
        {% set classes = ' ' + params.classes %}
    {% endif %}

    {% if params is not defined or params.title is not defined and params.type != "bare" %}
        {% set noTitleClass = ' ons-panel--no-title' %}
    {% endif %}

    {% if params is defined and params and params.type is defined and params.type %}
        {% set typeClass = ' ons-panel--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-panel--info' %}
    {% endif %}

    {% if params is defined and params.type == "warn-branded" %}
        {% set containerClass = 'ons-census-warning' %}
    {% endif %}

    {% if params is defined and params.type == "announcement" %}
        {% set containerClass = 'ons-announcement' %}
    {% endif %}

    {% if params is defined and params and params.spacious is defined and params.spacious %}
        {% set spaciousClass = ' ons-panel--spacious' %}
    {% endif %}

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
        <div class="{{containerClass}}">
            <div class="ons-container">
    {% endif %}

        <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>

            {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
                <span class="ons-panel__icon" aria-hidden="true">!</span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
            {% endif %}

            {% if params is defined and params and params.type == "announcement" %}
                {% from "components/icons/_macro.njk" import onsIcon %}
                <span class="ons-panel__icon" aria-hidden="true">
                    {{
                        onsIcon({
                            "iconType": 'arrow-forward'
                        })
                    }}
                </span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
            {% endif %}

            {% if params is defined and params %}
                {% if params.title is defined and params.title %}
                    {% if params is defined and params and params.type == 'error' %}
                        {% set defaultTitleTag = "h2" %}
                    {% else %}
                        {% set defaultTitleTag = "div" %}
                    {% endif %}
                    {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                    <div class="ons-panel__header">
                        <{{ titleTag }} id="error-summary-title" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                    </div>
                {% else %}
                    {% if params.type is not defined or params.type == "branded" %}
                        <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
                    {% else %}
                        {% if params.type is defined and params.type == "success" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Completed: ") }}</span>
                        {% elif params.type is defined and params.type == "error" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Error: ") }}</span>
                        {% endif %}
                    {% endif %}
                {% endif %}

                {% if params.iconType is defined and params.iconType %}
                    {% from "components/icons/_macro.njk" import onsIcon %}
                    <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                        {{
                            onsIcon({
                                "iconType": params.iconType,
                                "iconSize": params.iconSize
                            })
                        }}
                    </span>
                {% endif %}
            {% endif %}

            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                {{ caller() if caller }}
            </div>
        </div>

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
            </div>
        </div>
    {% endif %}

{% endmacro %}

@mixin panel-type($name, $color, $color-bg) {
  .ons-panel {
    &--#{$name} {
      background: $color-bg;
      border-color: $color;
    }

    &--#{$name} & {
      &__header {
        background: $color;
      }
    }
  }
}

.ons-census-warning {
  background: $color-branded-tertiary;
}

.ons-announcement {
  background-color: $color-black;
}

.ons-panel {
  border-radius: 0;
  position: relative;

  // Removes inherited bottom margin to make whitespace inside panel equal
  > *:last-child {
    margin-bottom: 0;
  }

  .ons-field {
    margin-bottom: 0;
  }

  &:focus {
    box-shadow: none;
    outline: 4px solid $color-focus !important;
    outline-offset: 0;
  }

  &__header {
    border-radius: 0;
    color: $color-white;
    margin: 0;
    padding: 0.75rem 1rem;
  }

  &__timer {
    white-space: nowrap;
  }

  &__title {
    margin: 0;
  }

  &__body {
    padding: 1rem;

    // Removes inherited bottom margin to make whitespace inside panel equal
    > *:last-child,
    strong > *:last-child {
      margin-bottom: 0;
    }

    &.ons-svg-icon-margin--xxxl {
      padding-left: 2.7rem !important;

      @include mq(m) {
        padding-left: 3.5rem !important;
      }
    }
    &.ons-svg-icon-margin--xxl {
      padding-left: 2.45rem !important;

      @include mq(m) {
        padding-left: 2.9rem !important;
      }
    }
    &.ons-svg-icon-margin--xl {
      padding-left: 2.35rem !important;

      @include mq(m) {
        padding-left: 2.55rem !important;
      }
    }
    &.ons-svg-icon-margin--l {
      padding-left: 2.25rem !important;

      @include mq(m) {
        padding-left: 2.35rem !important;
      }
    }
    &.ons-svg-icon-margin--m {
      padding-left: 2.05rem !important;

      @include mq(m) {
        padding-left: 2.2rem !important;
      }
    }
    &.ons-svg-icon-margin--s {
      padding-left: 1.7rem !important;
    }
  }

  &__error {
    color: $color-errors;
  }

  &--warn {
    border: 0 !important;
    margin-bottom: 1rem;
    padding: 0;

    &--footer {
      background-color: $color-grey-15 !important;
      margin-bottom: 0;
      padding: 1rem 0 !important;
    }
  }

  &--warn-branded,
  &--announcement {
    border: 0 !important;
    color: $color-white;
    margin-bottom: 0;
    padding: 1rem 0 !important;
    a {
      color: inherit;
      text-decoration: underline solid $color-white 1px;
    }
    a:hover {
      text-decoration-thickness: 2px;
    }
  }

  &--announcement {
    a:focus {
      box-shadow: 0 -2px #fd0, 0 4px #fd0 !important; // Override focus style because the black border is not visible on a black background
    }
  }

  &--no-title {
    border-left: 8px solid transparent;
    padding: 1rem;
    .ons-panel__body {
      background: none;
      padding: 0;
    }
    &.ons-panel--warn {
      padding: 0;
    }
  }

  &--spacious {
    padding: 1rem;

    @include mq(m) {
      padding: 2rem;
    }
  }

  &--warn &,
  &--warn-branded &,
  &--announcement & {
    &__body {
      font-weight: $font-weight-bold;
      min-height: 2rem; // Height of icon
      padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
    }
    &__icon {
      background: $color-black;
      border-radius: 50%;
      color: $color-white;
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 2rem;
      min-height: 2rem;
      min-width: 2rem;
      text-align: center;
    }
  }

  &--announcement & {
    &__body div > *:last-child {
      margin-bottom: 0;
    }

    &__icon {
      background-color: $color-white;
      color: $color-black;
      display: flex;
      svg {
        margin: auto;
      }
    }
  }

  &--warn-branded & {
    &__icon {
      background-color: $color-white;
      color: $color-branded-tertiary;
    }
  }

  &--success & {
    &__icon {
      left: 0;
      padding-left: 1rem;
      .ons-svg-icon {
        fill: $color-success !important;
        margin-top: -15% !important;
      }
    }
  }

  &__icon + &__body {
    padding-left: 2rem;
  }

  &--bare & {
    &__icon {
      height: 1.3rem;
      width: 1.3rem;
    }
    &__body {
      padding: 0 0 0 1.5rem;
    }
  }

  &--info,
  &--bare,
  &--success,
  &--warn,
  &--warn-branded,
  &--announcement {
    .ons-panel__icon {
      position: absolute;
    }
  }
}

@include panel-type(error, $color-errors, $color-errors-tint);
@include panel-type(success, $color-success, $color-success-tint);
@include panel-type(info, $color-info, $color-info-tint);
@include panel-type(branded, $color-branded, $color-branded-tint);
@include panel-type(warn, $color-white, $color-white);
@include panel-type(warn-branded, $color-branded-tertiary, $color-branded-tertiary);
@include panel-type(announcement, $color-black, $color-black);

Announcement

This example is an important announcement.

Open this example in a new tab  
<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-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>
{% 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 %}
Name Type Required Description
body string true The contents of the panel. This can be a string of HTML
title string false The title for the panel. If this is not provided the inline/no title version will be rendered
titleTag string false The html tag to wrap the title text in. Will default to a div (for error summaries this is set to h2)
type string false The type of panel to render. Available options are success, warn, error, branded, warn-branded and announcement
spacious boolean false Will render a more spacious version of the panel if set to true
classes string false Custom classes to add to the panel
id string false Custom id to add to the panel
attributes object false HTML attributes to apply to the panel (for example, data attributes)
iconType string false Set this to the name of the icon you want to be included before the contents of the panel
assistiveTextPrefix string false Overrides the visually hidden accessible default prefix text. Available for the following panels with no title:
  • information and branded (‘Important information: ‘)
  • success (‘Completed: ‘)
  • warn and warn-branded (‘Warning: ‘),
  • error (‘Error: ‘)
iconSize string false Set this to the size of the icon you want can be set to “m”, “l” “xl” to match heading size. Defaults to the size of regular text
iconsPath string false Set this to the path to the icon you want to be included before the contents of the panel
dsExample boolean false Defaulted to true in Design System examples but wont be set when used outside of the Design System. This will stop the page focusing on the panel on load - only for use in DS examples 
{% macro onsPanel(params) %}

    {% if params is defined and params and params.classes is defined and params.classes %}
        {% set classes = ' ' + params.classes %}
    {% endif %}

    {% if params is not defined or params.title is not defined and params.type != "bare" %}
        {% set noTitleClass = ' ons-panel--no-title' %}
    {% endif %}

    {% if params is defined and params and params.type is defined and params.type %}
        {% set typeClass = ' ons-panel--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-panel--info' %}
    {% endif %}

    {% if params is defined and params.type == "warn-branded" %}
        {% set containerClass = 'ons-census-warning' %}
    {% endif %}

    {% if params is defined and params.type == "announcement" %}
        {% set containerClass = 'ons-announcement' %}
    {% endif %}

    {% if params is defined and params and params.spacious is defined and params.spacious %}
        {% set spaciousClass = ' ons-panel--spacious' %}
    {% endif %}

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
        <div class="{{containerClass}}">
            <div class="ons-container">
    {% endif %}

        <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>

            {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
                <span class="ons-panel__icon" aria-hidden="true">!</span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
            {% endif %}

            {% if params is defined and params and params.type == "announcement" %}
                {% from "components/icons/_macro.njk" import onsIcon %}
                <span class="ons-panel__icon" aria-hidden="true">
                    {{
                        onsIcon({
                            "iconType": 'arrow-forward'
                        })
                    }}
                </span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
            {% endif %}

            {% if params is defined and params %}
                {% if params.title is defined and params.title %}
                    {% if params is defined and params and params.type == 'error' %}
                        {% set defaultTitleTag = "h2" %}
                    {% else %}
                        {% set defaultTitleTag = "div" %}
                    {% endif %}
                    {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                    <div class="ons-panel__header">
                        <{{ titleTag }} id="error-summary-title" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                    </div>
                {% else %}
                    {% if params.type is not defined or params.type == "branded" %}
                        <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
                    {% else %}
                        {% if params.type is defined and params.type == "success" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Completed: ") }}</span>
                        {% elif params.type is defined and params.type == "error" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Error: ") }}</span>
                        {% endif %}
                    {% endif %}
                {% endif %}

                {% if params.iconType is defined and params.iconType %}
                    {% from "components/icons/_macro.njk" import onsIcon %}
                    <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                        {{
                            onsIcon({
                                "iconType": params.iconType,
                                "iconSize": params.iconSize
                            })
                        }}
                    </span>
                {% endif %}
            {% endif %}

            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                {{ caller() if caller }}
            </div>
        </div>

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
            </div>
        </div>
    {% endif %}

{% endmacro %}

@mixin panel-type($name, $color, $color-bg) {
  .ons-panel {
    &--#{$name} {
      background: $color-bg;
      border-color: $color;
    }

    &--#{$name} & {
      &__header {
        background: $color;
      }
    }
  }
}

.ons-census-warning {
  background: $color-branded-tertiary;
}

.ons-announcement {
  background-color: $color-black;
}

.ons-panel {
  border-radius: 0;
  position: relative;

  // Removes inherited bottom margin to make whitespace inside panel equal
  > *:last-child {
    margin-bottom: 0;
  }

  .ons-field {
    margin-bottom: 0;
  }

  &:focus {
    box-shadow: none;
    outline: 4px solid $color-focus !important;
    outline-offset: 0;
  }

  &__header {
    border-radius: 0;
    color: $color-white;
    margin: 0;
    padding: 0.75rem 1rem;
  }

  &__timer {
    white-space: nowrap;
  }

  &__title {
    margin: 0;
  }

  &__body {
    padding: 1rem;

    // Removes inherited bottom margin to make whitespace inside panel equal
    > *:last-child,
    strong > *:last-child {
      margin-bottom: 0;
    }

    &.ons-svg-icon-margin--xxxl {
      padding-left: 2.7rem !important;

      @include mq(m) {
        padding-left: 3.5rem !important;
      }
    }
    &.ons-svg-icon-margin--xxl {
      padding-left: 2.45rem !important;

      @include mq(m) {
        padding-left: 2.9rem !important;
      }
    }
    &.ons-svg-icon-margin--xl {
      padding-left: 2.35rem !important;

      @include mq(m) {
        padding-left: 2.55rem !important;
      }
    }
    &.ons-svg-icon-margin--l {
      padding-left: 2.25rem !important;

      @include mq(m) {
        padding-left: 2.35rem !important;
      }
    }
    &.ons-svg-icon-margin--m {
      padding-left: 2.05rem !important;

      @include mq(m) {
        padding-left: 2.2rem !important;
      }
    }
    &.ons-svg-icon-margin--s {
      padding-left: 1.7rem !important;
    }
  }

  &__error {
    color: $color-errors;
  }

  &--warn {
    border: 0 !important;
    margin-bottom: 1rem;
    padding: 0;

    &--footer {
      background-color: $color-grey-15 !important;
      margin-bottom: 0;
      padding: 1rem 0 !important;
    }
  }

  &--warn-branded,
  &--announcement {
    border: 0 !important;
    color: $color-white;
    margin-bottom: 0;
    padding: 1rem 0 !important;
    a {
      color: inherit;
      text-decoration: underline solid $color-white 1px;
    }
    a:hover {
      text-decoration-thickness: 2px;
    }
  }

  &--announcement {
    a:focus {
      box-shadow: 0 -2px #fd0, 0 4px #fd0 !important; // Override focus style because the black border is not visible on a black background
    }
  }

  &--no-title {
    border-left: 8px solid transparent;
    padding: 1rem;
    .ons-panel__body {
      background: none;
      padding: 0;
    }
    &.ons-panel--warn {
      padding: 0;
    }
  }

  &--spacious {
    padding: 1rem;

    @include mq(m) {
      padding: 2rem;
    }
  }

  &--warn &,
  &--warn-branded &,
  &--announcement & {
    &__body {
      font-weight: $font-weight-bold;
      min-height: 2rem; // Height of icon
      padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
    }
    &__icon {
      background: $color-black;
      border-radius: 50%;
      color: $color-white;
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 2rem;
      min-height: 2rem;
      min-width: 2rem;
      text-align: center;
    }
  }

  &--announcement & {
    &__body div > *:last-child {
      margin-bottom: 0;
    }

    &__icon {
      background-color: $color-white;
      color: $color-black;
      display: flex;
      svg {
        margin: auto;
      }
    }
  }

  &--warn-branded & {
    &__icon {
      background-color: $color-white;
      color: $color-branded-tertiary;
    }
  }

  &--success & {
    &__icon {
      left: 0;
      padding-left: 1rem;
      .ons-svg-icon {
        fill: $color-success !important;
        margin-top: -15% !important;
      }
    }
  }

  &__icon + &__body {
    padding-left: 2rem;
  }

  &--bare & {
    &__icon {
      height: 1.3rem;
      width: 1.3rem;
    }
    &__body {
      padding: 0 0 0 1.5rem;
    }
  }

  &--info,
  &--bare,
  &--success,
  &--warn,
  &--warn-branded,
  &--announcement {
    .ons-panel__icon {
      position: absolute;
    }
  }
}

@include panel-type(error, $color-errors, $color-errors-tint);
@include panel-type(success, $color-success, $color-success-tint);
@include panel-type(info, $color-info, $color-info-tint);
@include panel-type(branded, $color-branded, $color-branded-tint);
@include panel-type(warn, $color-white, $color-white);
@include panel-type(warn-branded, $color-branded-tertiary, $color-branded-tertiary);
@include panel-type(announcement, $color-black, $color-black);

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.

Open this example in a new tab  
<div class="ons-panel ons-panel--success ons-panel--no-title" id="success-id">
  <span class="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>
{% from "components/panel/_macro.njk" import onsPanel %}

{{
    onsPanel({
        "type": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "body": 'Information has been successfully submitted'
    })
}}
Name Type Required Description
body string true The contents of the panel. This can be a string of HTML
title string false The title for the panel. If this is not provided the inline/no title version will be rendered
titleTag string false The html tag to wrap the title text in. Will default to a div (for error summaries this is set to h2)
type string false The type of panel to render. Available options are success, warn, error, branded, warn-branded and announcement
spacious boolean false Will render a more spacious version of the panel if set to true
classes string false Custom classes to add to the panel
id string false Custom id to add to the panel
attributes object false HTML attributes to apply to the panel (for example, data attributes)
iconType string false Set this to the name of the icon you want to be included before the contents of the panel
assistiveTextPrefix string false Overrides the visually hidden accessible default prefix text. Available for the following panels with no title:
  • information and branded (‘Important information: ‘)
  • success (‘Completed: ‘)
  • warn and warn-branded (‘Warning: ‘),
  • error (‘Error: ‘)
iconSize string false Set this to the size of the icon you want can be set to “m”, “l” “xl” to match heading size. Defaults to the size of regular text
iconsPath string false Set this to the path to the icon you want to be included before the contents of the panel
dsExample boolean false Defaulted to true in Design System examples but wont be set when used outside of the Design System. This will stop the page focusing on the panel on load - only for use in DS examples 
{% macro onsPanel(params) %}

    {% if params is defined and params and params.classes is defined and params.classes %}
        {% set classes = ' ' + params.classes %}
    {% endif %}

    {% if params is not defined or params.title is not defined and params.type != "bare" %}
        {% set noTitleClass = ' ons-panel--no-title' %}
    {% endif %}

    {% if params is defined and params and params.type is defined and params.type %}
        {% set typeClass = ' ons-panel--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-panel--info' %}
    {% endif %}

    {% if params is defined and params.type == "warn-branded" %}
        {% set containerClass = 'ons-census-warning' %}
    {% endif %}

    {% if params is defined and params.type == "announcement" %}
        {% set containerClass = 'ons-announcement' %}
    {% endif %}

    {% if params is defined and params and params.spacious is defined and params.spacious %}
        {% set spaciousClass = ' ons-panel--spacious' %}
    {% endif %}

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
        <div class="{{containerClass}}">
            <div class="ons-container">
    {% endif %}

        <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>

            {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
                <span class="ons-panel__icon" aria-hidden="true">!</span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
            {% endif %}

            {% if params is defined and params and params.type == "announcement" %}
                {% from "components/icons/_macro.njk" import onsIcon %}
                <span class="ons-panel__icon" aria-hidden="true">
                    {{
                        onsIcon({
                            "iconType": 'arrow-forward'
                        })
                    }}
                </span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
            {% endif %}

            {% if params is defined and params %}
                {% if params.title is defined and params.title %}
                    {% if params is defined and params and params.type == 'error' %}
                        {% set defaultTitleTag = "h2" %}
                    {% else %}
                        {% set defaultTitleTag = "div" %}
                    {% endif %}
                    {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                    <div class="ons-panel__header">
                        <{{ titleTag }} id="error-summary-title" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                    </div>
                {% else %}
                    {% if params.type is not defined or params.type == "branded" %}
                        <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
                    {% else %}
                        {% if params.type is defined and params.type == "success" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Completed: ") }}</span>
                        {% elif params.type is defined and params.type == "error" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Error: ") }}</span>
                        {% endif %}
                    {% endif %}
                {% endif %}

                {% if params.iconType is defined and params.iconType %}
                    {% from "components/icons/_macro.njk" import onsIcon %}
                    <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                        {{
                            onsIcon({
                                "iconType": params.iconType,
                                "iconSize": params.iconSize
                            })
                        }}
                    </span>
                {% endif %}
            {% endif %}

            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                {{ caller() if caller }}
            </div>
        </div>

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
            </div>
        </div>
    {% endif %}

{% endmacro %}

@mixin panel-type($name, $color, $color-bg) {
  .ons-panel {
    &--#{$name} {
      background: $color-bg;
      border-color: $color;
    }

    &--#{$name} & {
      &__header {
        background: $color;
      }
    }
  }
}

.ons-census-warning {
  background: $color-branded-tertiary;
}

.ons-announcement {
  background-color: $color-black;
}

.ons-panel {
  border-radius: 0;
  position: relative;

  // Removes inherited bottom margin to make whitespace inside panel equal
  > *:last-child {
    margin-bottom: 0;
  }

  .ons-field {
    margin-bottom: 0;
  }

  &:focus {
    box-shadow: none;
    outline: 4px solid $color-focus !important;
    outline-offset: 0;
  }

  &__header {
    border-radius: 0;
    color: $color-white;
    margin: 0;
    padding: 0.75rem 1rem;
  }

  &__timer {
    white-space: nowrap;
  }

  &__title {
    margin: 0;
  }

  &__body {
    padding: 1rem;

    // Removes inherited bottom margin to make whitespace inside panel equal
    > *:last-child,
    strong > *:last-child {
      margin-bottom: 0;
    }

    &.ons-svg-icon-margin--xxxl {
      padding-left: 2.7rem !important;

      @include mq(m) {
        padding-left: 3.5rem !important;
      }
    }
    &.ons-svg-icon-margin--xxl {
      padding-left: 2.45rem !important;

      @include mq(m) {
        padding-left: 2.9rem !important;
      }
    }
    &.ons-svg-icon-margin--xl {
      padding-left: 2.35rem !important;

      @include mq(m) {
        padding-left: 2.55rem !important;
      }
    }
    &.ons-svg-icon-margin--l {
      padding-left: 2.25rem !important;

      @include mq(m) {
        padding-left: 2.35rem !important;
      }
    }
    &.ons-svg-icon-margin--m {
      padding-left: 2.05rem !important;

      @include mq(m) {
        padding-left: 2.2rem !important;
      }
    }
    &.ons-svg-icon-margin--s {
      padding-left: 1.7rem !important;
    }
  }

  &__error {
    color: $color-errors;
  }

  &--warn {
    border: 0 !important;
    margin-bottom: 1rem;
    padding: 0;

    &--footer {
      background-color: $color-grey-15 !important;
      margin-bottom: 0;
      padding: 1rem 0 !important;
    }
  }

  &--warn-branded,
  &--announcement {
    border: 0 !important;
    color: $color-white;
    margin-bottom: 0;
    padding: 1rem 0 !important;
    a {
      color: inherit;
      text-decoration: underline solid $color-white 1px;
    }
    a:hover {
      text-decoration-thickness: 2px;
    }
  }

  &--announcement {
    a:focus {
      box-shadow: 0 -2px #fd0, 0 4px #fd0 !important; // Override focus style because the black border is not visible on a black background
    }
  }

  &--no-title {
    border-left: 8px solid transparent;
    padding: 1rem;
    .ons-panel__body {
      background: none;
      padding: 0;
    }
    &.ons-panel--warn {
      padding: 0;
    }
  }

  &--spacious {
    padding: 1rem;

    @include mq(m) {
      padding: 2rem;
    }
  }

  &--warn &,
  &--warn-branded &,
  &--announcement & {
    &__body {
      font-weight: $font-weight-bold;
      min-height: 2rem; // Height of icon
      padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
    }
    &__icon {
      background: $color-black;
      border-radius: 50%;
      color: $color-white;
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 2rem;
      min-height: 2rem;
      min-width: 2rem;
      text-align: center;
    }
  }

  &--announcement & {
    &__body div > *:last-child {
      margin-bottom: 0;
    }

    &__icon {
      background-color: $color-white;
      color: $color-black;
      display: flex;
      svg {
        margin: auto;
      }
    }
  }

  &--warn-branded & {
    &__icon {
      background-color: $color-white;
      color: $color-branded-tertiary;
    }
  }

  &--success & {
    &__icon {
      left: 0;
      padding-left: 1rem;
      .ons-svg-icon {
        fill: $color-success !important;
        margin-top: -15% !important;
      }
    }
  }

  &__icon + &__body {
    padding-left: 2rem;
  }

  &--bare & {
    &__icon {
      height: 1.3rem;
      width: 1.3rem;
    }
    &__body {
      padding: 0 0 0 1.5rem;
    }
  }

  &--info,
  &--bare,
  &--success,
  &--warn,
  &--warn-branded,
  &--announcement {
    .ons-panel__icon {
      position: absolute;
    }
  }
}

@include panel-type(error, $color-errors, $color-errors-tint);
@include panel-type(success, $color-success, $color-success-tint);
@include panel-type(info, $color-info, $color-info-tint);
@include panel-type(branded, $color-branded, $color-branded-tint);
@include panel-type(warn, $color-white, $color-white);
@include panel-type(warn-branded, $color-branded-tertiary, $color-branded-tertiary);
@include panel-type(announcement, $color-black, $color-black);

Error

There are two types of panel for errors:

  • error summary
  • error details

There is specific guidance on how to correct errors.

Error summary

Open this example in a new tab  
<div aria-labelledby="error-summary-title" role="alert" tabindex="-1" class="ons-panel ons-panel--error">
  <div class="ons-panel__header">
    <h2 id="error-summary-title" 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>
{% 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',
        "dsExample": isPatternLib
}) %}
    {{
        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 %}
Name Type Required Description
body string true The contents of the panel. This can be a string of HTML
title string false The title for the panel. If this is not provided the inline/no title version will be rendered
titleTag string false The html tag to wrap the title text in. Will default to a div (for error summaries this is set to h2)
type string false The type of panel to render. Available options are success, warn, error, branded, warn-branded and announcement
spacious boolean false Will render a more spacious version of the panel if set to true
classes string false Custom classes to add to the panel
id string false Custom id to add to the panel
attributes object false HTML attributes to apply to the panel (for example, data attributes)
iconType string false Set this to the name of the icon you want to be included before the contents of the panel
assistiveTextPrefix string false Overrides the visually hidden accessible default prefix text. Available for the following panels with no title:
  • information and branded (‘Important information: ‘)
  • success (‘Completed: ‘)
  • warn and warn-branded (‘Warning: ‘),
  • error (‘Error: ‘)
iconSize string false Set this to the size of the icon you want can be set to “m”, “l” “xl” to match heading size. Defaults to the size of regular text
iconsPath string false Set this to the path to the icon you want to be included before the contents of the panel
dsExample boolean false Defaulted to true in Design System examples but wont be set when used outside of the Design System. This will stop the page focusing on the panel on load - only for use in DS examples 
{% macro onsPanel(params) %}

    {% if params is defined and params and params.classes is defined and params.classes %}
        {% set classes = ' ' + params.classes %}
    {% endif %}

    {% if params is not defined or params.title is not defined and params.type != "bare" %}
        {% set noTitleClass = ' ons-panel--no-title' %}
    {% endif %}

    {% if params is defined and params and params.type is defined and params.type %}
        {% set typeClass = ' ons-panel--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-panel--info' %}
    {% endif %}

    {% if params is defined and params.type == "warn-branded" %}
        {% set containerClass = 'ons-census-warning' %}
    {% endif %}

    {% if params is defined and params.type == "announcement" %}
        {% set containerClass = 'ons-announcement' %}
    {% endif %}

    {% if params is defined and params and params.spacious is defined and params.spacious %}
        {% set spaciousClass = ' ons-panel--spacious' %}
    {% endif %}

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
        <div class="{{containerClass}}">
            <div class="ons-container">
    {% endif %}

        <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>

            {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
                <span class="ons-panel__icon" aria-hidden="true">!</span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
            {% endif %}

            {% if params is defined and params and params.type == "announcement" %}
                {% from "components/icons/_macro.njk" import onsIcon %}
                <span class="ons-panel__icon" aria-hidden="true">
                    {{
                        onsIcon({
                            "iconType": 'arrow-forward'
                        })
                    }}
                </span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
            {% endif %}

            {% if params is defined and params %}
                {% if params.title is defined and params.title %}
                    {% if params is defined and params and params.type == 'error' %}
                        {% set defaultTitleTag = "h2" %}
                    {% else %}
                        {% set defaultTitleTag = "div" %}
                    {% endif %}
                    {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                    <div class="ons-panel__header">
                        <{{ titleTag }} id="error-summary-title" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                    </div>
                {% else %}
                    {% if params.type is not defined or params.type == "branded" %}
                        <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
                    {% else %}
                        {% if params.type is defined and params.type == "success" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Completed: ") }}</span>
                        {% elif params.type is defined and params.type == "error" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Error: ") }}</span>
                        {% endif %}
                    {% endif %}
                {% endif %}

                {% if params.iconType is defined and params.iconType %}
                    {% from "components/icons/_macro.njk" import onsIcon %}
                    <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                        {{
                            onsIcon({
                                "iconType": params.iconType,
                                "iconSize": params.iconSize
                            })
                        }}
                    </span>
                {% endif %}
            {% endif %}

            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                {{ caller() if caller }}
            </div>
        </div>

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
            </div>
        </div>
    {% endif %}

{% endmacro %}

@mixin panel-type($name, $color, $color-bg) {
  .ons-panel {
    &--#{$name} {
      background: $color-bg;
      border-color: $color;
    }

    &--#{$name} & {
      &__header {
        background: $color;
      }
    }
  }
}

.ons-census-warning {
  background: $color-branded-tertiary;
}

.ons-announcement {
  background-color: $color-black;
}

.ons-panel {
  border-radius: 0;
  position: relative;

  // Removes inherited bottom margin to make whitespace inside panel equal
  > *:last-child {
    margin-bottom: 0;
  }

  .ons-field {
    margin-bottom: 0;
  }

  &:focus {
    box-shadow: none;
    outline: 4px solid $color-focus !important;
    outline-offset: 0;
  }

  &__header {
    border-radius: 0;
    color: $color-white;
    margin: 0;
    padding: 0.75rem 1rem;
  }

  &__timer {
    white-space: nowrap;
  }

  &__title {
    margin: 0;
  }

  &__body {
    padding: 1rem;

    // Removes inherited bottom margin to make whitespace inside panel equal
    > *:last-child,
    strong > *:last-child {
      margin-bottom: 0;
    }

    &.ons-svg-icon-margin--xxxl {
      padding-left: 2.7rem !important;

      @include mq(m) {
        padding-left: 3.5rem !important;
      }
    }
    &.ons-svg-icon-margin--xxl {
      padding-left: 2.45rem !important;

      @include mq(m) {
        padding-left: 2.9rem !important;
      }
    }
    &.ons-svg-icon-margin--xl {
      padding-left: 2.35rem !important;

      @include mq(m) {
        padding-left: 2.55rem !important;
      }
    }
    &.ons-svg-icon-margin--l {
      padding-left: 2.25rem !important;

      @include mq(m) {
        padding-left: 2.35rem !important;
      }
    }
    &.ons-svg-icon-margin--m {
      padding-left: 2.05rem !important;

      @include mq(m) {
        padding-left: 2.2rem !important;
      }
    }
    &.ons-svg-icon-margin--s {
      padding-left: 1.7rem !important;
    }
  }

  &__error {
    color: $color-errors;
  }

  &--warn {
    border: 0 !important;
    margin-bottom: 1rem;
    padding: 0;

    &--footer {
      background-color: $color-grey-15 !important;
      margin-bottom: 0;
      padding: 1rem 0 !important;
    }
  }

  &--warn-branded,
  &--announcement {
    border: 0 !important;
    color: $color-white;
    margin-bottom: 0;
    padding: 1rem 0 !important;
    a {
      color: inherit;
      text-decoration: underline solid $color-white 1px;
    }
    a:hover {
      text-decoration-thickness: 2px;
    }
  }

  &--announcement {
    a:focus {
      box-shadow: 0 -2px #fd0, 0 4px #fd0 !important; // Override focus style because the black border is not visible on a black background
    }
  }

  &--no-title {
    border-left: 8px solid transparent;
    padding: 1rem;
    .ons-panel__body {
      background: none;
      padding: 0;
    }
    &.ons-panel--warn {
      padding: 0;
    }
  }

  &--spacious {
    padding: 1rem;

    @include mq(m) {
      padding: 2rem;
    }
  }

  &--warn &,
  &--warn-branded &,
  &--announcement & {
    &__body {
      font-weight: $font-weight-bold;
      min-height: 2rem; // Height of icon
      padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
    }
    &__icon {
      background: $color-black;
      border-radius: 50%;
      color: $color-white;
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 2rem;
      min-height: 2rem;
      min-width: 2rem;
      text-align: center;
    }
  }

  &--announcement & {
    &__body div > *:last-child {
      margin-bottom: 0;
    }

    &__icon {
      background-color: $color-white;
      color: $color-black;
      display: flex;
      svg {
        margin: auto;
      }
    }
  }

  &--warn-branded & {
    &__icon {
      background-color: $color-white;
      color: $color-branded-tertiary;
    }
  }

  &--success & {
    &__icon {
      left: 0;
      padding-left: 1rem;
      .ons-svg-icon {
        fill: $color-success !important;
        margin-top: -15% !important;
      }
    }
  }

  &__icon + &__body {
    padding-left: 2rem;
  }

  &--bare & {
    &__icon {
      height: 1.3rem;
      width: 1.3rem;
    }
    &__body {
      padding: 0 0 0 1.5rem;
    }
  }

  &--info,
  &--bare,
  &--success,
  &--warn,
  &--warn-branded,
  &--announcement {
    .ons-panel__icon {
      position: absolute;
    }
  }
}

@include panel-type(error, $color-errors, $color-errors-tint);
@include panel-type(success, $color-success, $color-success-tint);
@include panel-type(info, $color-info, $color-info-tint);
@include panel-type(branded, $color-branded, $color-branded-tint);
@include panel-type(warn, $color-white, $color-white);
@include panel-type(warn-branded, $color-branded-tertiary, $color-branded-tertiary);
@include panel-type(announcement, $color-black, $color-black);

Error details

Open this example in a new tab  
<div class="ons-panel ons-panel--error ons-panel--no-title">
  <span class="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 required="required" />
    </div>
  </div>
</div>
{% from "components/input/_macro.njk" import onsInput %}

{{
    onsInput({
        "id": 'number',
        "type": 'number',
        "width": '5',
        "required": true,
        "attributes": {
            "min": 0
        },
        "label": {
            "text": 'Number of employees paid monthly'
        },
        "error": {
            "text": 'Enter a number',
            "dsExample": isPatternLib
        }
    })
}}
Name Type Required Description
body string true The contents of the panel. This can be a string of HTML
title string false The title for the panel. If this is not provided the inline/no title version will be rendered
titleTag string false The html tag to wrap the title text in. Will default to a div (for error summaries this is set to h2)
type string false The type of panel to render. Available options are success, warn, error, branded, warn-branded and announcement
spacious boolean false Will render a more spacious version of the panel if set to true
classes string false Custom classes to add to the panel
id string false Custom id to add to the panel
attributes object false HTML attributes to apply to the panel (for example, data attributes)
iconType string false Set this to the name of the icon you want to be included before the contents of the panel
assistiveTextPrefix string false Overrides the visually hidden accessible default prefix text. Available for the following panels with no title:
  • information and branded (‘Important information: ‘)
  • success (‘Completed: ‘)
  • warn and warn-branded (‘Warning: ‘),
  • error (‘Error: ‘)
iconSize string false Set this to the size of the icon you want can be set to “m”, “l” “xl” to match heading size. Defaults to the size of regular text
iconsPath string false Set this to the path to the icon you want to be included before the contents of the panel
dsExample boolean false Defaulted to true in Design System examples but wont be set when used outside of the Design System. This will stop the page focusing on the panel on load - only for use in DS examples 
{% macro onsPanel(params) %}

    {% if params is defined and params and params.classes is defined and params.classes %}
        {% set classes = ' ' + params.classes %}
    {% endif %}

    {% if params is not defined or params.title is not defined and params.type != "bare" %}
        {% set noTitleClass = ' ons-panel--no-title' %}
    {% endif %}

    {% if params is defined and params and params.type is defined and params.type %}
        {% set typeClass = ' ons-panel--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-panel--info' %}
    {% endif %}

    {% if params is defined and params.type == "warn-branded" %}
        {% set containerClass = 'ons-census-warning' %}
    {% endif %}

    {% if params is defined and params.type == "announcement" %}
        {% set containerClass = 'ons-announcement' %}
    {% endif %}

    {% if params is defined and params and params.spacious is defined and params.spacious %}
        {% set spaciousClass = ' ons-panel--spacious' %}
    {% endif %}

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
        <div class="{{containerClass}}">
            <div class="ons-container">
    {% endif %}

        <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>

            {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
                <span class="ons-panel__icon" aria-hidden="true">!</span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
            {% endif %}

            {% if params is defined and params and params.type == "announcement" %}
                {% from "components/icons/_macro.njk" import onsIcon %}
                <span class="ons-panel__icon" aria-hidden="true">
                    {{
                        onsIcon({
                            "iconType": 'arrow-forward'
                        })
                    }}
                </span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
            {% endif %}

            {% if params is defined and params %}
                {% if params.title is defined and params.title %}
                    {% if params is defined and params and params.type == 'error' %}
                        {% set defaultTitleTag = "h2" %}
                    {% else %}
                        {% set defaultTitleTag = "div" %}
                    {% endif %}
                    {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                    <div class="ons-panel__header">
                        <{{ titleTag }} id="error-summary-title" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                    </div>
                {% else %}
                    {% if params.type is not defined or params.type == "branded" %}
                        <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
                    {% else %}
                        {% if params.type is defined and params.type == "success" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Completed: ") }}</span>
                        {% elif params.type is defined and params.type == "error" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Error: ") }}</span>
                        {% endif %}
                    {% endif %}
                {% endif %}

                {% if params.iconType is defined and params.iconType %}
                    {% from "components/icons/_macro.njk" import onsIcon %}
                    <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                        {{
                            onsIcon({
                                "iconType": params.iconType,
                                "iconSize": params.iconSize
                            })
                        }}
                    </span>
                {% endif %}
            {% endif %}

            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                {{ caller() if caller }}
            </div>
        </div>

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
            </div>
        </div>
    {% endif %}

{% endmacro %}

@mixin panel-type($name, $color, $color-bg) {
  .ons-panel {
    &--#{$name} {
      background: $color-bg;
      border-color: $color;
    }

    &--#{$name} & {
      &__header {
        background: $color;
      }
    }
  }
}

.ons-census-warning {
  background: $color-branded-tertiary;
}

.ons-announcement {
  background-color: $color-black;
}

.ons-panel {
  border-radius: 0;
  position: relative;

  // Removes inherited bottom margin to make whitespace inside panel equal
  > *:last-child {
    margin-bottom: 0;
  }

  .ons-field {
    margin-bottom: 0;
  }

  &:focus {
    box-shadow: none;
    outline: 4px solid $color-focus !important;
    outline-offset: 0;
  }

  &__header {
    border-radius: 0;
    color: $color-white;
    margin: 0;
    padding: 0.75rem 1rem;
  }

  &__timer {
    white-space: nowrap;
  }

  &__title {
    margin: 0;
  }

  &__body {
    padding: 1rem;

    // Removes inherited bottom margin to make whitespace inside panel equal
    > *:last-child,
    strong > *:last-child {
      margin-bottom: 0;
    }

    &.ons-svg-icon-margin--xxxl {
      padding-left: 2.7rem !important;

      @include mq(m) {
        padding-left: 3.5rem !important;
      }
    }
    &.ons-svg-icon-margin--xxl {
      padding-left: 2.45rem !important;

      @include mq(m) {
        padding-left: 2.9rem !important;
      }
    }
    &.ons-svg-icon-margin--xl {
      padding-left: 2.35rem !important;

      @include mq(m) {
        padding-left: 2.55rem !important;
      }
    }
    &.ons-svg-icon-margin--l {
      padding-left: 2.25rem !important;

      @include mq(m) {
        padding-left: 2.35rem !important;
      }
    }
    &.ons-svg-icon-margin--m {
      padding-left: 2.05rem !important;

      @include mq(m) {
        padding-left: 2.2rem !important;
      }
    }
    &.ons-svg-icon-margin--s {
      padding-left: 1.7rem !important;
    }
  }

  &__error {
    color: $color-errors;
  }

  &--warn {
    border: 0 !important;
    margin-bottom: 1rem;
    padding: 0;

    &--footer {
      background-color: $color-grey-15 !important;
      margin-bottom: 0;
      padding: 1rem 0 !important;
    }
  }

  &--warn-branded,
  &--announcement {
    border: 0 !important;
    color: $color-white;
    margin-bottom: 0;
    padding: 1rem 0 !important;
    a {
      color: inherit;
      text-decoration: underline solid $color-white 1px;
    }
    a:hover {
      text-decoration-thickness: 2px;
    }
  }

  &--announcement {
    a:focus {
      box-shadow: 0 -2px #fd0, 0 4px #fd0 !important; // Override focus style because the black border is not visible on a black background
    }
  }

  &--no-title {
    border-left: 8px solid transparent;
    padding: 1rem;
    .ons-panel__body {
      background: none;
      padding: 0;
    }
    &.ons-panel--warn {
      padding: 0;
    }
  }

  &--spacious {
    padding: 1rem;

    @include mq(m) {
      padding: 2rem;
    }
  }

  &--warn &,
  &--warn-branded &,
  &--announcement & {
    &__body {
      font-weight: $font-weight-bold;
      min-height: 2rem; // Height of icon
      padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
    }
    &__icon {
      background: $color-black;
      border-radius: 50%;
      color: $color-white;
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 2rem;
      min-height: 2rem;
      min-width: 2rem;
      text-align: center;
    }
  }

  &--announcement & {
    &__body div > *:last-child {
      margin-bottom: 0;
    }

    &__icon {
      background-color: $color-white;
      color: $color-black;
      display: flex;
      svg {
        margin: auto;
      }
    }
  }

  &--warn-branded & {
    &__icon {
      background-color: $color-white;
      color: $color-branded-tertiary;
    }
  }

  &--success & {
    &__icon {
      left: 0;
      padding-left: 1rem;
      .ons-svg-icon {
        fill: $color-success !important;
        margin-top: -15% !important;
      }
    }
  }

  &__icon + &__body {
    padding-left: 2rem;
  }

  &--bare & {
    &__icon {
      height: 1.3rem;
      width: 1.3rem;
    }
    &__body {
      padding: 0 0 0 1.5rem;
    }
  }

  &--info,
  &--bare,
  &--success,
  &--warn,
  &--warn-branded,
  &--announcement {
    .ons-panel__icon {
      position: absolute;
    }
  }
}

@include panel-type(error, $color-errors, $color-errors-tint);
@include panel-type(success, $color-success, $color-success-tint);
@include panel-type(info, $color-info, $color-info-tint);
@include panel-type(branded, $color-branded, $color-branded-tint);
@include panel-type(warn, $color-white, $color-white);
@include panel-type(warn-branded, $color-branded-tertiary, $color-branded-tertiary);
@include panel-type(announcement, $color-black, $color-black);

Spacious

The spacious variant can be used on all inline variants.

Open this example in a new tab  
<div class="ons-panel ons-panel--info ons-panel--no-title ons-panel--spacious">
  <span class="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>
{% 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>'
    })
}}
Name Type Required Description
body string true The contents of the panel. This can be a string of HTML
title string false The title for the panel. If this is not provided the inline/no title version will be rendered
titleTag string false The html tag to wrap the title text in. Will default to a div (for error summaries this is set to h2)
type string false The type of panel to render. Available options are success, warn, error, branded, warn-branded and announcement
spacious boolean false Will render a more spacious version of the panel if set to true
classes string false Custom classes to add to the panel
id string false Custom id to add to the panel
attributes object false HTML attributes to apply to the panel (for example, data attributes)
iconType string false Set this to the name of the icon you want to be included before the contents of the panel
assistiveTextPrefix string false Overrides the visually hidden accessible default prefix text. Available for the following panels with no title:
  • information and branded (‘Important information: ‘)
  • success (‘Completed: ‘)
  • warn and warn-branded (‘Warning: ‘),
  • error (‘Error: ‘)
iconSize string false Set this to the size of the icon you want can be set to “m”, “l” “xl” to match heading size. Defaults to the size of regular text
iconsPath string false Set this to the path to the icon you want to be included before the contents of the panel
dsExample boolean false Defaulted to true in Design System examples but wont be set when used outside of the Design System. This will stop the page focusing on the panel on load - only for use in DS examples 
{% macro onsPanel(params) %}

    {% if params is defined and params and params.classes is defined and params.classes %}
        {% set classes = ' ' + params.classes %}
    {% endif %}

    {% if params is not defined or params.title is not defined and params.type != "bare" %}
        {% set noTitleClass = ' ons-panel--no-title' %}
    {% endif %}

    {% if params is defined and params and params.type is defined and params.type %}
        {% set typeClass = ' ons-panel--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-panel--info' %}
    {% endif %}

    {% if params is defined and params.type == "warn-branded" %}
        {% set containerClass = 'ons-census-warning' %}
    {% endif %}

    {% if params is defined and params.type == "announcement" %}
        {% set containerClass = 'ons-announcement' %}
    {% endif %}

    {% if params is defined and params and params.spacious is defined and params.spacious %}
        {% set spaciousClass = ' ons-panel--spacious' %}
    {% endif %}

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
        <div class="{{containerClass}}">
            <div class="ons-container">
    {% endif %}

        <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>

            {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
                <span class="ons-panel__icon" aria-hidden="true">!</span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
            {% endif %}

            {% if params is defined and params and params.type == "announcement" %}
                {% from "components/icons/_macro.njk" import onsIcon %}
                <span class="ons-panel__icon" aria-hidden="true">
                    {{
                        onsIcon({
                            "iconType": 'arrow-forward'
                        })
                    }}
                </span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
            {% endif %}

            {% if params is defined and params %}
                {% if params.title is defined and params.title %}
                    {% if params is defined and params and params.type == 'error' %}
                        {% set defaultTitleTag = "h2" %}
                    {% else %}
                        {% set defaultTitleTag = "div" %}
                    {% endif %}
                    {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                    <div class="ons-panel__header">
                        <{{ titleTag }} id="error-summary-title" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                    </div>
                {% else %}
                    {% if params.type is not defined or params.type == "branded" %}
                        <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
                    {% else %}
                        {% if params.type is defined and params.type == "success" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Completed: ") }}</span>
                        {% elif params.type is defined and params.type == "error" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Error: ") }}</span>
                        {% endif %}
                    {% endif %}
                {% endif %}

                {% if params.iconType is defined and params.iconType %}
                    {% from "components/icons/_macro.njk" import onsIcon %}
                    <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                        {{
                            onsIcon({
                                "iconType": params.iconType,
                                "iconSize": params.iconSize
                            })
                        }}
                    </span>
                {% endif %}
            {% endif %}

            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                {{ caller() if caller }}
            </div>
        </div>

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
            </div>
        </div>
    {% endif %}

{% endmacro %}

@mixin panel-type($name, $color, $color-bg) {
  .ons-panel {
    &--#{$name} {
      background: $color-bg;
      border-color: $color;
    }

    &--#{$name} & {
      &__header {
        background: $color;
      }
    }
  }
}

.ons-census-warning {
  background: $color-branded-tertiary;
}

.ons-announcement {
  background-color: $color-black;
}

.ons-panel {
  border-radius: 0;
  position: relative;

  // Removes inherited bottom margin to make whitespace inside panel equal
  > *:last-child {
    margin-bottom: 0;
  }

  .ons-field {
    margin-bottom: 0;
  }

  &:focus {
    box-shadow: none;
    outline: 4px solid $color-focus !important;
    outline-offset: 0;
  }

  &__header {
    border-radius: 0;
    color: $color-white;
    margin: 0;
    padding: 0.75rem 1rem;
  }

  &__timer {
    white-space: nowrap;
  }

  &__title {
    margin: 0;
  }

  &__body {
    padding: 1rem;

    // Removes inherited bottom margin to make whitespace inside panel equal
    > *:last-child,
    strong > *:last-child {
      margin-bottom: 0;
    }

    &.ons-svg-icon-margin--xxxl {
      padding-left: 2.7rem !important;

      @include mq(m) {
        padding-left: 3.5rem !important;
      }
    }
    &.ons-svg-icon-margin--xxl {
      padding-left: 2.45rem !important;

      @include mq(m) {
        padding-left: 2.9rem !important;
      }
    }
    &.ons-svg-icon-margin--xl {
      padding-left: 2.35rem !important;

      @include mq(m) {
        padding-left: 2.55rem !important;
      }
    }
    &.ons-svg-icon-margin--l {
      padding-left: 2.25rem !important;

      @include mq(m) {
        padding-left: 2.35rem !important;
      }
    }
    &.ons-svg-icon-margin--m {
      padding-left: 2.05rem !important;

      @include mq(m) {
        padding-left: 2.2rem !important;
      }
    }
    &.ons-svg-icon-margin--s {
      padding-left: 1.7rem !important;
    }
  }

  &__error {
    color: $color-errors;
  }

  &--warn {
    border: 0 !important;
    margin-bottom: 1rem;
    padding: 0;

    &--footer {
      background-color: $color-grey-15 !important;
      margin-bottom: 0;
      padding: 1rem 0 !important;
    }
  }

  &--warn-branded,
  &--announcement {
    border: 0 !important;
    color: $color-white;
    margin-bottom: 0;
    padding: 1rem 0 !important;
    a {
      color: inherit;
      text-decoration: underline solid $color-white 1px;
    }
    a:hover {
      text-decoration-thickness: 2px;
    }
  }

  &--announcement {
    a:focus {
      box-shadow: 0 -2px #fd0, 0 4px #fd0 !important; // Override focus style because the black border is not visible on a black background
    }
  }

  &--no-title {
    border-left: 8px solid transparent;
    padding: 1rem;
    .ons-panel__body {
      background: none;
      padding: 0;
    }
    &.ons-panel--warn {
      padding: 0;
    }
  }

  &--spacious {
    padding: 1rem;

    @include mq(m) {
      padding: 2rem;
    }
  }

  &--warn &,
  &--warn-branded &,
  &--announcement & {
    &__body {
      font-weight: $font-weight-bold;
      min-height: 2rem; // Height of icon
      padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
    }
    &__icon {
      background: $color-black;
      border-radius: 50%;
      color: $color-white;
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 2rem;
      min-height: 2rem;
      min-width: 2rem;
      text-align: center;
    }
  }

  &--announcement & {
    &__body div > *:last-child {
      margin-bottom: 0;
    }

    &__icon {
      background-color: $color-white;
      color: $color-black;
      display: flex;
      svg {
        margin: auto;
      }
    }
  }

  &--warn-branded & {
    &__icon {
      background-color: $color-white;
      color: $color-branded-tertiary;
    }
  }

  &--success & {
    &__icon {
      left: 0;
      padding-left: 1rem;
      .ons-svg-icon {
        fill: $color-success !important;
        margin-top: -15% !important;
      }
    }
  }

  &__icon + &__body {
    padding-left: 2rem;
  }

  &--bare & {
    &__icon {
      height: 1.3rem;
      width: 1.3rem;
    }
    &__body {
      padding: 0 0 0 1.5rem;
    }
  }

  &--info,
  &--bare,
  &--success,
  &--warn,
  &--warn-branded,
  &--announcement {
    .ons-panel__icon {
      position: absolute;
    }
  }
}

@include panel-type(error, $color-errors, $color-errors-tint);
@include panel-type(success, $color-success, $color-success-tint);
@include panel-type(info, $color-info, $color-info-tint);
@include panel-type(branded, $color-branded, $color-branded-tint);
@include panel-type(warn, $color-white, $color-white);
@include panel-type(warn-branded, $color-branded-tertiary, $color-branded-tertiary);
@include panel-type(announcement, $color-black, $color-black);

Branded - census

Open this example in a new tab  
<div class="ons-panel ons-panel--branded ons-panel--no-title">
  <span class="ons-u-vh">Important information: </span>
  <div class="ons-panel__body">
    This guidance is for the paper questionnaire.<br>View the <a href="#0">question guidance for completing the census online</a>.
  </div>
</div>
{% from "components/panel/_macro.njk" import onsPanel %}

{% call onsPanel({
        "type": 'branded'
    })
%}
    This guidance is for the paper questionnaire.<br>View the <a href="#0">question guidance for completing the census online</a>.
{% endcall %}
Name Type Required Description
body string true The contents of the panel. This can be a string of HTML
title string false The title for the panel. If this is not provided the inline/no title version will be rendered
titleTag string false The html tag to wrap the title text in. Will default to a div (for error summaries this is set to h2)
type string false The type of panel to render. Available options are success, warn, error, branded, warn-branded and announcement
spacious boolean false Will render a more spacious version of the panel if set to true
classes string false Custom classes to add to the panel
id string false Custom id to add to the panel
attributes object false HTML attributes to apply to the panel (for example, data attributes)
iconType string false Set this to the name of the icon you want to be included before the contents of the panel
assistiveTextPrefix string false Overrides the visually hidden accessible default prefix text. Available for the following panels with no title:
  • information and branded (‘Important information: ‘)
  • success (‘Completed: ‘)
  • warn and warn-branded (‘Warning: ‘),
  • error (‘Error: ‘)
iconSize string false Set this to the size of the icon you want can be set to “m”, “l” “xl” to match heading size. Defaults to the size of regular text
iconsPath string false Set this to the path to the icon you want to be included before the contents of the panel
dsExample boolean false Defaulted to true in Design System examples but wont be set when used outside of the Design System. This will stop the page focusing on the panel on load - only for use in DS examples 
{% macro onsPanel(params) %}

    {% if params is defined and params and params.classes is defined and params.classes %}
        {% set classes = ' ' + params.classes %}
    {% endif %}

    {% if params is not defined or params.title is not defined and params.type != "bare" %}
        {% set noTitleClass = ' ons-panel--no-title' %}
    {% endif %}

    {% if params is defined and params and params.type is defined and params.type %}
        {% set typeClass = ' ons-panel--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-panel--info' %}
    {% endif %}

    {% if params is defined and params.type == "warn-branded" %}
        {% set containerClass = 'ons-census-warning' %}
    {% endif %}

    {% if params is defined and params.type == "announcement" %}
        {% set containerClass = 'ons-announcement' %}
    {% endif %}

    {% if params is defined and params and params.spacious is defined and params.spacious %}
        {% set spaciousClass = ' ons-panel--spacious' %}
    {% endif %}

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
        <div class="{{containerClass}}">
            <div class="ons-container">
    {% endif %}

        <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>

            {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
                <span class="ons-panel__icon" aria-hidden="true">!</span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
            {% endif %}

            {% if params is defined and params and params.type == "announcement" %}
                {% from "components/icons/_macro.njk" import onsIcon %}
                <span class="ons-panel__icon" aria-hidden="true">
                    {{
                        onsIcon({
                            "iconType": 'arrow-forward'
                        })
                    }}
                </span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
            {% endif %}

            {% if params is defined and params %}
                {% if params.title is defined and params.title %}
                    {% if params is defined and params and params.type == 'error' %}
                        {% set defaultTitleTag = "h2" %}
                    {% else %}
                        {% set defaultTitleTag = "div" %}
                    {% endif %}
                    {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                    <div class="ons-panel__header">
                        <{{ titleTag }} id="error-summary-title" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                    </div>
                {% else %}
                    {% if params.type is not defined or params.type == "branded" %}
                        <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
                    {% else %}
                        {% if params.type is defined and params.type == "success" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Completed: ") }}</span>
                        {% elif params.type is defined and params.type == "error" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Error: ") }}</span>
                        {% endif %}
                    {% endif %}
                {% endif %}

                {% if params.iconType is defined and params.iconType %}
                    {% from "components/icons/_macro.njk" import onsIcon %}
                    <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                        {{
                            onsIcon({
                                "iconType": params.iconType,
                                "iconSize": params.iconSize
                            })
                        }}
                    </span>
                {% endif %}
            {% endif %}

            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                {{ caller() if caller }}
            </div>
        </div>

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
            </div>
        </div>
    {% endif %}

{% endmacro %}

@mixin panel-type($name, $color, $color-bg) {
  .ons-panel {
    &--#{$name} {
      background: $color-bg;
      border-color: $color;
    }

    &--#{$name} & {
      &__header {
        background: $color;
      }
    }
  }
}

.ons-census-warning {
  background: $color-branded-tertiary;
}

.ons-announcement {
  background-color: $color-black;
}

.ons-panel {
  border-radius: 0;
  position: relative;

  // Removes inherited bottom margin to make whitespace inside panel equal
  > *:last-child {
    margin-bottom: 0;
  }

  .ons-field {
    margin-bottom: 0;
  }

  &:focus {
    box-shadow: none;
    outline: 4px solid $color-focus !important;
    outline-offset: 0;
  }

  &__header {
    border-radius: 0;
    color: $color-white;
    margin: 0;
    padding: 0.75rem 1rem;
  }

  &__timer {
    white-space: nowrap;
  }

  &__title {
    margin: 0;
  }

  &__body {
    padding: 1rem;

    // Removes inherited bottom margin to make whitespace inside panel equal
    > *:last-child,
    strong > *:last-child {
      margin-bottom: 0;
    }

    &.ons-svg-icon-margin--xxxl {
      padding-left: 2.7rem !important;

      @include mq(m) {
        padding-left: 3.5rem !important;
      }
    }
    &.ons-svg-icon-margin--xxl {
      padding-left: 2.45rem !important;

      @include mq(m) {
        padding-left: 2.9rem !important;
      }
    }
    &.ons-svg-icon-margin--xl {
      padding-left: 2.35rem !important;

      @include mq(m) {
        padding-left: 2.55rem !important;
      }
    }
    &.ons-svg-icon-margin--l {
      padding-left: 2.25rem !important;

      @include mq(m) {
        padding-left: 2.35rem !important;
      }
    }
    &.ons-svg-icon-margin--m {
      padding-left: 2.05rem !important;

      @include mq(m) {
        padding-left: 2.2rem !important;
      }
    }
    &.ons-svg-icon-margin--s {
      padding-left: 1.7rem !important;
    }
  }

  &__error {
    color: $color-errors;
  }

  &--warn {
    border: 0 !important;
    margin-bottom: 1rem;
    padding: 0;

    &--footer {
      background-color: $color-grey-15 !important;
      margin-bottom: 0;
      padding: 1rem 0 !important;
    }
  }

  &--warn-branded,
  &--announcement {
    border: 0 !important;
    color: $color-white;
    margin-bottom: 0;
    padding: 1rem 0 !important;
    a {
      color: inherit;
      text-decoration: underline solid $color-white 1px;
    }
    a:hover {
      text-decoration-thickness: 2px;
    }
  }

  &--announcement {
    a:focus {
      box-shadow: 0 -2px #fd0, 0 4px #fd0 !important; // Override focus style because the black border is not visible on a black background
    }
  }

  &--no-title {
    border-left: 8px solid transparent;
    padding: 1rem;
    .ons-panel__body {
      background: none;
      padding: 0;
    }
    &.ons-panel--warn {
      padding: 0;
    }
  }

  &--spacious {
    padding: 1rem;

    @include mq(m) {
      padding: 2rem;
    }
  }

  &--warn &,
  &--warn-branded &,
  &--announcement & {
    &__body {
      font-weight: $font-weight-bold;
      min-height: 2rem; // Height of icon
      padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
    }
    &__icon {
      background: $color-black;
      border-radius: 50%;
      color: $color-white;
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 2rem;
      min-height: 2rem;
      min-width: 2rem;
      text-align: center;
    }
  }

  &--announcement & {
    &__body div > *:last-child {
      margin-bottom: 0;
    }

    &__icon {
      background-color: $color-white;
      color: $color-black;
      display: flex;
      svg {
        margin: auto;
      }
    }
  }

  &--warn-branded & {
    &__icon {
      background-color: $color-white;
      color: $color-branded-tertiary;
    }
  }

  &--success & {
    &__icon {
      left: 0;
      padding-left: 1rem;
      .ons-svg-icon {
        fill: $color-success !important;
        margin-top: -15% !important;
      }
    }
  }

  &__icon + &__body {
    padding-left: 2rem;
  }

  &--bare & {
    &__icon {
      height: 1.3rem;
      width: 1.3rem;
    }
    &__body {
      padding: 0 0 0 1.5rem;
    }
  }

  &--info,
  &--bare,
  &--success,
  &--warn,
  &--warn-branded,
  &--announcement {
    .ons-panel__icon {
      position: absolute;
    }
  }
}

@include panel-type(error, $color-errors, $color-errors-tint);
@include panel-type(success, $color-success, $color-success-tint);
@include panel-type(info, $color-info, $color-info-tint);
@include panel-type(branded, $color-branded, $color-branded-tint);
@include panel-type(warn, $color-white, $color-white);
@include panel-type(warn-branded, $color-branded-tertiary, $color-branded-tertiary);
@include panel-type(announcement, $color-black, $color-black);

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.

Open this example in a new tab  
<div class="ons-panel ons-panel--bare">
  <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>
{% from "components/panel/_macro.njk" import onsPanel %}

{% call onsPanel({
        "type": 'bare',
        "iconType": 'lock'
    })
%}
    Here is some text with an icon
{% endcall %}
Name Type Required Description
body string true The contents of the panel. This can be a string of HTML
title string false The title for the panel. If this is not provided the inline/no title version will be rendered
titleTag string false The html tag to wrap the title text in. Will default to a div (for error summaries this is set to h2)
type string false The type of panel to render. Available options are success, warn, error, branded, warn-branded and announcement
spacious boolean false Will render a more spacious version of the panel if set to true
classes string false Custom classes to add to the panel
id string false Custom id to add to the panel
attributes object false HTML attributes to apply to the panel (for example, data attributes)
iconType string false Set this to the name of the icon you want to be included before the contents of the panel
assistiveTextPrefix string false Overrides the visually hidden accessible default prefix text. Available for the following panels with no title:
  • information and branded (‘Important information: ‘)
  • success (‘Completed: ‘)
  • warn and warn-branded (‘Warning: ‘),
  • error (‘Error: ‘)
iconSize string false Set this to the size of the icon you want can be set to “m”, “l” “xl” to match heading size. Defaults to the size of regular text
iconsPath string false Set this to the path to the icon you want to be included before the contents of the panel
dsExample boolean false Defaulted to true in Design System examples but wont be set when used outside of the Design System. This will stop the page focusing on the panel on load - only for use in DS examples 
{% macro onsPanel(params) %}

    {% if params is defined and params and params.classes is defined and params.classes %}
        {% set classes = ' ' + params.classes %}
    {% endif %}

    {% if params is not defined or params.title is not defined and params.type != "bare" %}
        {% set noTitleClass = ' ons-panel--no-title' %}
    {% endif %}

    {% if params is defined and params and params.type is defined and params.type %}
        {% set typeClass = ' ons-panel--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-panel--info' %}
    {% endif %}

    {% if params is defined and params.type == "warn-branded" %}
        {% set containerClass = 'ons-census-warning' %}
    {% endif %}

    {% if params is defined and params.type == "announcement" %}
        {% set containerClass = 'ons-announcement' %}
    {% endif %}

    {% if params is defined and params and params.spacious is defined and params.spacious %}
        {% set spaciousClass = ' ons-panel--spacious' %}
    {% endif %}

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
        <div class="{{containerClass}}">
            <div class="ons-container">
    {% endif %}

        <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>

            {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
                <span class="ons-panel__icon" aria-hidden="true">!</span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
            {% endif %}

            {% if params is defined and params and params.type == "announcement" %}
                {% from "components/icons/_macro.njk" import onsIcon %}
                <span class="ons-panel__icon" aria-hidden="true">
                    {{
                        onsIcon({
                            "iconType": 'arrow-forward'
                        })
                    }}
                </span>
                <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
            {% endif %}

            {% if params is defined and params %}
                {% if params.title is defined and params.title %}
                    {% if params is defined and params and params.type == 'error' %}
                        {% set defaultTitleTag = "h2" %}
                    {% else %}
                        {% set defaultTitleTag = "div" %}
                    {% endif %}
                    {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                    <div class="ons-panel__header">
                        <{{ titleTag }} id="error-summary-title" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                    </div>
                {% else %}
                    {% if params.type is not defined or params.type == "branded" %}
                        <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
                    {% else %}
                        {% if params.type is defined and params.type == "success" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Completed: ") }}</span>
                        {% elif params.type is defined and params.type == "error" %}
                            <span class="ons-u-vh">{{ params.assistiveTextPrefix | default("Error: ") }}</span>
                        {% endif %}
                    {% endif %}
                {% endif %}

                {% if params.iconType is defined and params.iconType %}
                    {% from "components/icons/_macro.njk" import onsIcon %}
                    <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                        {{
                            onsIcon({
                                "iconType": params.iconType,
                                "iconSize": params.iconSize
                            })
                        }}
                    </span>
                {% endif %}
            {% endif %}

            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                {{ caller() if caller }}
            </div>
        </div>

    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
            </div>
        </div>
    {% endif %}

{% endmacro %}

@mixin panel-type($name, $color, $color-bg) {
  .ons-panel {
    &--#{$name} {
      background: $color-bg;
      border-color: $color;
    }

    &--#{$name} & {
      &__header {
        background: $color;
      }
    }
  }
}

.ons-census-warning {
  background: $color-branded-tertiary;
}

.ons-announcement {
  background-color: $color-black;
}

.ons-panel {
  border-radius: 0;
  position: relative;

  // Removes inherited bottom margin to make whitespace inside panel equal
  > *:last-child {
    margin-bottom: 0;
  }

  .ons-field {
    margin-bottom: 0;
  }

  &:focus {
    box-shadow: none;
    outline: 4px solid $color-focus !important;
    outline-offset: 0;
  }

  &__header {
    border-radius: 0;
    color: $color-white;
    margin: 0;
    padding: 0.75rem 1rem;
  }

  &__timer {
    white-space: nowrap;
  }

  &__title {
    margin: 0;
  }

  &__body {
    padding: 1rem;

    // Removes inherited bottom margin to make whitespace inside panel equal
    > *:last-child,
    strong > *:last-child {
      margin-bottom: 0;
    }

    &.ons-svg-icon-margin--xxxl {
      padding-left: 2.7rem !important;

      @include mq(m) {
        padding-left: 3.5rem !important;
      }
    }
    &.ons-svg-icon-margin--xxl {
      padding-left: 2.45rem !important;

      @include mq(m) {
        padding-left: 2.9rem !important;
      }
    }
    &.ons-svg-icon-margin--xl {
      padding-left: 2.35rem !important;

      @include mq(m) {
        padding-left: 2.55rem !important;
      }
    }
    &.ons-svg-icon-margin--l {
      padding-left: 2.25rem !important;

      @include mq(m) {
        padding-left: 2.35rem !important;
      }
    }
    &.ons-svg-icon-margin--m {
      padding-left: 2.05rem !important;

      @include mq(m) {
        padding-left: 2.2rem !important;
      }
    }
    &.ons-svg-icon-margin--s {
      padding-left: 1.7rem !important;
    }
  }

  &__error {
    color: $color-errors;
  }

  &--warn {
    border: 0 !important;
    margin-bottom: 1rem;
    padding: 0;

    &--footer {
      background-color: $color-grey-15 !important;
      margin-bottom: 0;
      padding: 1rem 0 !important;
    }
  }

  &--warn-branded,
  &--announcement {
    border: 0 !important;
    color: $color-white;
    margin-bottom: 0;
    padding: 1rem 0 !important;
    a {
      color: inherit;
      text-decoration: underline solid $color-white 1px;
    }
    a:hover {
      text-decoration-thickness: 2px;
    }
  }

  &--announcement {
    a:focus {
      box-shadow: 0 -2px #fd0, 0 4px #fd0 !important; // Override focus style because the black border is not visible on a black background
    }
  }

  &--no-title {
    border-left: 8px solid transparent;
    padding: 1rem;
    .ons-panel__body {
      background: none;
      padding: 0;
    }
    &.ons-panel--warn {
      padding: 0;
    }
  }

  &--spacious {
    padding: 1rem;

    @include mq(m) {
      padding: 2rem;
    }
  }

  &--warn &,
  &--warn-branded &,
  &--announcement & {
    &__body {
      font-weight: $font-weight-bold;
      min-height: 2rem; // Height of icon
      padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
    }
    &__icon {
      background: $color-black;
      border-radius: 50%;
      color: $color-white;
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 2rem;
      min-height: 2rem;
      min-width: 2rem;
      text-align: center;
    }
  }

  &--announcement & {
    &__body div > *:last-child {
      margin-bottom: 0;
    }

    &__icon {
      background-color: $color-white;
      color: $color-black;
      display: flex;
      svg {
        margin: auto;
      }
    }
  }

  &--warn-branded & {
    &__icon {
      background-color: $color-white;
      color: $color-branded-tertiary;
    }
  }

  &--success & {
    &__icon {
      left: 0;
      padding-left: 1rem;
      .ons-svg-icon {
        fill: $color-success !important;
        margin-top: -15% !important;
      }
    }
  }

  &__icon + &__body {
    padding-left: 2rem;
  }

  &--bare & {
    &__icon {
      height: 1.3rem;
      width: 1.3rem;
    }
    &__body {
      padding: 0 0 0 1.5rem;
    }
  }

  &--info,
  &--bare,
  &--success,
  &--warn,
  &--warn-branded,
  &--announcement {
    .ons-panel__icon {
      position: absolute;
    }
  }
}

@include panel-type(error, $color-errors, $color-errors-tint);
@include panel-type(success, $color-success, $color-success-tint);
@include panel-type(info, $color-info, $color-info-tint);
@include panel-type(branded, $color-branded, $color-branded-tint);
@include panel-type(warn, $color-white, $color-white);
@include panel-type(warn-branded, $color-branded-tertiary, $color-branded-tertiary);
@include panel-type(announcement, $color-black, $color-black);

Help improve this component

Let us know how we could improve this component or share your user research findings. Discuss the ‘Panel’ component on GitHub 

More in ‘Components’