Notification

The flix-notification__content element can hold some basic typography formatting, in order to get this working you can use flix-text, flix-list, flix-h# classes. See error notification example for more details.

It's important to wrap close controls in a <button> element as in provided examples. This makes control accessible with keyboard navigation.

Using the <i class="flix-notification__close flix-icon flix-icon-close"></i> as closing control also works but is not recommended and will be deprecated in the next major.

Accessibility

Roles should be added to the section element of the notification:

• status is used to provide an updated status of some kind;
• alert is used to convey critical and time-sensitive information to users.

The aria-live attribute informs assistive technologies how it should react to changes in the notification depending on how critical is the information.

• assertive only for error notifications to make them being presented right away;
• Other notifications should be polite.

There are 3 types of notification boxes:

Neutral

Default state, no modifiers needed);

<section class="flix-notification" role="status" aria-live="polite">
  <div class="flix-notification__content">
    Ok, this is neutral.
  </div>
  <button class="flix-notification__close flix-btn flix-btn--square flix-btn--md flix-btn--link">
    <span class="flix-sr-only">Close</span>
  </button>
</section>

Critical/error

Use flix-notification--danger modifier:

<section class="flix-notification flix-notification--danger" role="alert" aria-live="assertive">
  <div class="flix-notification__content">
    This is an error!
    <p class="flix-text">...with some details</p>
  </div>
  <button class="flix-notification__close flix-btn flix-btn--square flix-btn--md flix-btn--link">
    <span class="flix-sr-only">Close</span>
  </button>
</section>

Warning

Use flix-notification--warning modifier:

<section class="flix-notification flix-notification--warning" role="status" aria-live="polite">
  <div class="flix-notification__content">
    Oh, warning!
  </div>
  <button class="flix-notification__close flix-btn flix-btn--square flix-btn--md flix-btn--link">
    <span class="flix-sr-only">Close</span>
  </button>
</section>

Success

Use flix-notification--success modifier:

<section class="flix-notification flix-notification--success" role="status" aria-live="polite">
  <div class="flix-notification__content">
    Yay! Success!
  </div>
  <button class="flix-notification__close flix-btn flix-btn--square flix-btn--md flix-btn--link">
    <span class="flix-sr-only">Close</span>
  </button>
</section>

Toast notifications

Wrapping your notifications into flix-notification-container element makes them positioned outside of your content flow (top of the screen on mobile, top-right on bigger screens).

Adding --toast modifier class to notification makes it slide-in and disappear (slide out) automatically after certain time (4s is an overall animation duration).

<button type="button" class="flix-btn flix-btn--primary" data-toggle="js-toast-example" data-toggle-class="flix-hidden" data-toggle-timeout="4000">
  Show toast notification
</button>


<div class="flix-notification-container flix-hidden js-toast-example">
  <section id="notification-toast" class="flix-notification flix-notification--toast" role="alert" aria-live="polite">
    <div class="flix-notification__content">
      Hello and Goodbye!
      <p class="flix-text">Sneaky-peeky notification in action</p>
    </div>
    <button class="flix-notification__close flix-btn flix-btn--square flix-btn--md flix-btn--link" data-toggle="js-toast-example" data-toggle-class="flix-hidden">
      <span class="flix-sr-only">Close</span>
    </button>
  </section>
</div>

Other positioning options are also available, following modifier classes for container allow you customize notification positioning:

flix-notification-container--top-right

For top/right positioning (**default**).

flix-notification-container--top-left

For top/left positioning.

flix-notification-container--bottom-left

flix-notification-container--bottom-right

For bottom/left positioning.

For top/left positioning.

Note that notification is shown and hidden automatically with CSS animations.

As hidden notification elements remain in the DOM they might be blocking your content interaction, consider implementing your own javascript logic of clearing up notification elements from the container.