Javascript

Description

If you want to make the notification to collapse after a certain amount of time, add the [data-js-notification-collapse] attribute on the block element.

Import JS functionality

In order to have the JS functionality of this component available, you need to include it in your project. Assuming the project is using ES6:

import notification from 'radius/dist/m2dm/js/notification';
notification();

Usage

Usage example

Nice, you’re now investing your available funds.

You have successfully changed your portfolio setting to Conservative.

Code example

<!-- DEFAULT -->
<div class="notification notification--success u-mb-medium" data-js-notification-collapse>
  <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>