Commentary

The notification block is a simple coloured block, based on the HTML aside tag, to highlight something meaningful to a user. The notification block is often a system generated message to notify a result after a user action and hence is an aside to the main page content.

Note that from the HTML specification an aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element. The aside should be considered separate from that main page content.

Notification block backgrounds can be colourized with the element colour helpers that set the text and background colour. The notification block also supports icons in the body of the block.

The notification block also supports an optional delete button to allow the user to dismiss the notification. This dismissal action will require some javascript to react to the dismissal press.

Usage

Classes:
.notification Defines a notification block with background and text color.
Colour options: Any of the element colour modifiers from the Colour Palette helpers.
Dependencies:
File: notifications.css.css
Variables: --element-background, --radius, --text

Examples


                <aside class="notification">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum Default</p>
                </aside>

                <aside class="notification is-primary">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-primary</p>
                </aside>

                <aside class="notification is-secondary">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-secondary</p>
                </aside>

                <aside class="notification is-tertiary">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-tertiary</p>
                </aside>

                <aside class="notification is-link">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-link</p>
                </aside>

                <aside class="notification is-success">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-success</p>
                </aside>

                <aside class="notification is-warning">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-warning</p>
                </aside>

                <aside class="notification is-danger">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-danger</p>
                </aside>

                <aside class="notification is-primary-light">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-primary-light</p>
                </aside>

                <aside class="notification is-secondary-light">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-secondary-light</p>
                </aside>

                <aside class="notification is-tertiary-light">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-tertiary-light</p>
                </aside>

                <aside class="notification is-link-light">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-link-light</p>
                </aside>

                <aside class="notification is-success-light">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-success-light</p>
                </aside>

                <aside class="notification is-warning-light">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-warning-light</p>
                </aside>

                <aside class="notification is-danger-light">
                    <button class="delete" type="button" aria-label="delete"></button>
                    <p>Lorem Ipsum is-danger-light</p>
                </aside>