Notification

Notifications provide feedback about the system status and activity.

Notification severity states

There are four different kinds of notifications, each of them can have (optional) additional information.

Error notification
Warning notification
Success notification
Information notification

Example 1: Standalone preview

<div class="notificationContainer">
    <div class="notifications">

        <!-- single notification item START -->
        <div class="notification is-warning">
            <div class="notification__main">
                <h4 class="notification__title">
                    Lorem ipsum
                    <a class="notification__close" href="#" title="Close dialog"></a>
                </h4>
                <div class="notification__content">
                    We recommend the description to have a
                    maximum length of 3 lines.
                    Make sure that the notification provides
                    enough information to help the user</div>
            </div>
        </div>
        <!-- single notification item END -->

        <div class="notification">
            <div class="notification__main">
                <h4 class="notification__title">
                    Another notification
                    <a class="notification__close" href="#" title="Close notification"></a>
                </h4>
                <div class="notification__content">
                    We recommend the description to have a
                    maximum length of 3 lines.
                    Make sure that the notification provides
                    enough information to help the user</div>
            </div>
        </div>
        <div class="notification is-alert">
            <div class="notification__main">
                <h4 class="notification__title">
                    Lorem ipsum
                    <a class="notification__close" href="#" title="Close notification"></a>
                </h4>
                <div class="notification__content">
                    We recommend the description to have a
                    maximum length of 3 lines.
                    Make sure that the notification provides
                    enough information to help the user</div>
            </div>
            <div class="notification__details">
                <a href="#" class="details__expander">More content</a>
                <div class="details__content">
                    Lorem ipsum dolor sit amet following measurements show the dimensions for this component:
                    <a href="#">A notification has</a> a maximal width of 320px.
                </div>
            </div>
        </div>
        <div class="notification is-success">
            <div class="notification__main">
                <h4 class="notification__title">
                    Lorem ipsum
                    <a class="notification__close" href="#" title="Close notification"></a>
                </h4>
                <div class="notification__content">
                    We recommend the description to have a
                    maximum length of 3 lines.
                    Make sure that the notification provides
                    enough information to help the user</div>
            </div>
            <div class="notification__details">
                <a href="#" class="details__expander">More content</a>
                <div class="details__content">
                    Lorem ipsum dolor sit amet following measurements show the dimensions for this component:
                    A notification has a maximal width of 320px.
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================= -->
<!-- JavaScript Code following is only for demonstrational purpose -->
<!-- ============================================================= -->
<script>
    window.onload = function(e){
        // sample JS for closing notifications
        var close = document.querySelectorAll('.notification__close');
        for (var i=0; i<close.length; i++) {
            close[i].addEventListener('click', function(e) {
                this.parentNode.parentNode.parentNode.classList.add('is-hidden');
            });
        }

        // sample JS for closing notifications
        var expand = document.querySelectorAll('.details__expander');
        for (var i=0; i<expand.length; i++) {
            expand[i].addEventListener('click', function(e) {
                this.parentNode.classList.toggle('is-expanded');
            });
        }

        // sample JS for creating new notifications every x seconds
        setInterval(function() {
            var notif = document.querySelectorAll('.notification');
            var clone = notif[notif.length - 1].cloneNode(true);
            notif[notif.length - 1].parentNode.insertBefore(clone, null);
            clone.classList.remove('is-hidden');

            // we need to manually add the events, again since they were not cloned
            var close = clone.querySelector('.notification__close');
            close.addEventListener('click', function(e) {
                this.parentNode.parentNode.parentNode.classList.add('is-hidden');
            });
            var expand = clone.querySelector('.details__expander');
            expand.addEventListener('click', function(e) {
                this.parentNode.classList.toggle('is-expanded');
            });
            // IE 11 does not handle multiple classList assignments properly
            clone.classList.remove('is-alert');
            clone.classList.remove('is-warning');
            clone.classList.remove('is-success');
            clone.classList.remove('is-informative');
            var type = Math.floor(Math.random() * 4);
            switch (type) {
                case 0:
                    clone.classList.add('is-warning');
                    break;
                case 1:
                    clone.classList.add('is-alert');
                    break;
                case 2:
                    clone.classList.add('is-success');
                    break;
                case 3:
                    clone.classList.add('is-informative');
                    break;
            }
        }, 5000);
    }
</script>

Example 2: Application integration

<section class="appWrapper">
    <ul class="appWrapper__appBar">
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp person" aria-hidden="true"></span>
                <span class="item__title">Lorem</span>
            </a>
        </li>
        <li class="appBar__item is-activated">
            <a href="#">
                <span class="iconMdsp calendarDay" aria-hidden="true"></span>
                <span class="item__title">Ipsum</span>
            </a>
        </li>
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp aspects" aria-hidden="true"></span>
                <span class="item__title">Dolor sit</span>
            </a>
        </li>
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp asset" aria-hidden="true"></span>
                <span class="item__title">Amet tempor aliquam quctor</span>
            </a>
        </li>
        <li class="appBar__item is-disabled">
            <a href="#">
                <span class="iconMdsp calendar" aria-hidden="true"></span>
                <span class="item__title">Morbi et lobortis lacus sed tempor</span>
            </a>
        </li>
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp globalSettings" aria-hidden="true"></span>
                <span class="item__title">Lobortis lacus sed tempor</span>
            </a>
        </li>
    </ul>

    <section class="main appWrapper__main">
        <section class="main__navigation">
        </section>
        <section class="main__region">
            <div class="contentHeader">
                <div class="contentHeader__header">
                    <h1 class="header__headline">Notification Demo</h1>
                    <div class="header__subline">Will create a new notification every 5 seconds.</div>
                </div>
            </div>
        </section>
    </section>

    <!-- Notification markup START -->
    <div class="notificationContainer">
        <ul class="notifications">
            <li class="notification is-warning">
                <div class="notification__main">
                    <h4 class="notification__title">
                        Lorem ipsum
                        <a class="notification__close" href="#" title="Close notification"></a>
                    </h4>
                    <div class="notification__content">
                        We recommend the description to have a
                        maximum length of 3 lines.
                        Make sure that the notification provides
                        enough information to help the user</div>
                </div>
            </li>
            <li class="notification">
                <div class="notification__main">
                    <h4 class="notification__title">
                        Another notification
                        <a class="notification__close" href="#" title="Close notification"></a>
                    </h4>
                    <div class="notification__content">
                        We recommend the description to have a
                        maximum length of 3 lines.
                        Make sure that the notification provides
                        enough information to help the user</div>
                </div>
            </li>
            <li class="notification is-alert">
                <div class="notification__main">
                    <h4 class="notification__title">
                        Lorem ipsum
                        <a class="notification__close" href="#" title="Close notification"></a>
                    </h4>
                    <div class="notification__content">
                        We recommend the description to have a
                        maximum length of 3 lines.
                        Make sure that the notification provides
                        enough information to help the user</div>
                </div>
                <div class="notification__details">
                    <a href="#" class="details__expander">More content</a>
                    <div class="details__content">
                        Lorem ipsum dolor sit amet following measurements show the dimensions for this component:
                        <a href="#">A notification has</a> a maximal width of 320px.
                    </div>
                </div>
            </li>
            <li class="notification is-success">
                <div class="notification__main">
                    <h4 class="notification__title">
                        Lorem ipsum
                        <a class="notification__close" href="#" title="Close notification"></a>
                    </h4>
                    <div class="notification__content">
                        We recommend the description to have a
                        maximum length of 3 lines.
                        Make sure that the notification provides
                        enough information to help the user</div>
                </div>
                <div class="notification__details">
                    <a href="#" class="details__expander">More content</a>
                    <div class="details__content">
                        Lorem ipsum dolor sit amet following measurements show the dimensions for this component:
                        A notification has a maximal width of 320px.
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <!-- Notification markup END -->

</section>

<script type="text/javascript" src="https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js"></script>

<!-- ============================================================= -->
<!-- JavaScript Code following is only for demonstrational purpose -->
<!-- ============================================================= -->
<script>
    _msb.init({
        title: "App Layout",
        showLegal: true,
        polyfills: {
            promise: true
        }
    });
    window.onload = function(e){
        // sample JS for closing notifications
        var close = document.querySelectorAll('.notification__close');
        for (var i=0; i<close.length; i++) {
            close[i].addEventListener('click', function(e) {
                this.parentNode.parentNode.parentNode.classList.add('is-hidden');
            });
        }

        // sample JS for closing notifications
        var expand = document.querySelectorAll('.details__expander');
        for (var i=0; i<expand.length; i++) {
            expand[i].addEventListener('click', function(e) {
                this.parentNode.classList.toggle('is-expanded');
            });
        }

        // sample JS for creating new notifications every x seconds
        setInterval(function() {
            var notif = document.querySelectorAll('.notification');
            var clone = notif[notif.length - 1].cloneNode(true);
            notif[notif.length - 1].parentNode.insertBefore(clone, null);
            clone.classList.remove('is-hidden');

            // we need to manually add the events, again since they were not cloned
            var close = clone.querySelector('.notification__close');
            close.addEventListener('click', function(e) {
                this.parentNode.parentNode.parentNode.classList.add('is-hidden');
            });
            var expand = clone.querySelector('.details__expander');
            expand.addEventListener('click', function(e) {
                this.parentNode.classList.toggle('is-expanded');
            });
            // IE 11 does not handle multiple classList assignments properly
            clone.classList.remove('is-alert');
            clone.classList.remove('is-warning');
            clone.classList.remove('is-success');
            clone.classList.remove('is-informative');
            var type = Math.floor(Math.random() * 4);
            switch (type) {
                case 0:
                    clone.classList.add('is-warning');
                    break;
                case 1:
                    clone.classList.add('is-alert');
                    break;
                case 2:
                    clone.classList.add('is-success');
                    break;
                case 3:
                    clone.classList.add('is-informative');
                    break;
            }
        }, 5000);
    }
</script>

Usage

ElementClassDescription
.notification .is-warning .is-informative .is-error .is-success Sets the appropriate severity state for a notification.
.notification .is-hidden Moves a notification out of the viewport so other notifications can slide into view. Remove this class to re-positions the notification again in the visible part of the viewport. Remove the element from the DOM if you want to delete a notification.
.notification__details   An optional wrapper element for additional content.
.notification__details .is-expanded Add this class to expand the wrapper element. Remove the class to collapse the container again.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top