# 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

Top notification layer.

hide 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

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

Fullwidth content in bottom notification.

hide 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.

hide 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

Success

hide code

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

# Warning

-warning

hide code

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

# Error

-error

hide 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

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 Labor+ mit einem der vorgeschlagenen Browser wie z.B. Google Chrome, Mozilla Firefox, Microsoft Edge oder Apple Safari. Vielen Dank!

hide 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 Labor+ 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);

← List Pagination →