Alert Styles

Error Alert

Error Text example. This is an example of an error warning that falls over two or more lines.


        
                                  <div class="alert alert--error" role="alert" aria-hidden="false">
                            <div class="wrap">
                                <span>Error Text example. This is an example of an error warning that falls over two or more lines.</span>
                                <button type="button" class="alert__deactivator icon icon--close">
                                    <span class="visually-hidden">Click to close alert</span>
                                </button>
                            </div>
                        </div>

Success Alert

Success Text example. This is an example of a success message that is one line only.


        
                                  <div class="alert alert--success" role="alert" aria-hidden="false">
                            <div class="wrap">
                                <span>Success Text example. This is an example of a success message that is one line only. </span>
                                <button type="button" class="alert__deactivator icon icon--close">
                                    <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>

Occassion Alert

Occassion Text example. This is an example of an occasion message that is one line only.


        
                                  <div class="alert alert--occasion" role="alert" aria-hidden="false">
                            <div class="wrap">
                                <span>Occassion  Text example. This is an example of an occasion message that is one line only.</span>
                                <button type="button" class="alert__deactivator icon icon--close">
                                    <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>

Support Alert

Support Text example. This is an example of a support message that is one line only.


        
                                  <div class="alert alert--support" role="alert" aria-hidden="false">
                            <div class="wrap">
                                <span>Support Text example. This is an example of a support message that is one line only.</span>
                                <button type="button" class="alert__deactivator icon icon--close">
                                    <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>

Information Alert

Information Text example. This is an example of an info message that is one line only.


        
                                  <div class="alert alert--info" role="alert" aria-hidden="false">
                            <div class="wrap">
                                <span>Information Text example. This is an example of an info message that is one line only.</span>
                                <button type="button" class="alert__deactivator icon icon--close">
                                    <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>

Alert Documentation

Use

Content should be limited to a couple of sentences

Variations

To specify the alert type please use the CSS class alert--{ NAME OF ALERT TYPE } as a modifier to the alert class

Location

Styling for the specific alert locations within a template still needs to be developed. Linkly using position: fixed;