System notification

Ask a question Design guidelines

Summary

The system notification pattern is used when an application instance encounters an error that prevents normal usage of the application. System notifications are a composition of the page layout and page content patterns, with purpose-built extensions for content legibility and progressive disclosure of information.

Status

API status: general
Web resource key: com.atlassian.auiplugin:aui-page-layout
AMD Module key: N/A
Experimental API: 5.7
General API: 6

Examples

Down for maintenance

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

Last updated
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.

Demo code
​x
 
<body 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>
            <time datetime="2013-11-28T11:52+1100">11:52 AEST, November 28 2013</time>
        </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" hidden>
            <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>
</body>