Error

Description

Use this to convey something was unsuccessful, and requires immediate attention or action. Choose static or temporary animated appropriately based on use case. Try not to have vague copy like “Something went wrong”, but rather informational and actionable copy.

Usage

Usage example

A connection error has occured

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

Code example

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