Information

Description

Use this to inform the user of something that is not urgent and doesn’t require any action. This is usually a system-wide notification about their account. Choose static or temporary animated appropriately based on use case.

Usage

Usage example

System maintenance scheduled for this Friday

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

System maintenance scheduled for this Friday

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

System maintenance scheduled for this Friday

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

Code example

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

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

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