This component is a candidate component and before being reused it needs to be agreed by the design team.

Notification

Use to communicate an alert or a status change to the user without overtaking the page or disrupting the user from performing actions on the page.

Description

N.B. This is a candidate component and will soon be replaced by the Notice component, once all of the variants have been created for the Notice. As this candidate component will soon be deprecated, please use the Notice component instead, where possible. It should clearly and succinctly convey the main message, and if applicable, guide the user on the consequence or the best action the user can take next.

Notification bars are not “sticky”, so as the user scrolls down, it may disappear out of view. Both static and animated bars will load with the page, so they should show immediately once the page is loaded.

Notification bars always live at the top of the page, right under the navigation bar. They can either be:

  • a static bar that stays on the page until a condition/status has changed, or
  • a temporary animated bar that shows for 10 seconds, and then slides up to disappear. Add a [data-js-notification-collapse] on the block element to make the notification collapsable.


Status variations (see subcategories for usage examples and descriptions):

  • Success
  • Error/failure
  • Attention
  • Information
To avoid “alert fatigue” (where user starts ignoring alerts and notifications because they see it frequently), please only use a notification bar when it requires user’s attention or action on something.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-notification;

Subcategories

Usage

Usage example

No new investments will be made

Earning potential is reduced as you are not investing your available funds.

A connection error has occured

Due to a connection error, your transaction did not go through. Please try again.

Nice, you’re now investing your available funds.

You have successfully changed your portfolio setting to Conservative.

System maintenance scheduled for this Friday

You may experience limited access to your account during those hours.

Code example

<!-- DEFAULT -->
<div class="notification notification--attention u-mb-medium">
  <div class="notification__content">
    <div class="notification__icon">
      <svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g transform="translate(3.000000, 8.000000)" fill="#424554">
              <path d="M22,0.0826388889 L0.044,34.9173611 L43.9555111,34.9173611 L22,0.0826388889 L22,0.0826388889 Z M21.9946222,5.00888889 L38.7190222,32.4221528 L5.27071111,32.4221528 L21.9946222,5.00888889 L21.9946222,5.00888889 Z"></path>
              <path d="M21.9990222,24.3857639 C20.6511556,24.3857639 19.5550667,25.475625 19.5550667,26.8163194 C19.5550667,28.1570139 20.6511556,29.246875 21.9990222,29.246875 C23.3473778,29.246875 24.4439556,28.1570139 24.4439556,26.8163194 C24.4439556,25.475625 23.3473778,24.3857639 21.9990222,24.3857639 L21.9990222,24.3857639 Z"></path>
              <polygon points="20.0439558 12.6097216 20.0439558 22.7213191 23.9272002 22.7213191 23.9272002 12.6097216"></polygon>
            </g>
          </g>
      </svg>
    </div>
    <div>
      <h2 class="notification__title">No new investments will be made</h2>
      <p class="notification__copy">Earning potential is reduced as you are not investing your available funds.</p>
    </div>
  </div>
</div>


<!-- DEFAULT -->
<div class="notification notification--error u-mb-medium">
  <div class="notification__content">
    <div class="notification__icon">
      <svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g transform="translate(3.000000, 8.000000)" fill="#ffffff">
              <path d="M22,0.0826388889 L0.044,34.9173611 L43.9555111,34.9173611 L22,0.0826388889 L22,0.0826388889 Z M21.9946222,5.00888889 L38.7190222,32.4221528 L5.27071111,32.4221528 L21.9946222,5.00888889 L21.9946222,5.00888889 Z"></path>
              <path d="M21.9990222,24.3857639 C20.6511556,24.3857639 19.5550667,25.475625 19.5550667,26.8163194 C19.5550667,28.1570139 20.6511556,29.246875 21.9990222,29.246875 C23.3473778,29.246875 24.4439556,28.1570139 24.4439556,26.8163194 C24.4439556,25.475625 23.3473778,24.3857639 21.9990222,24.3857639 L21.9990222,24.3857639 Z"></path>
              <polygon points="20.0439558 12.6097216 20.0439558 22.7213191 23.9272002 22.7213191 23.9272002 12.6097216"></polygon>
            </g>
          </g>
      </svg>
    </div>
    <div>
      <h2 class="notification__title">A connection error has occured</h2>
      <p class="notification__copy">Due to a connection error, your transaction did not go through. Please try again.</p>
    </div>
  </div>
</div>


<!-- DEFAULT -->
<div class="notification notification--success u-mb-medium">
  <div class="notification__content">
    <div class="notification__icon">
      <svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <polygon fill="#FFFFFF" points="8.38888889 18.0737159 2 24.4623981 19.462963 41.9247962 48 13.3886822 41.6111111 7 19.462963 29.1474317"></polygon>
          </g>
      </svg>
    </div>
    <div>
      <h2 class="notification__title">Nice, you’re now investing your available funds.</h2>
      <p class="notification__copy">You have successfully changed your portfolio setting to Conservative.</p>
    </div>
  </div>
</div>


<!-- DEFAULT -->
<div class="notification notification--information u-mb-medium">
  <div class="notification__content">
    <div class="notification__icon">
      <svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path d="M25,48 C12.2974501,48 2,37.7025499 2,25 C2,12.2974501 12.2974501,2 25,2 C37.7025499,2 48,12.2974501 48,25 C48,37.7025499 37.7025499,48 25,48 Z M27.9487179,39.7435897 L27.9487179,19.6923077 L22.0512821,19.6923077 L22.0512821,39.7435897 L27.9487179,39.7435897 Z M20.8729633,13.2321099 C20.8216885,15.4985755 22.4624819,17.3333333 24.923672,17.3333333 C27.4874117,17.3333333 29.1282051,15.4985755 29.1282051,13.2321099 C29.0769303,10.8577174 27.4874117,9.07692308 24.9749468,9.07692308 C22.4624819,9.07692308 20.8216885,10.8577174 20.8729633,13.2321099 Z" fill="#424554"></path>
          </g>
      </svg>
    </div>
    <div>
      <h2 class="notification__title">System maintenance scheduled for this Friday</h2>
      <p class="notification__copy">You may experience limited access to your account during those hours.</p>
    </div>
  </div>
</div>