---
layout: base
title: Notifications
---

<div class="container">
  <div class="row mb-4">
    <div class="col-12">
      <h1 class="mt-5">Notifications</h1>
      <p>Utilizzare i tasti sottostanti per attivare le Notifications.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-12 col-md-4">
      <p>
        <button
          onclick="notificationShow('notification',defaultNotFade);"
          type="button"
          class="btn btn-primary"
        >
          Notification - 7s (default)
        </button>
      </p>
      <p>
        <button
          onclick="notificationShow('notificationIcnTxt',defaultNotFade);"
          type="button"
          class="btn btn-primary"
        >
          Notification icon/text - 7s (default)
        </button>
      </p>
      <p>
        <button
          onclick="notificationShow('notificationDism');"
          type="button"
          class="btn btn-primary"
        >
          Notification Dismissable
        </button>
      </p>
    </div>
    <div class="col-12 col-md-4">
      <p>
        <button
          onclick="notificationShow('notificationTop',5000);"
          type="button"
          class="btn btn-primary"
        >
          Notification Top Fix - 5s
        </button>
      </p>
      <p>
        <button
          onclick="notificationShow('notificationBottom',8000);"
          type="button"
          class="btn btn-primary"
        >
          Notification Bottom Fix - 8s
        </button>
      </p>
      <p>
        <button
          onclick="notificationShow('notificationLeft',6000);"
          type="button"
          class="btn btn-primary"
        >
          Notification Left Fix - 6s
        </button>
      </p>
      <p>
        <button
          onclick="notificationShow('notificationRight',12000);"
          type="button"
          class="btn btn-primary"
        >
          Notification Right Fix - 12s
        </button>
      </p>
    </div>
    <div class="col-12 col-md-4">
      <p>
        <button
          onclick="notificationShow('notificationDismTopFix');"
          type="button"
          class="btn btn-primary"
        >
          Notification Dismissable Top Fix
        </button>
      </p>
      <p>
        <button
          onclick="notificationShow('notificationDismBotFix');"
          type="button"
          class="btn btn-primary"
        >
          Notification Dismissable Bottom Fix
        </button>
      </p>
      <p>
        <button
          onclick="notificationShow('notificationDismLftFix');"
          type="button"
          class="btn btn-primary"
        >
          Notification Dismissable Left Fix
        </button>
      </p>
      <p>
        <button
          onclick="notificationShow('notificationDismRgtFix');"
          type="button"
          class="btn btn-primary"
        >
          Notification Dismissable Right Fix
        </button>
      </p>
    </div>
  </div>
</div>

<!-- col1 -->
<div
  class="notification"
  role="alert"
  id="notification"
  aria-labelledby="not0-title"
>
  <h5 id="not0-title">Notification</h5>
</div>

<div
  class="notification with-icon success"
  role="alert"
  id="notificationIcnTxt"
  aria-labelledby="not1-title"
>
  <h5 id="not1-title">
    <svg class="icon">
      <use
        xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-check-circle"
      ></use></svg
    >Notification icon/text
  </h5>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor…
  </p>
</div>

<div
  class="notification dismissable with-icon success"
  role="alert"
  id="notificationDism"
  aria-labelledby="not6-title"
>
  <h5 id="not6-title">
    <svg class="icon">
      <use
        xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-check-circle"
      ></use></svg
    >Notification Dismissable
  </h5>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor…
  </p>
  <button type="button" class="btn notification-close">
    <svg class="icon">
      <use xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-close"></use>
    </svg>
    <span class="sr-only">Chiudi notifica: Titolo notification</span>
  </button>
</div>
<!-- /col1 -->

<!-- col2 -->
<div
  class="notification top-fix with-icon success"
  role="alert"
  id="notificationTop"
  aria-labelledby="not2-title"
>
  <h5 id="not2-title">
    <svg class="icon">
      <use
        xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-check-circle"
      ></use></svg
    >Notification Top Fix
  </h5>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor…
  </p>
</div>

<div
  class="notification bottom-fix with-icon error"
  role="alert"
  id="notificationBottom"
  aria-labelledby="not3-title"
>
  <h5 id="not3-title">
    <svg class="icon">
      <use
        xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-close-circle"
      ></use></svg
    >Notification Bottom Fix
  </h5>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor…
  </p>
</div>

<div
  class="notification left-fix with-icon info"
  role="alert"
  id="notificationLeft"
  aria-labelledby="not4-title"
>
  <h5 id="not4-title">
    <svg class="icon">
      <use
        xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-info-circle"
      ></use></svg
    >Notification Left Fix
  </h5>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor…
  </p>
</div>

<div
  class="notification right-fix with-icon warning"
  role="alert"
  id="notificationRight"
  aria-labelledby="not5-title"
>
  <h5 id="not5-title">
    <svg class="icon">
      <use
        xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-error"
      ></use></svg
    >Notification Right Fix
  </h5>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor…
  </p>
</div>
<!-- /col2 -->

<!-- col3 -->
<div
  class="notification dismissable top-fix with-icon success"
  role="alert"
  id="notificationDismTopFix"
  aria-labelledby="not7-title"
>
  <h5 id="not7-title">
    <svg class="icon">
      <use
        xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-error"
      ></use></svg
    >Dismissable Top Fix
  </h5>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor…
  </p>
  <button type="button" class="btn notification-close">
    <svg class="icon">
      <use xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-close"></use>
    </svg>
    <span class="sr-only">Chiudi notifica: Dismissable Top Fix</span>
  </button>
</div>

<div
  class="notification dismissable bottom-fix with-icon error"
  role="alert"
  id="notificationDismBotFix"
  aria-labelledby="not8-title"
>
  <h5 id="not8-title">
    <svg class="icon">
      <use
        xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-close-circle"
      ></use></svg
    >Dismissable Bottom Fix
  </h5>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor…
  </p>
  <button type="button" class="btn notification-close">
    <svg class="icon">
      <use xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-close"></use>
    </svg>
    <span class="sr-only">Chiudi notifica: Dismissable Bottom Fix</span>
  </button>
</div>

<div
  class="notification dismissable left-fix with-icon info"
  role="alert"
  id="notificationDismLftFix"
  aria-labelledby="not9-title"
>
  <h5 id="not9-title">
    <svg class="icon">
      <use
        xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-info-circle"
      ></use></svg
    >Dismissable Left Fix
  </h5>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor…
  </p>
  <button type="button" class="btn notification-close">
    <svg class="icon">
      <use xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-close"></use>
    </svg>
    <span class="sr-only">Chiudi notifica: Dismissable Left Fix</span>
  </button>
</div>

<div
  class="notification dismissable right-fix with-icon warning"
  role="alert"
  id="notificationDismRgtFix"
  aria-labelledby="not10-title"
>
  <h5 id="not10-title">
    <svg class="icon">
      <use
        xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-error"
      ></use></svg
    >Dismissable Right Fix
  </h5>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor…
  </p>
  <button type="button" class="btn notification-close">
    <svg class="icon">
      <use xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-close"></use>
    </svg>
    <span class="sr-only">Chiudi notifica: Dismissable Right Fix</span>
  </button>
</div>
<!-- /col3 -->