Messages for Goldilocks CSS

Commentary

The message component provides a decorated container to deliver colourful containers of text for important messages that may provide showing the result of a user action, can help to explain some feature or more detailed text for an article.

An article tag is defined by the message class to set up the container. An optional header HTML tag can hold a title and an optional delete button. The delete button can be serviced by javascript to close the message. The message-body class holds the content of the message and can contain other HTML tags such p.

Any of the element background and font modifiers can be used to colourize the message component. The header section can also be independently colourized.

Usage

Classes:
`.message`	Defines main container for a message, typically `article` HTML tag is used at top level.
`.message-body`	Defines content container.
Colour options:	Any of the element colour modifiers from the Colour Palette helpers.

Dependencies:
File:	message.css
Variables:	--grey-dark, --grey-lighter, --line-height-125, --radius, --size-6, --text, --text-invert-ter

Examples

Message with Header and Colour Options

Header default

.message

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

Header.is-primary

.message.is-primary-light

Header.is-secondary-dark

.message.is-secondary


                <article class="message">
                    <header>
                        <h2>Header default</h2>
                        <button class="delete" aria-label="delete"></button>
                    </header>
                    <div class="message-body">
                        <p>.message</p>
                        <p>Lorem ipsum dolor sit amet, ...</p>
                    </div>
                </article>

                <article class="message is-primary-light">
                    <header class="is-primary">
                        <h2>Header.is-primary</h2>
                        <button class="delete" aria-label="delete"></button>
                    </header>
                    <div class="message-body">
                        <p>.message.is-primary-light</p>
                        <p>Lorem ipsum dolor sit amet, ...</p>
                    </div>
                </article>

                <article class="message is-secondary">
                    <header class="is-secondary-dark">
                        <h2>Header.is-secondary-dark</h2>
                        <button class="delete" aria-label="delete"></button>
                    </header>
                    <div class="message-body">
                        <p>.message.is-secondary</p>
                        <p>Lorem ipsum dolor sit amet, ...</p>
                    </div>
                </article>

Message without a Header and with Colour Options

.message no header

.message.is-danger no header

.message.is-link-light no header


                <article class="message">
                    <h2 class="sr-only">Message 1</h2>
                    <div class="message-body">
                        <p>.message no header</p>
                        <p>Lorem ipsum dolor sit amet, ...</p>
                    </div>
                </article>


                <article class="message is-danger">
                    <h2 class="sr-only">Message 2</h2>
                    <div class="message-body">
                        <p>.message.is-danger no header</p>
                        <p>Lorem ipsum dolor sit amet, ...</p>
                    </div>
                </article>


                <article class="message is-link-light">
                    <h2 class="sr-only">Message 3</h2>
                    <div class="message-body">
                        <p>.message.is-link-light no header</p>
                        <p>Lorem ipsum dolor sit amet, ...</p>
                    </div>
                </article>