Alerts

Alerts

Error

This is a system component that is used to tell the user about something that has gone wrong. It should refer to a specific error made by the user or the system and should include instructions for recovery, if appropriate.

Open this alert error example in a new tab
HTML
<div class="occlss-alert occlss-alert--error   ">
  <div class="occlss-layout"><!--START layout block-->
    <div class="occlss-layout__col occlss-layout__col--2 occlss-layout__col--flex occlss-alert__sign-cont"><!--START layout elemnt -->
      <span class="occlss-icon occlss-icon--exclamation-mark " aria-hidden="true">
        <svg aria-hidden="true" class="occlss-icon__container occlss-alert__sign ">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#exclamation-mark" class="icon__source icon__source--svg "></use>
        </svg>
      </span>
    </div><!--End layout elemnt -->
    <div class="occlss-layout__col  occlss-layout__col--9  occlss-alert__cont occlss-layout__col--flex"><!--START layout elemnt -->
      <h2 class="occlss-alert__heading">We&#39;re sorry, there is a problem</h2>
      <p class="occlss-alert__text">The details are highlighed below.</p>
    </div><!--End layout elemnt -->
    <div class="occlss-layout__col occlss-layout__col--1 occlss-layout__controls"><!--START layout elemnt -->
      <a href="javascript:void(0);">
        <span class="occlss-icon occlss-icon--ex occlss-alert__ex-icon" aria-hidden="true">
          <svg aria-hidden="true" class="occlss-icon__container  ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#ex" class="icon__source icon__source--svg "></use>
          </svg>
        </span>
      </a>
    </div><!--End layout elemnt -->
  </div> <!--End layout block -->
</div>

Info

The info alert component is used to give the user some neutral information about the website. For example, our cookie policy.

Open this alert info example in a new tab
HTML
<div class="occlss-alert  occlss-alert--info  ">
  <div class="occlss-layout"><!--START layout block-->
    <div class="occlss-layout__col occlss-layout__col--2 occlss-layout__col--flex occlss-alert__sign-cont"><!--START layout elemnt -->
      <span class="occlss-icon occlss-icon--info " aria-hidden="true">
        <svg aria-hidden="true" class="occlss-icon__container occlss-alert__sign ">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#info" class="icon__source icon__source--svg "></use>
        </svg>
      </span>
    </div><!--End layout elemnt -->
    <div class="occlss-layout__col  occlss-layout__col--9  occlss-alert__cont occlss-layout__col--flex"><!--START layout elemnt -->
      <h2 class="occlss-alert__heading">Cookie</h2>
      <p class="occlss-alert__text">We use cookie to ensure that we give you the best experience on our website. By countinuing to browser the site you are agreeing our use of cookies.</p>
    </div><!--End layout elemnt -->
    <div class="occlss-layout__col occlss-layout__col--1 occlss-layout__controls"><!--START layout elemnt -->
      <a href="javascript:void(0);">
        <span class="occlss-icon occlss-icon--ex occlss-alert__ex-icon" aria-hidden="true">
          <svg aria-hidden="true" class="occlss-icon__container  ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#ex" class="icon__source icon__source--svg "></use>
          </svg>
        </span>
      </a>
    </div><!--End layout elemnt -->
  </div> <!--End layout block -->
</div>

Success

The success alert component is used to tell the user that something positive has happened. For example, a payment has been made by the user.

Open this alert success example in a new tab
HTML
<div class="occlss-alert   occlss-alert--success ">
  <div class="occlss-layout"><!--START layout block-->
    <div class="occlss-layout__col occlss-layout__col--2 occlss-layout__col--flex occlss-alert__sign-cont"><!--START layout elemnt -->
      <span class="occlss-icon occlss-icon--check " aria-hidden="true">
        <svg aria-hidden="true" class="occlss-icon__container occlss-alert__sign ">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#check" class="icon__source icon__source--svg "></use>
        </svg>
      </span>
    </div><!--End layout elemnt -->
    <div class="occlss-layout__col  occlss-layout__col--9  occlss-alert__cont occlss-layout__col--flex"><!--START layout elemnt -->
      <h2 class="occlss-alert__heading">The payment has been successful.</h2>
    </div><!--End layout elemnt -->
    <div class="occlss-layout__col occlss-layout__col--1 occlss-layout__controls"><!--START layout elemnt -->
      <a href="javascript:void(0);">
        <span class="occlss-icon occlss-icon--ex occlss-alert__ex-icon" aria-hidden="true">
          <svg aria-hidden="true" class="occlss-icon__container  ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#ex" class="icon__source icon__source--svg "></use>
          </svg>
        </span>
      </a>
    </div><!--End layout elemnt -->
  </div> <!--End layout block -->
</div>

Warning

The warning alert component is user to tell the user that there might be something happening currently or in the future, but a specific error has not been found. For example, to tell users that there could be problems with the website.

Open this alert warning example in a new tab
HTML
<div class="occlss-alert    occlss-alert--warning">
  <div class="occlss-layout"><!--START layout block-->
    <div class="occlss-layout__col occlss-layout__col--2 occlss-layout__col--flex occlss-alert__sign-cont"><!--START layout elemnt -->
      <span class="occlss-icon occlss-icon--warning-sign " aria-hidden="true">
        <svg aria-hidden="true" class="occlss-icon__container occlss-alert__sign ">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#warning-sign" class="icon__source icon__source--svg "></use>
        </svg>
      </span>
    </div><!--End layout elemnt -->
    <div class="occlss-layout__col  occlss-layout__col--9  occlss-alert__cont occlss-layout__col--flex"><!--START layout elemnt -->
      <h2 class="occlss-alert__heading">Sorry, we are having some problems</h2>
      <p class="occlss-alert__text">We are experiencing some technical issues with our website. We apollogise for any inconvenience.</p>
    </div><!--End layout elemnt -->
    <div class="occlss-layout__col occlss-layout__col--1 occlss-layout__controls"><!--START layout elemnt -->
      <a href="javascript:void(0);">
        <span class="occlss-icon occlss-icon--ex occlss-alert__ex-icon" aria-hidden="true">
          <svg aria-hidden="true" class="occlss-icon__container  ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#ex" class="icon__source icon__source--svg "></use>
          </svg>
        </span>
      </a>
    </div><!--End layout elemnt -->
  </div> <!--End layout block -->
</div>

Changelog

2.3.1

  • Alert link underline style added

2.2.0

  • Heading changed from h3 to h2

1.0.0

  • Component added