PatternLab (1.0.18)

Appearance

Notification / Snackbar ​

TIP

The Notification / Snackbar component is a transient, non-blocking notification that appears briefly to provide feedback to the user. It is typically used to display messages such as success, error, warning, or informational alerts. Snackbars appear at a designated area of the screen, often at the bottom or top, and automatically disappear after a few seconds, ensuring a smooth and unobtrusive user experience.

Positioning / Widths ​

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

Top ​

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

c-notification -top > c-alert

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Show Code
html
<div class="c-notification -top h-pos-relative">
  <div class="c-notification__content c-alert">
    <strong>c-notification -top > c-alert</strong>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
  </div>
  <button class="c-notification__close js-close-layer c-btn -icon-btn  -flat -inverted" aria-label="Meldung ausblenden">
    <i class="far fa-times" aria-hidden="true"></i>
  </button>
</div>

Bottom ​

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

c-notification -bottom > c-alert

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Show Code
html
<div class="c-notification -bottom h-pos-relative">
  <div class="c-notification__content c-alert">
    <strong>c-notification -bottom > c-alert</strong>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
  </div>
  <button class="c-notification__close js-close-layer c-btn -icon-btn -flat -inverted" aria-label="Meldung ausblenden">
    <i class="far fa-times" aria-hidden="true"></i>
  </button>
</div>

Colors / States ​

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

Dark Default ​

> .c-alert.-dark

c-notification > c-alert -dark

Show Code
html
<div class="c-notification -top h-pos-relative">
  <div class="c-notification__content c-alert -dark">
    <p>
      c-notification > c-alert -dark
    </p>
  </div>
  <button class="c-notification__close js-close-layer c-btn -icon-btn -flat -white" aria-label="Meldung ausblenden">
    <i class="far fa-times" aria-hidden="true"></i>
  </button>
</div>

Notice ​

.-notice / .-notice > .c-alert.-notice.-dark

c-notification -notice

c-notification -notice > c-alert -notice -dark

Show Code
html
<div class="c-notification -notice -top h-pos-relative">
  <div class="c-notification__content c-alert -notice">
    <p>
      c-notification -notice
    </p>
  </div>
  <button class="c-notification__close js-close-layer c-btn -icon-btn -flat -inverted" aria-label="Meldung ausblenden">
    <i class="far fa-times" aria-hidden="true"></i>
  </button>
</div>
<div class="c-notification -notice -top h-pos-relative">
  <div class="c-notification__content c-alert -notice -dark">
    <p>
      c-notification -notice > c-alert -notice -dark
    </p>
  </div>
  <button class="c-notification__close js-close-layer c-btn -icon-btn -flat -white" aria-label="Meldung ausblenden">
    <i class="far fa-times" aria-hidden="true"></i>
  </button>
</div>

Success ​

.-success / .-success-dark

c-notification -success

Show Code
html
<div class="c-notification -success -top h-pos-relative">
  <div class="c-notification__content c-alert -success">
    <p>
      c-notification -success
    </p>
  </div>
  <button class="c-notification__close js-close-layer c-btn -icon-btn  -flat -inverted" aria-label="Meldung ausblenden">
    <i class="far fa-times" aria-hidden="true"></i>
  </button>
</div>

<div class="c-notification -success -top h-pos-relative">
  <div class="c-notification__content c-alert -success -dark -spinner">
    <strong>Example with Spinner</strong>
    <p>
      c-notification -success > c-alert -success -dark
    </p>
  </div>
  <button class="c-notification__close js-close-layer c-btn -icon-btn  -flat -white" aria-label="Meldung ausblenden">
    <i class="far fa-times" aria-hidden="true"></i>
  </button>
</div>

Warning ​

.-warning / .-warning > .c-alert.-warning.-dark

c-notification -warning

c-notification -warning > c-alert -warning -dark

Show Code
html
<div class="c-notification -warning -top h-pos-relative">
  <div class="c-notification__content c-alert -warning">
    <p>
      c-notification -warning
    </p>
  </div>
  <button class="c-notification__close js-close-layer c-btn -icon-btn -flat -inverted" aria-label="Meldung ausblenden">
    <i class="far fa-times" aria-hidden="true"></i>
  </button>
</div>

<div class="c-notification -warning -top h-pos-relative">
  <div class="c-notification__content c-alert -warning -dark">
    <p>
      c-notification -warning > c-alert -warning -dark
    </p>
  </div>
  <button class="c-notification__close js-close-layer c-btn -icon-btn  -flat -white" aria-label="Meldung ausblenden">
    <i class="far fa-times" aria-hidden="true"></i>
  </button>
</div>

Error ​

.-error / .-error > .c-alert.-error.-dark

c-notification -error

c-notification -error > c-alert -error -dark

Show Code
html
<div class="c-notification -error -top h-pos-relative">
  <div class="c-notification__content c-alert -error">
    <p>
      c-notification -error
    </p>
  </div>
  <button class="c-notification__close js-close-layer c-btn -icon-btn -flat -inverted" aria-label="Meldung ausblenden">
    <i class="far fa-times" aria-hidden="true"></i>
  </button>
</div>

<div class="c-notification -error -top h-pos-relative">
  <div class="c-notification__content c-alert -error -dark">
    <p>
      c-notification -error > c-alert -error -dark
    </p>
  </div>
  <button class="c-notification__close js-close-layer c-btn -icon-btn -flat -white" aria-label="Meldung ausblenden">
    <i class="far fa-times" aria-hidden="true"></i>
  </button>
</div>

Public JavaScript Methods ​

INFO

  • Use the class .js-close-layer (on the close button) to hide the notification on click
  • The display/hide state of the layer can be controlled by adding/removing the class .c-notification.-hidden to the layer element.
  • The disappearing functionality is not implemented by default, but can be achieved by using the public JS method Notification.hideLayer(layer: Node) in combination with a timer (e.g. setTimeout())
Public Methods

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);

Special Use Case: Internet Explorer Warning ​

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

Show Code
html
<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>
  <button class="c-notification__close js-close-layer c-btn -icon-btn -small -flat -inverted" aria-label="Meldung ausblenden">
    <i class="far fa-times" aria-hidden="true"></i>
  </button>
</div>

2026 - Pharma4u