R A D I U S

Attention

Description

Use this to convey there is an issue that requires attention, but maybe not immediate action. Choose static or temporary animated appropriately based on use case.
Usage

Usage example

No new investments will be made

Earning potential is reduced as you are not investing your available funds.
No new investments will be made

Earning potential is reduced as you are not investing your available funds.
No new investments will be made

Earning potential is reduced as you are not investing your available funds.
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>

  <!-- WITH PRIMARY CTA -->
  <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>
        <div class="notification__actionable">
          <div class="notification__actionable-copy">
            <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 class="notification__actionable-cta">
            <button class="cta-primary">Click me!</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- WITH SECONDARY CTA -->
  <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>
        <div class="notification__actionable">
          <div class="notification__actionable-copy">
            <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 class="notification__actionable-cta">
            <button class="cta-secondary">Click me!</button>
          </div>
        </div>
      </div>
    </div>
  </div>