Skip to main content

Style Icons

An icon can help explain the function of an element, or the direction of a call to action, when it is placed next to the text. For example, a printer icon on a button labelled “Print this page”.

arrow-next
arrow-previous
check
chevron
download
exit
external-link
lock
person
print
search

When to use icons

Use icons in the same way throughout your product to make it easier to use.

Recognisable icons can make scanning a page quicker, as well as making target areas larger and easier to select. They can also help users who have learning difficulties, such as dyslexia.

You can use an icon with a:

How to use icons

Use recognisable icons

Only use icons that are universally understood and have user research evidence to back this up. Recognisable icons help users understand something more quickly. A large familiar icon can be quicker to understand when scanning a page than reading a text label on it’s own.

Warning:
Always test an icon with users to make sure it means the same to everyone

An icon that means different things to different people will make your product harder to use. Always consider if you need to use one at all.

Use a label

Always use an icon with a text label. Using icons on their own means the user has to think more, especially if the icon is not familiar to them.

There are only a few icons that are universally understood and can be used on their own as an exception – when there is not enough space for a label. For example, a magnifying glass icon on a search field.

Place icons before text to show function

Place an icon before the text to help the user understand the function of the element without having to read the text.

For example, the printer icon comes first on the print button so that a user who does not need the text can quickly see that it’s a print button.

<button type="button" class="ons-btn ons-btn--small ons-btn--secondary ons-btn--print ons-u-d-no ons-js-print-btn">
  <span class="ons-btn__inner">
    <svg class="ons-svg-icon ons-u-mr-xs" viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
      <path d="M17 4H3C1.3 4 0 5.2 0 6.8v5.5h4V16h12v-3.7h4V6.8C20 5.2 18.7 4 17 4zm-3 10H6V9h8v5zm3-6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-1-8H4v3h12V0z" />
    </svg>
    Print this page</span>
</button>
{% from "components/button/_macro.njk" import onsButton %}

{{
    onsButton({
        "type": 'button',
        "text": 'Print this page',
        "buttonStyle": 'print',
        "variants": ['small', 'secondary']
    })
}}
Name Type Required Description
text string true If html is set, this is not required. Text for the button. If html is provided, the text argument will be ignored.
html string true If text is set, this is not required. HTML for the button. If html is provided, the text argument will be ignored.
type string true Type of input or buttonbutton, submit or reset. Defaults to submit.
name string true Name for the button, if the button is a link the id attribute will be set instead
value string true Value for the button
url string false If provided will create a link and adds the relevant classes
variants array or string false An array of values or single value (string) to adjust the ‘button’ using available variants - small, secondary, ghost and disabled
id string false ID for the button
classes string false Classes to add to the button component
innerClasses string false Classes to add to the inner button element
attributes object false HTML attributes (for example, data attributes) to add to the button component
listeners object false Creates a script element that adds an event listener to the element by id. Takes key { event } and value { function }
submitType string false If set to timer the button will only be disabled for a short time to stop double clicks from double submitting. If set to loader will create a loader button that includes the loading animation
IconType object or boolean false Object that contains the settings for adding icons to buttons. Optionally provide False as the value to not show an icon for the button.
newWindow boolean false Opens the next page in a new tab. Used for links to external pages
buttonStyle string false Can be set to print, exit or mobile. This will style the button with the relevant classes and icons
buttonContext string false Can be used to add context to a button’s text label for screen readers. For example, the “Hide this” button in the collapsible component requires context to help let a screen reader user know what the button hides.
dsExample boolean false Defaulted to true if set in Design System examples, will render a <a> tag instead of <button> to stop default submit behaviour of buttons in forms - only for use in DS examples

Icon

Name Type Required Description
iconType string true Name of the icon to be used
iconPosition string true Position of the icon in relation to the button text. Either set to before or after
{% from "components/icons/_macro.njk" import onsIcon %}

{% macro onsButton(params) %}

    {# Customisable button icon #}
    {% if params.iconType is defined and params.iconType %}
        {% set iconType = params.iconType %}
        {% if params.iconPosition is defined and params.iconPosition %}
            {% set iconPosition = params.iconPosition %}
        {% else %}
            {# Default icon position before label #}
            {% set iconPosition = "before" %}
        {% endif %}
    {% elif params.iconType is not defined and params.noIcon is not defined %}
        {# Opens in new tab #}
        {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}
            {% set iconType = "external-link" %}
            {% set iconPosition = "after" %}
        {# Download #}
        {% elif params.buttonStyle is defined and params.buttonStyle == "download" %}
            {% set iconType = "download" %}
            {% set iconPosition = "before" %}
        {# Print #}
        {% elif params.buttonStyle is defined and params.buttonStyle == "print" %}
            {% set iconType = "print" %}
            {% set iconPosition = "before" %}
        {# Loader #}
        {% elif params.submitType is defined and params.submitType == "loader" %}
            {% set iconType = "loader" %}
            {% set iconPosition = "after" %}
        {# CTA or mobile menu toggle #}
        {% elif params.url is defined and params.url or params.buttonStyle is defined and params.buttonStyle == "mobile" %}
            {% set iconType = "chevron" %}
            {% set iconPosition = "after" %}
        {% endif %}
    {% endif %}

    {% set tag = "a" if params.url or params.dsExample is defined and params.dsExample else "button" %}

    <{{ tag }}
        {% if params.url is defined and params.url %}
            href="{{ params.url }}"
            role="button"
        {% else %}
            type="{{ params.type if params.type is defined and params.type else ('button' if params.buttonStyle == "print" else 'submit') }}"
        {% endif %}
        class="ons-btn{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-btn--{{ variant }}{% endfor %}{% else %} ons-btn--{{ params.variants }}{% endif %}{% endif %}{% if params.url is defined and params.url %} ons-btn--link ons-js-submit-btn{% endif %}{% if params.buttonStyle == "download" %} ons-btn--download{% endif %}{% if params.buttonStyle == "print" %} ons-btn--print ons-u-d-no ons-js-print-btn{% endif %}{% if params.submitType == "loader" %} ons-btn--loader ons-js-loader ons-js-submit-btn{% endif %}{% if params.submitType == "timer" %} ons-js-timer ons-js-submit-btn{% endif %}"
        {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
        {% if params.value is defined and params.value %}value="{{ params.value }}"{% endif %}
        {% if params.name is defined and params.name and tag != "a" %}name="{{ params.name }}"{% elif params.name is defined and params.name and tag == "a" %}id="{{ params.name }}"{% endif %}
        {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}target="_blank" rel="noopener"{% endif %}
        {% if params.buttonStyle == "download" %} download{% endif %}
        {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
        >
        <span class="ons-btn__inner{% if params.innerClasses is defined and params.innerClasses %} {{ params.innerClasses }}{% endif %}">
            {%- if iconPosition == "before" or iconPosition == "after" %}
                {%- if iconPosition == "before" %}
                    {{
                        onsIcon({
                            "iconType": iconType,
                            "classes": 'ons-u-mr-xs'
                        })
                    }}
                {% endif -%}
                {{- params.html | safe if params.html is defined and params.html else params.text -}}
                {%- if iconPosition == "after" %}
                {{
                    onsIcon({
                        "iconType": iconType,
                        "classes": 'ons-u-ml-xs'
                    })
                }}
                {% endif -%}
            {% elif iconPosition == "only" -%}
                {{
                    onsIcon({
                        "iconType": iconType
                    })
                }}
                <span class="ons-u-vh@xxs@s">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
            {% else -%}
                {{- params.html | safe if params.html is defined and params.html else params.text -}}
            {% endif -%}
        </span>
        {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}
            <span class="ons-btn__new-window-description ons-u-vh">{{ params.newWindowDescription | default("opens in a new window") }}</span>
        {% endif %}
        {% if params.buttonContext is defined and params.buttonContext %}
            <span class="ons-btn__context ons-u-vh">{{ params.buttonContext }}</span>
        {% endif %}
        {% if params.listeners %}
            <script{% if csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>
                {% for listener, value in (params.listeners.items() if params.listeners is mapping and params.listeners.items else params.listeners) %}
                    document.getElementById("{{ params.id }}").addEventListener('{{ listener }}', function(){ {{ value }} });
                {% endfor %}
            </script>
        {% endif %}
    </{{ tag }}>
{% endmacro %}
$button-shadow-size: 3px;

.ons-btn {
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: $font-weight-bold;
  line-height: 1.35;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  vertical-align: top;
  white-space: nowrap;

  // Transparent border for IE11 High Contrast mode support due to 'border: 0' on buttons
  &::after {
    border: ems($button-shadow-size) solid transparent;
    bottom: -(ems($button-shadow-size)); // makes sure button shadow is selectable
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  .ons-svg-icon {
    height: 18px;
    margin-top: -$button-shadow-size;
    vertical-align: middle;
    width: 18px;
  }

  &--search {
    .ons-svg-icon {
      @include mq(s, m) {
        margin-right: 0.5rem;
      }
    }
  }

  &__inner {
    background: $color-button;
    border-radius: $input-radius;
    box-shadow: 0 ems($button-shadow-size) 0 darken($color-button, 15%);
    color: $color-text-inverse;
    display: inherit;
    padding: 0.7em 1em 0.8em;
    // Required for Google Tag Manager
    pointer-events: none;
    position: relative;
  }

  // When preceded by another button (for example, in a group)
  & + & {
    margin-left: 0.5rem;
  }

  // When focussed
  &:focus & {
    outline: 3px solid transparent;
  }

  &:focus &__inner {
    background: $color-focus;
    box-shadow: 0 ems($button-shadow-size) 0 $color-text-link-focus;
    color: $color-text-link-focus;
  }

  &:focus:hover:not(:active) &__inner {
    background: darken($color-focus, 5%);
  }

  // When down
  &:active &,
  &:active:focus & {
    &__inner {
      background: $color-button;
      box-shadow: none;
      color: $color-text-inverse;
    }
  }

  &:active {
    top: ems($button-shadow-size);
  }

  &:focus,
  &:focus:hover {
    outline: none;
  }

  // Small buttons
  &--small,
  &--mobile {
    font-size: 0.9rem;
  }

  &--small & {
    &__inner {
      padding: 0.5em 0.7em;
      .ons-svg-icon {
        height: 16px;
        width: 16px;
      }
    }
  }

  &--small.ons-btn--ghost &,
  &--mobile & {
    &__inner {
      padding: 0.5em 0.7em;
    }
  }

  // Secondary button style
  &--secondary & {
    &__inner {
      box-shadow: 0 ems($button-shadow-size) 0 darken($color-button-secondary, 50%);
    }
  }

  &--secondary &,
  &--secondary:active &,
  &--secondary:active:focus & {
    &__inner {
      background: $color-button-secondary;
      color: $color-text;
      font-weight: normal;

      .ons-svg-icon {
        fill: $color-text;
      }
    }
  }

  // When hovered
  &:hover & {
    &__inner {
      background: darken($color-button, 5%);
    }
  }

  &--secondary:hover & {
    &__inner {
      background: darken($color-button-secondary, 5%);
    }
  }

  // Link button when hovered
  &--link:hover {
    text-decoration: none;
  }

  &--link:not(&--secondary) &,
  &--link:active:not(&--secondary) &,
  &--link:hover:not(&--secondary) & {
    &__inner {
      .ons-svg-icon {
        fill: $color-text-inverse;
      }
    }
  }

  &--link:focus:not(:active):not(&--secondary) &,
  &--link:focus:hover:not(:active):not(&--secondary) & {
    &__inner {
      .ons-svg-icon {
        fill: $color-text;
      }
    }
  }

  &--loader &__inner {
    position: relative;
    transition: color 0.3s ease-in-out;
    .ons-svg-icon {
      height: 27px;
      left: 50%;
      margin: 0;
      opacity: 0;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: opacity 0.3s ease-in-out;
      width: 27px;
    }
  }

  &--loader.ons-btn--small {
    .ons-svg-icon {
      height: 24px;
      width: 24px;
    }
  }

  &--loader.ons-is-loading &__inner {
    color: transparent;
    .ons-svg-icon {
      fill: $color-white;
      margin-left: 0 !important;
      opacity: 1;
    }
  }

  &--ghost &,
  &--mobile & {
    &__inner {
      background: transparent;
      border: 2px solid rgba(255, 255, 255, 0.6);
      box-shadow: none;
      color: $color-text-inverse;
      .ons-svg-icon {
        fill: $color-text-inverse;
      }
    }
  }

  &--ghost-dark & {
    @extend .ons-btn--secondary;
    &__inner {
      background: transparent;
      border: 2px solid rgba(0, 0, 0, 0.6);
      color: $color-text;
    }
  }

  &--ghost,
  &--mobile {
    &:active,
    .active {
      top: 0;
    }
  }

  &--ghost:active:focus {
    box-shadow: none;
    outline: 3px solid transparent;
  }

  &--ghost:focus:hover,
  &--mobile:focus:hover {
    outline: none;
  }

  &--ghost:hover &,
  &--mobile:hover & {
    &__inner {
      background: rgba(0, 0, 0, 0.1);
      border-color: $color-white;
    }
  }

  &--ghost:active &,
  &--mobile:active &,
  &--ghost:active:focus &,
  &--mobile:active:focus &,
  &--ghost.active &,
  &--mobile.active & {
    &__inner {
      background: rgba(0, 0, 0, 0.2);
      border-color: rgba(255, 255, 255, 0.6);
      color: $color-text-inverse;
      .ons-svg-icon {
        fill: $color-text-inverse;
      }
    }
  }

  &--ghost.active:focus &,
  &--mobile.active:focus & {
    &__inner {
      background: $color-focus;
      color: $color-text-link-focus;
      .ons-svg-icon {
        fill: $color-text-link-focus;
      }
    }
  }

  &--ghost:focus &,
  &--mobile:focus & {
    &__inner {
      box-shadow: none;
      .ons-svg-icon {
        fill: $color-black;
      }
    }
  }

  &--mobile[aria-expanded='true'] {
    .ons-svg-icon {
      transform: rotate(270deg);
    }
  }

  &--mobile {
    .ons-svg-icon {
      transform: rotate(90deg);
    }

    @include mq(m) {
      display: none;
    }
  }

  // Disabled buttons
  &--disabled {
    &:hover {
      cursor: not-allowed;
    }
    .ons-btn__inner {
      opacity: 0.4;
    }
  }
}

Use navigation icons to show direction

A directional icon should be placed before or after a button label or link to help the user understand the direction they will go if they select it.

Use forward navigation icons after the text and backward navigation icons before the text.

For example, the chevron icon on the call to action button shows the button will move the user forward to the next page.

<a href="#0" role="button" class="ons-btn ons-btn--link ons-js-submit-btn">
  <span class="ons-btn__inner">Get started
    <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
      <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
    </svg>
  </span>
</a>
{% from "components/button/_macro.njk" import onsButton %}
{{
    onsButton({
        "type": 'button',
        "text": 'Get started',
        "url": '#0'
    })
}}
Name Type Required Description
text string true If html is set, this is not required. Text for the button. If html is provided, the text argument will be ignored.
html string true If text is set, this is not required. HTML for the button. If html is provided, the text argument will be ignored.
type string true Type of input or buttonbutton, submit or reset. Defaults to submit.
name string true Name for the button, if the button is a link the id attribute will be set instead
value string true Value for the button
url string false If provided will create a link and adds the relevant classes
variants array or string false An array of values or single value (string) to adjust the ‘button’ using available variants - small, secondary, ghost and disabled
id string false ID for the button
classes string false Classes to add to the button component
innerClasses string false Classes to add to the inner button element
attributes object false HTML attributes (for example, data attributes) to add to the button component
listeners object false Creates a script element that adds an event listener to the element by id. Takes key { event } and value { function }
submitType string false If set to timer the button will only be disabled for a short time to stop double clicks from double submitting. If set to loader will create a loader button that includes the loading animation
IconType object or boolean false Object that contains the settings for adding icons to buttons. Optionally provide False as the value to not show an icon for the button.
newWindow boolean false Opens the next page in a new tab. Used for links to external pages
buttonStyle string false Can be set to print, exit or mobile. This will style the button with the relevant classes and icons
buttonContext string false Can be used to add context to a button’s text label for screen readers. For example, the “Hide this” button in the collapsible component requires context to help let a screen reader user know what the button hides.
dsExample boolean false Defaulted to true if set in Design System examples, will render a <a> tag instead of <button> to stop default submit behaviour of buttons in forms - only for use in DS examples

Icon

Name Type Required Description
iconType string true Name of the icon to be used
iconPosition string true Position of the icon in relation to the button text. Either set to before or after
{% from "components/icons/_macro.njk" import onsIcon %}

{% macro onsButton(params) %}

    {# Customisable button icon #}
    {% if params.iconType is defined and params.iconType %}
        {% set iconType = params.iconType %}
        {% if params.iconPosition is defined and params.iconPosition %}
            {% set iconPosition = params.iconPosition %}
        {% else %}
            {# Default icon position before label #}
            {% set iconPosition = "before" %}
        {% endif %}
    {% elif params.iconType is not defined and params.noIcon is not defined %}
        {# Opens in new tab #}
        {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}
            {% set iconType = "external-link" %}
            {% set iconPosition = "after" %}
        {# Download #}
        {% elif params.buttonStyle is defined and params.buttonStyle == "download" %}
            {% set iconType = "download" %}
            {% set iconPosition = "before" %}
        {# Print #}
        {% elif params.buttonStyle is defined and params.buttonStyle == "print" %}
            {% set iconType = "print" %}
            {% set iconPosition = "before" %}
        {# Loader #}
        {% elif params.submitType is defined and params.submitType == "loader" %}
            {% set iconType = "loader" %}
            {% set iconPosition = "after" %}
        {# CTA or mobile menu toggle #}
        {% elif params.url is defined and params.url or params.buttonStyle is defined and params.buttonStyle == "mobile" %}
            {% set iconType = "chevron" %}
            {% set iconPosition = "after" %}
        {% endif %}
    {% endif %}

    {% set tag = "a" if params.url or params.dsExample is defined and params.dsExample else "button" %}

    <{{ tag }}
        {% if params.url is defined and params.url %}
            href="{{ params.url }}"
            role="button"
        {% else %}
            type="{{ params.type if params.type is defined and params.type else ('button' if params.buttonStyle == "print" else 'submit') }}"
        {% endif %}
        class="ons-btn{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-btn--{{ variant }}{% endfor %}{% else %} ons-btn--{{ params.variants }}{% endif %}{% endif %}{% if params.url is defined and params.url %} ons-btn--link ons-js-submit-btn{% endif %}{% if params.buttonStyle == "download" %} ons-btn--download{% endif %}{% if params.buttonStyle == "print" %} ons-btn--print ons-u-d-no ons-js-print-btn{% endif %}{% if params.submitType == "loader" %} ons-btn--loader ons-js-loader ons-js-submit-btn{% endif %}{% if params.submitType == "timer" %} ons-js-timer ons-js-submit-btn{% endif %}"
        {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
        {% if params.value is defined and params.value %}value="{{ params.value }}"{% endif %}
        {% if params.name is defined and params.name and tag != "a" %}name="{{ params.name }}"{% elif params.name is defined and params.name and tag == "a" %}id="{{ params.name }}"{% endif %}
        {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}target="_blank" rel="noopener"{% endif %}
        {% if params.buttonStyle == "download" %} download{% endif %}
        {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
        >
        <span class="ons-btn__inner{% if params.innerClasses is defined and params.innerClasses %} {{ params.innerClasses }}{% endif %}">
            {%- if iconPosition == "before" or iconPosition == "after" %}
                {%- if iconPosition == "before" %}
                    {{
                        onsIcon({
                            "iconType": iconType,
                            "classes": 'ons-u-mr-xs'
                        })
                    }}
                {% endif -%}
                {{- params.html | safe if params.html is defined and params.html else params.text -}}
                {%- if iconPosition == "after" %}
                {{
                    onsIcon({
                        "iconType": iconType,
                        "classes": 'ons-u-ml-xs'
                    })
                }}
                {% endif -%}
            {% elif iconPosition == "only" -%}
                {{
                    onsIcon({
                        "iconType": iconType
                    })
                }}
                <span class="ons-u-vh@xxs@s">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
            {% else -%}
                {{- params.html | safe if params.html is defined and params.html else params.text -}}
            {% endif -%}
        </span>
        {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}
            <span class="ons-btn__new-window-description ons-u-vh">{{ params.newWindowDescription | default("opens in a new window") }}</span>
        {% endif %}
        {% if params.buttonContext is defined and params.buttonContext %}
            <span class="ons-btn__context ons-u-vh">{{ params.buttonContext }}</span>
        {% endif %}
        {% if params.listeners %}
            <script{% if csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>
                {% for listener, value in (params.listeners.items() if params.listeners is mapping and params.listeners.items else params.listeners) %}
                    document.getElementById("{{ params.id }}").addEventListener('{{ listener }}', function(){ {{ value }} });
                {% endfor %}
            </script>
        {% endif %}
    </{{ tag }}>
{% endmacro %}
$button-shadow-size: 3px;

.ons-btn {
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: $font-weight-bold;
  line-height: 1.35;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  vertical-align: top;
  white-space: nowrap;

  // Transparent border for IE11 High Contrast mode support due to 'border: 0' on buttons
  &::after {
    border: ems($button-shadow-size) solid transparent;
    bottom: -(ems($button-shadow-size)); // makes sure button shadow is selectable
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  .ons-svg-icon {
    height: 18px;
    margin-top: -$button-shadow-size;
    vertical-align: middle;
    width: 18px;
  }

  &--search {
    .ons-svg-icon {
      @include mq(s, m) {
        margin-right: 0.5rem;
      }
    }
  }

  &__inner {
    background: $color-button;
    border-radius: $input-radius;
    box-shadow: 0 ems($button-shadow-size) 0 darken($color-button, 15%);
    color: $color-text-inverse;
    display: inherit;
    padding: 0.7em 1em 0.8em;
    // Required for Google Tag Manager
    pointer-events: none;
    position: relative;
  }

  // When preceded by another button (for example, in a group)
  & + & {
    margin-left: 0.5rem;
  }

  // When focussed
  &:focus & {
    outline: 3px solid transparent;
  }

  &:focus &__inner {
    background: $color-focus;
    box-shadow: 0 ems($button-shadow-size) 0 $color-text-link-focus;
    color: $color-text-link-focus;
  }

  &:focus:hover:not(:active) &__inner {
    background: darken($color-focus, 5%);
  }

  // When down
  &:active &,
  &:active:focus & {
    &__inner {
      background: $color-button;
      box-shadow: none;
      color: $color-text-inverse;
    }
  }

  &:active {
    top: ems($button-shadow-size);
  }

  &:focus,
  &:focus:hover {
    outline: none;
  }

  // Small buttons
  &--small,
  &--mobile {
    font-size: 0.9rem;
  }

  &--small & {
    &__inner {
      padding: 0.5em 0.7em;
      .ons-svg-icon {
        height: 16px;
        width: 16px;
      }
    }
  }

  &--small.ons-btn--ghost &,
  &--mobile & {
    &__inner {
      padding: 0.5em 0.7em;
    }
  }

  // Secondary button style
  &--secondary & {
    &__inner {
      box-shadow: 0 ems($button-shadow-size) 0 darken($color-button-secondary, 50%);
    }
  }

  &--secondary &,
  &--secondary:active &,
  &--secondary:active:focus & {
    &__inner {
      background: $color-button-secondary;
      color: $color-text;
      font-weight: normal;

      .ons-svg-icon {
        fill: $color-text;
      }
    }
  }

  // When hovered
  &:hover & {
    &__inner {
      background: darken($color-button, 5%);
    }
  }

  &--secondary:hover & {
    &__inner {
      background: darken($color-button-secondary, 5%);
    }
  }

  // Link button when hovered
  &--link:hover {
    text-decoration: none;
  }

  &--link:not(&--secondary) &,
  &--link:active:not(&--secondary) &,
  &--link:hover:not(&--secondary) & {
    &__inner {
      .ons-svg-icon {
        fill: $color-text-inverse;
      }
    }
  }

  &--link:focus:not(:active):not(&--secondary) &,
  &--link:focus:hover:not(:active):not(&--secondary) & {
    &__inner {
      .ons-svg-icon {
        fill: $color-text;
      }
    }
  }

  &--loader &__inner {
    position: relative;
    transition: color 0.3s ease-in-out;
    .ons-svg-icon {
      height: 27px;
      left: 50%;
      margin: 0;
      opacity: 0;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: opacity 0.3s ease-in-out;
      width: 27px;
    }
  }

  &--loader.ons-btn--small {
    .ons-svg-icon {
      height: 24px;
      width: 24px;
    }
  }

  &--loader.ons-is-loading &__inner {
    color: transparent;
    .ons-svg-icon {
      fill: $color-white;
      margin-left: 0 !important;
      opacity: 1;
    }
  }

  &--ghost &,
  &--mobile & {
    &__inner {
      background: transparent;
      border: 2px solid rgba(255, 255, 255, 0.6);
      box-shadow: none;
      color: $color-text-inverse;
      .ons-svg-icon {
        fill: $color-text-inverse;
      }
    }
  }

  &--ghost-dark & {
    @extend .ons-btn--secondary;
    &__inner {
      background: transparent;
      border: 2px solid rgba(0, 0, 0, 0.6);
      color: $color-text;
    }
  }

  &--ghost,
  &--mobile {
    &:active,
    .active {
      top: 0;
    }
  }

  &--ghost:active:focus {
    box-shadow: none;
    outline: 3px solid transparent;
  }

  &--ghost:focus:hover,
  &--mobile:focus:hover {
    outline: none;
  }

  &--ghost:hover &,
  &--mobile:hover & {
    &__inner {
      background: rgba(0, 0, 0, 0.1);
      border-color: $color-white;
    }
  }

  &--ghost:active &,
  &--mobile:active &,
  &--ghost:active:focus &,
  &--mobile:active:focus &,
  &--ghost.active &,
  &--mobile.active & {
    &__inner {
      background: rgba(0, 0, 0, 0.2);
      border-color: rgba(255, 255, 255, 0.6);
      color: $color-text-inverse;
      .ons-svg-icon {
        fill: $color-text-inverse;
      }
    }
  }

  &--ghost.active:focus &,
  &--mobile.active:focus & {
    &__inner {
      background: $color-focus;
      color: $color-text-link-focus;
      .ons-svg-icon {
        fill: $color-text-link-focus;
      }
    }
  }

  &--ghost:focus &,
  &--mobile:focus & {
    &__inner {
      box-shadow: none;
      .ons-svg-icon {
        fill: $color-black;
      }
    }
  }

  &--mobile[aria-expanded='true'] {
    .ons-svg-icon {
      transform: rotate(270deg);
    }
  }

  &--mobile {
    .ons-svg-icon {
      transform: rotate(90deg);
    }

    @include mq(m) {
      display: none;
    }
  }

  // Disabled buttons
  &--disabled {
    &:hover {
      cursor: not-allowed;
    }
    .ons-btn__inner {
      opacity: 0.4;
    }
  }
}

The chevron icon on the back link shows the link will move the user back to the previous page.

<nav class="ons-breadcrumb" aria-label="Back">
  <ol class="ons-breadcrumb__items ons-u-fs-s">
    <li class="ons-breadcrumb__item" id="breadcrumb-1">
      <a class="ons-breadcrumb__link" href="/" id="back" data-attribute="Example attribute">Back</a>
      <svg class="ons-svg-icon " viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
        <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
      </svg>
    </li>
  </ol>
</nav>
{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}

{{
    onsBreadcrumbs({
        "ariaLabel": 'Back',
        "itemsList": [
            {
                "url": '/',
                "id": "back",
                "text": 'Back',
                "attributes": {
                    "data-attribute": "Example attribute"
                }
            }
        ]
    })
}}
Name Type Required Description
classes string false Custom classes to add to the breadcrumbs
ariaLabel string false The label added to the nav element. Defaults to Breadcrumbs
id string false The ID added to the nav element
itemsList Array true An array of items to show in the breadcrumbs list
Name Type Required Description
itemClasses string false Custom classes to add to the breadcrumbs list item
linkClasses string false Custom classes to add to the breadcrumb link
url string true The url for the link
text string true The name of the page
attributes object false HTML attributes (for example, data attributes) to add to the breadcrumb element
id string false The ID added to the breadcrumb
{% from "components/icons/_macro.njk" import onsIcon %}

{% macro onsBreadcrumbs(params) %}
    <nav class="ons-breadcrumb{{ ' ' + params.classes if params.classes else '' }}" aria-label="{{ params.ariaLabel | default("Breadcrumbs") }}" {% if params.id is defined and params.id %} id="{{ params.id }}"{% endif %}>
        <ol class="ons-breadcrumb__items ons-u-fs-s">
            {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
                <li class="ons-breadcrumb__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
                    <a class="ons-breadcrumb__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href="{{ item.url }}"{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
                    {% if item.attributes is defined and item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                    >{{ item.text }}</a>
                    {{
                        onsIcon({
                            "iconType": "chevron"
                        })
                    }}
                </li>
            {% endfor %}
        </ol>
    </nav>
{% endmacro %}
$breadcrumb-chevron-height: 0.65rem;

.ons-breadcrumb {
  align-items: center;
  display: flex;
  padding: 1rem 0;

  &__items {
    margin: 0;
    padding: 0;
  }

  &__item {
    display: inline-block;
    margin: 0;
    white-space: nowrap; // Stop items from wrapping, break on chevron only

    &:not(:nth-last-child(1)) {
      //small screen not last child
      display: none;
    }

    .ons-svg-icon {
      height: $breadcrumb-chevron-height;
      margin: 0 0.2rem;
      vertical-align: middle;
      width: $breadcrumb-chevron-height;
    }

    &:nth-last-child(1) {
      // small screen last child
      direction: rtl;
      .ons-svg-icon {
        margin-left: -0.13rem;
        transform: rotate(180deg);
      }
    }

    @include mq(s) {
      //big screen
      &:not(:nth-last-child(1)) {
        //not last child
        display: inline-block;
      }

      &:nth-last-child(1) {
        // last child
        direction: ltr;
        .ons-svg-icon {
          display: none;
        }
      }

      &:first-child:nth-last-child(1) {
        //first and last child
        direction: rtl;
        .ons-svg-icon {
          display: inline-block;
          vertical-align: middle;
        }
      }

      &:not(:last-child).ons-svg-icon {
        //not last child
        margin: 0;

        /* stylelint-disable */
        // We have to override the icon settings so it renders correctly in ie11
        background-position: center center;
        vertical-align: middle;
        /* stylelint-enable */
      }
    }
  }

  &__link {
    color: $color-text;
    text-decoration: underline;

    &:hover {
      color: $color-text;
    }
  }
}

Icon type

To set the type of icon, use the parameter iconType with the name of the icon.

Icon position

You can set an icon’s position to before or after the text on a button or list. Use the parameter iconPosition and give it a value of either “before” or ”after”.

Icon size

You can change the size of an icon on a list or panel – from the default size of regular text – to match the size of the text as detailed in the typography type scale.

Use the parameter iconSize and give it a value of either: “s”, “m”, “l”, “xl”, “xxl” or “xxxl”.

<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-xxxl">
    <svg class="ons-svg-icon ons-svg-icon--xxxl " 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 ons-svg-icon-margin--xxxl">
    <h1 class="ons-u-fs-xxxl">ons-u-fs-xxxl</h1>
  </div>
</div>
<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-xxl">
    <svg class="ons-svg-icon ons-svg-icon--xxl " 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 ons-svg-icon-margin--xxl">
    <h1 class="ons-u-fs-xxl">ons-u-fs-xxl</h1>
  </div>
</div>
<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-xl">
    <svg class="ons-svg-icon ons-svg-icon--xl " 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 ons-svg-icon-margin--xl">
    <h1 class="ons-u-fs-xl">ons-u-fs-xl</h1>
  </div>
</div>
<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-l">
    <svg class="ons-svg-icon ons-svg-icon--l " 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 ons-svg-icon-margin--l">
    <h2 class="ons-u-fs-l">ons-u-fs-l</h2>
  </div>
</div>
<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-m">
    <svg class="ons-svg-icon ons-svg-icon--m " 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 ons-svg-icon-margin--m">
    <h3 class="ons-u-fs-m">ons-u-fs-m</h3>
  </div>
</div>
<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">
    <p>ons-u-fs-r</p>
  </div>
</div>
<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-s">
    <svg class="ons-svg-icon ons-svg-icon--s " 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 ons-svg-icon-margin--s">
    <p class="ons-u-fs-s">ons-u-fs-s</p>
  </div>
</div>
{% from "components/panel/_macro.njk" import onsPanel %}

{{
    onsPanel({
        "type": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "iconSize": 'xxxl',
        "body": '<h1 class="ons-u-fs-xxxl">ons-u-fs-xxxl</h1>'
    })
}}
{{
    onsPanel({
        "type": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "iconSize": 'xxl',
        "body": '<h1 class="ons-u-fs-xxl">ons-u-fs-xxl</h1>'
    })
}}
{{
    onsPanel({
        "type": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "iconSize": 'xl',
        "body": '<h1 class="ons-u-fs-xl">ons-u-fs-xl</h1>'
    })
}}
{{
    onsPanel({
        "type": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "iconSize": 'l',
        "body": '<h2 class="ons-u-fs-l">ons-u-fs-l</h2>'
    })
}}
{{
    onsPanel({
        "type": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "iconSize": 'm',
        "body": '<h3 class="ons-u-fs-m">ons-u-fs-m</h3>'
    })
}}
{{
    onsPanel({
        "type": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "body": '<p>ons-u-fs-r</p>'
    })
}}
{{
    onsPanel({
        "type": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "iconSize": 's',
        "body": '<p class="ons-u-fs-s">ons-u-fs-s</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 h1)
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 %}" {% 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 %}>{{ (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;
  }

  &__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;
      }
    }
    &__body {
      padding-left: 2rem;
    }
  }

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

  &--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 foundation

Let us know how we could improve this foundation or share your user research findings. Discuss the ‘Icons’ foundation on Github 

More in ‘Foundations’

Layout

Style