<div class="uk-section uk-section-default uk-flex uk-flex-middle" uk-height-viewport>
    <div class="uk-width-1-1">
        <div class="uk-container uk-container-small">

            <p uk-margin>
                <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({pos: 'top-left', message: 'Message'})">Top Left</button>
                <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({pos: 'top-center', message: 'Message'})">Top Center</button>
                <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({pos: 'top-right', message: 'Message'})">Top Right</button>
            </p>

            <p class="uk-notification-message">
                <a href="#" class="uk-notification-close" uk-close></a>
                Message
            </p>

            <p class="uk-notification-message uk-notification-message-primary">
                <a href="#" class="uk-notification-close" uk-close></a>
                Primary message
            </p>

            <p class="uk-notification-message uk-notification-message-success">
                <a href="#" class="uk-notification-close" uk-close></a>
                Success message
            </p>

            <p class="uk-notification-message uk-notification-message-warning">
                <a href="#" class="uk-notification-close" uk-close></a>
                Warning message
            </p>

            <p class="uk-notification-message uk-notification-message-danger">
                <a href="#" class="uk-notification-close" uk-close></a>
                Danger message
            </p>

        </div>
    </div>
</div>
