Notification Layer

TIP

Notification layer with optional close button that is displayed on top of any content.

• Based on Alerts.
• Use class .js-close-layer to close layer on click

Hide Layer per Default

.c-notification.-hidden

Positioning / Widths

.c-notification[.-top/.-bottom] > .c-notification__content[.-wide, .-fullsize]

(remove .h-pos-relative from the Demo Code)

Top Positioning

Top notification layer.

Show Code

<div class="c-notification -top h-pos-relative">
  <div class="c-notification__content c-alert">
    <p>
      Top notification layer.
    </p>
  </div>
  <div class="c-notification__close js-close-layer">
    <i class="fal fa-times fa-2x h-link-color"></i>
  </div>
</div>

Bottom Positioning

.c-notification.-bottom (remove .h-pos-relative from the Demo Code)

Fullwidth content in bottom notification.

Show Code

<div class="c-notification -bottom -error h-pos-relative">
  <div class="c-notification__content c-alert -error -fullsize">
    <p>
      Fullwidth content in bottom notification.
    </p>
  </div>
  <div class="c-notification__close js-close-layer">
    <i class="fal fa-times fa-2x h-link-color"></i>
  </div>
</div>

Fullsize

.c-notification > .c-notification__content.-fullsize

Fullwidth content.

Show Code

<div class="c-notification">
  <div class="c-notification__content c-alert -error -fullsize">
    <p>
      Fullwidth content.
    </p>
  </div>
  <div class="c-notification__close js-close-layer">
    <i class="fal fa-times fa-2x h-link-color"></i>
  </div>
</div>

Colors / States

.c-notification[.-notice/.-success/.-error/.-warning] > .c-notification__content.c-alert[.-notice/.-success/.-error/.-warning]

Success

.c-notification.-success

Success

Show Code

<div class="c-notification -success h-pos-relative">
  <div class="c-notification__content c-alert -success">
    <p>
      Success
    </p>
  </div>
</div>

Warning

.c-notification.-warning

-warning

Show Code

<div class="c-notification -warning h-pos-relative">
  <div class="c-notification__content c-alert -warning">
    <p>
      -warning
    </p>
  </div>
</div>

Error

.c-notification.-error

-error

Show Code

<div class="c-notification -bottom -error h-pos-relative">
  <div class="c-notification__content c-alert -error">
    <p>
      -error
    </p>
  </div>
  <a class="c-notification__close js-close-layer">
    <i class="fal fa-times fa-2x h-link-color"></i>
  </a>
</div>

IE

WARNING

Kann vermutlich weg?

Show layer only in IE and set session cookie: .js-ie-layer

Mit dem nächsten größeren Update beenden wir den Support des in die Jahre gekommenen Internet Explorer 11. Bitte nutzen Sie LabXpert mit einem der vorgeschlagenen Browser wie z.B. Google Chrome, Mozilla Firefox, Microsoft Edge oder Apple Safari. Vielen Dank!

Show Code

<div class="c-notification -warning js-ie-layer">
  <div class="c-notification__content c-alert -warning">
    <p>
      Mit dem nächsten größeren Update beenden wir den Support des in die Jahre gekommenen Internet Explorer 11.
      Bitte nutzen Sie LabXpert mit einem der vorgeschlagenen Browser wie z.B.
      <a target="_blank" href="https://www.google.com/intl/de_de/chrome/">Google Chrome</a>,
      <a target="_blank" href="https://www.mozilla.org/de/firefox/new/">Mozilla Firefox</a>,
      <a target="_blank" href="https://www.microsoft.com/de-de/edge">Microsoft Edge</a> oder
      <a target="_blank" href="https://support.apple.com/de-de/HT204416">Apple Safari</a>. Vielen Dank!
    </p>
  </div>
  <a class="c-notification__close js-close-layer">
    <i class="fal fa-times fa-2x h-link-color"></i>
  </a>
</div>

Public JavaScript Methods

TIP

Initialize Notification JS, handles close buttons:
Notification.init(settings: object)

Opens a specific notification layer:
Notification.showLayer(layer: Node);

Closes a specific notification layer:
Notification.hideLayer(layer: Node);