Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Notification Bar

Let op: Dit is een mededeling die belangrijk en ernstig van aard kan zijn maar ook slechts informatief, soms overbodig maar meestal super-interessant.
.notificationBar

A component which is used to display a message to the user in case of an exception. Examples of these exceptions:

  • There is an interference of the normal train schedule
  • The call centre is experiencing long waiting times

Markup

<div class="container">
    <div class="notificationBar {{modifier_class}}">
        <span class="notificationBar__icon icon icon--info icon--nsWhite">
            <span class="alt">Let op:</span>
        </span>
        <span class="notificationBar__text">Dit is een mededeling die belangrijk en ernstig van aard kan zijn maar ook slechts informatief, soms overbodig maar meestal super-interessant.</span>
    </div>
</div>

Modifiers

Let op: Dit is een mededeling die belangrijk en ernstig van aard kan zijn maar ook slechts informatief, soms overbodig maar meestal super-interessant.

.notificationBar--alert

A message with high urgency

Let op: Dit is een mededeling die belangrijk en ernstig van aard kan zijn maar ook slechts informatief, soms overbodig maar meestal super-interessant.

.notificationBar--info

An information message

Let op: Dit is een mededeling die belangrijk en ernstig van aard kan zijn maar ook slechts informatief, soms overbodig maar meestal super-interessant.

.notificationBar--ellipsis

The text inside the notificationBar is cut off using ellipsis if the test won't fit the on one line.

Let op: Dit is een mededeling die belangrijk en ernstig van aard kan zijn maar ook slechts informatief, soms overbodig maar meestal super-interessant.

.notificationBar--slim

The notificationBar has a tighter padding on mobile.