Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Notification list

.notificationList

A list of notifications, with a box shadow beneath.

Markup

<ul class="notificationList">
    <li class="notificationList__item">
        <div class="notificationBar notificationBar--alert notificationBar--ellipsis notificationBar--slim">
            <a href="#" class="notificationBar__link">
                <span class="notificationBar__icon icon icon--alert icon--nsWhite">
                    <span class="alt">Let op:</span>
                </span>
                <span class="notificationBar__text">
                    De klantenservice op dit moment slecht bereikbaar op dit moment slecht bereikbaar door een stroomstoring.
                </span>
                <span class="notificationBar__arrow icon icon--chevron-medium icon--nsWhite"></span>
            </a>
        </div>
    </li>
    <li class="notificationList__item">
        <div class="notificationBar notificationBar--alert notificationBar--ellipsis notificationBar--slim">
            <a href="#" class="notificationBar__link">
                <span class="notificationBar__icon icon icon--alert icon--nsWhite">
                    <span class="alt">Let op:</span>
                </span>
                <span class="notificationBar__text">
                    De stationshal van Etten-Leur staat in de fik. Houd rekening met minder treinen.
                </span>
                <span class="notificationBar__arrow icon icon--chevron-medium icon--nsWhite"></span>
            </a>
        </div>
    </li>
</ul>