Success

Description

Use this to convey something was successfully completed or changed to the user. This should be a temporary animation that shows for 10 seconds and goes away. Usually success and confirmations are straight-forward, so they should be one-line, short and sweet.

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">
  <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>