AUI Documentation

System notifications

Ask a question Design guidelines

Summary

Replaces electric Charlie for when there is an error or issue with an instance. System notifications are another type of page layout and therefore rely on layout and page content layout classes.

Status

API status: experimental
Included in AUI core? Not in core You must explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:aui-page-layout
AMD Module key: N/A
Experimental since: 5.7

Examples

Down for maintenance

EAC is being upgraded and should be back online by 6:00pm Sydney time.

Last updated 11:52 AEST, November 28 2013
Show detailed error message

Code

System notifications are used to report an instance error or incident. This includes things from 404s to 500s and something as innocent as an instance upgrade. It provides a hook for users to subscribe to email updates and contains a way to provide a more detailed log of the issue.

HTML

System notifications is a page layout so you must pay special attention to the upper level classes such as aui-page-notification, aui-page-size-medium, aui-page-panel, aui-page-panel-inner and aui-page-panel-content. All of these are required to render the system notifications page correctly.

<section id="content-example" role="main" class="aui-page-notification aui-page-size-medium">
    <div class="aui-page-panel">
        <div class="aui-page-panel-inner">
            <section class="aui-page-panel-content">
                <h1>Down for maintenance</h1>
                <div class="aui-page-notification-description">
                    <p><strong>EAC is being upgraded</strong> and should be back online by 6:00pm Sydney time.</p>
                </div>
                <form action="#" method="post" id="d" class="aui top-label">
                    <div class="field-group">
                        <input class="text" type="text" id="d-email" aria-label="Email address" name="d-email" title="email" placeholder="Enter your email address">
                        <input class="aui-button aui-button-primary" type="submit" id="submit" name="submit" value="Subscribe to updates">
                    </div>
                </form>
            </section>
        </div>
    </div>

    <div class="aui-page-notification-details">
        <div class="aui-page-notification-details-header">
            <strong>Last updated</strong> 11:52 AEST, November 28 2013
        </div>

        <div class="aui-page-notification-details-header">
            <div class="aui-page-notification-details-header-expander">
                <a id="more-details-trigger-1" data-replace-text="Hide detailed error message" class="aui-expander-trigger" aria-controls="more-details-content">Show detailed error message</a>
            </div>
        </div>

        <div id="more-details-content" class="aui-page-notification-details-content aui-expander-content" aria-expanded="false" aria-hidden="true">
            <h2>very issue</h2>
            <h3>wow</h3>
            <p>such problems</p>
            <h3>much inform</h3>
            <p>how fix?</p>
            <h3>many stacktrace</h3>
            <p>oh wow</p>
        </div>
    </div>
</section>
View cookie preferences