Alerts

Documentation for alerts

Files

app/styles/modules/_alerts.scss
app/scripts/modules/alerts.js

Alerts

Component alert can be created with HTML shown in example below.

To display drop file alert only when file is dragged over page use class .js-alert.hide

To display drop file alert fixed at the bottom of the page user class .fixed-position

Example:code
Success !
Opps
Warning ! Better check yourself before you wreck yourself.
Info
info

Drop your files to upload them to the Media Manager

Images should be at least 1920px wide

Compatible formats .jpg, .png, .gif

Image should have landscape aspect ratio

Code:
<!-- success -->
<article class="alert alert-success">
  <button class="btn btn-link btn-icon-only alert_close" type="button">
    <i class="icon icon-m">close</i>
  </button>
  <strong>Success !</strong>
</article>

<!-- warning -->
<article class="alert alert-warning">
  <button class="btn btn-link btn-icon-only alert_close" type="button">
    <i class="icon icon-m">close</i>
  </button>
  <strong>Opps</strong>
</article>

<!-- error -->
<article class="alert alert-error">
  <button class="btn btn-link btn-icon-only alert_close" type="button">
    <i class="icon icon-m">close</i>
  </button>
  <strong>Warning !</strong>
  Better check yourself before you wreck yourself.
</article>

<!-- info -->
<article class="alert alert-info">
  <button class="btn btn-link btn-icon-only alert_close" type="button">
    <i class="icon icon-m">close</i>
  </button>
  <strong>Info</strong>
</article>

<!-- drop file -->
<article class="alert alert-dropfile flex-row-center text-medium">
  <div class="info-area text-center mb-medium"><i class="icon icon-l mr-small text-vat">info</i>
  <div class="info-area-text">
    <p class="text-bold mb-small">Drop your files to upload them to the Media Manager</p>
    <p class="no-mrg-bottom text-small">Images should be at least 1920px wide</p>
    <p class="no-mrg-bottom text-small">Compatible formats .jpg, .png, .gif</p>
    <p class="no-mrg-bottom text-small">Image should have landscape aspect ratio</p>
  </div>
  </div>
</article>