Page alerts

v3.0.0

Page alerts are used to notify users of important information or changes on a page, in a way that attracts the user's attention without interrupting the user's task. Typically they appear at the top of a page following a submit action.

Released

History
View changes
Install
npm i @gold.au/page-alerts
Tags
Requires
Contributors
  • Patrick De Young avatar picture
  • Alex Page avatar picture
  • Trevor Brennan avatar picture
  • Dominik Wilkowski avatar picture
  • Julian Fleetwood avatar picture
  • Gary Broadbent avatar picture
  • Simon Pascal Klein avatar picture

Info

Page alerts are intended for important time-sensitive information only and should be used sparingly.

Example

<!--
  Light:      <div class="au-page-alerts au-page-alerts--info">
  Light Alt:  <div class="au-page-alerts au-page-alerts--info au-page-alerts--alt">
  Dark:       <div class="au-body au-body--dark au-page-alerts au-page-alerts--info au-page-alerts--dark >
  Dark Alt:   <div class="au-body au-body--dark au-body--alt au-page-alerts au-page-alerts--info au-page-alerts--dark au-page-alerts--alt">
-->

<div class="au-body au-page-alerts au-page-alerts--info">
  <h3>Notice</h3>
  <p>All vacancies close on the advertised closing date unless otherwise specified.</p>
</div>

/*
  Light:      <AUpageAlert as='info'>
  Light Alt:  <AUpageAlert as='info' alt>
  Dark:       <AUpageAlert as='info' dark>
  Dark Alt:   <AUpageAlert as='info' dark alt>
*/

import AUpageAlert from '@gold.au/page-alerts';

<AUpageAlert as='info'>
 <h3>Notice</h3>
 <p>All vacancies close on the advertised closing date unless otherwise specified.</p>
</AUpageAlert>

Success

The success page alert is used for notifying the user that a task is fully completed.

Example

<!--
  Light:      <div class="au-page-alerts au-page-alerts--success">
  Light Alt:  <div class="au-page-alerts au-page-alerts--success au-page-alerts--alt">
  Dark:       <div class="au-body au-body--dark au-page-alerts au-page-alerts--success au-page-alerts--dark">
  Dark Alt:   <div class="au-body au-body--dark au-body--alt au-page-alerts au-page-alerts--success au-page-alerts--dark au-page-alerts--alt">
-->

<div class="au-body au-page-alerts au-page-alerts--success">
  <h3>Submission successful</h3>
  <p>Your application has been successfully submitted.</p>
</div>

/*
  Light:      <AUpageAlert as='success'>
  Light Alt:  <AUpageAlert as='success' alt>
  Dark:       <AUpageAlert as='success' dark>
  Dark Alt:   <AUpageAlert as='success' dark alt>
*/

import AUpageAlert from '@gold.au/page-alerts';

<AUpageAlert as='success'>
  <h3>Submission successful</h3>
  <p>Your application has been successfully submitted.</p>
</AUpageAlert>

Error

The error page alert should be used with form validation errors or other errors which will block the user from completing their task.

Example

<!--
  Light:      <div class="au-page-alerts au-page-alerts--error">
  Light Alt:  <div class="au-page-alerts au-page-alerts--error au-page-alerts--alt">
  Dark:       <div class="au-body au-body--dark au-page-alerts au-page-alerts--error au-page-alerts--dark >
  Dark Alt:   <div class="au-body au-body--dark au-body--alt au-page-alerts au-page-alerts--error au-page-alerts--dark au-page-alerts--alt">
-->

<div class="au-body au-page-alerts au-page-alerts--error">
  <h3>There is a problem</h3>
  <ul>
      <li><a href="#">Full name must not be empty</a></li>
      <li><a href="#">Email must not be empty</a></li>
      <li><a href="#">Description must not be empty</a></li>
  </ul>
</div>

/*
  Light:      <AUpageAlert as='error'>
  Light Alt:  <AUpageAlert as='error' alt>
  Dark:       <AUpageAlert as='error' dark>
  Dark Alt:   <AUpageAlert as='error' dark alt>
*/

import AUpageAlert from '@gold.au/page-alerts';

<AUpageAlert as='error'>
  <h3>There is a problem</h3>
  <ul>
      <li><a href="#">Full name must not be empty</a></li>
      <li><a href="#">Email must not be empty</a></li>
      <li><a href="#">Description must not be empty</a></li>
  </ul>
</AUpageAlert>

Warning

Use warning page alerts to tell the user something urgent. Only use an alert if the information will help the user avoid a problem.

Example

<!--
  Light:      <div class="au-page-alerts au-page-alerts--warning">
  Light Alt:  <div class="au-page-alerts au-page-alerts--warning au-page-alerts--alt">
  Dark:       <div class="au-body au-body--dark au-page-alerts au-page-alerts--warning au-page-alerts--dark >
  Dark Alt:   <div class="au-body au-body--dark au-body--alt au-page-alerts au-page-alerts--warning au-page-alerts--dark au-page-alerts--alt">
-->

<div class="au-body au-page-alerts au-page-alerts--warning">
  <h3>Browser out of date</h3>
  <p>Your web browser is out of date.</p>
</div>

/*
  Light:      <AUpageAlert as='warning'>
  Light Alt:  <AUpageAlert as='warning' alt>
  Dark:       <AUpageAlert as='warning' dark>
  Dark Alt:   <AUpageAlert as='warning' dark alt>
*/

import AUpageAlert from '@gold.au/page-alerts';

<AUpageAlert as='warning'>
  <h3>Browser out of date</h3>
  <p>Your web browser is out of date.</p>
</AUpageAlert>

Feedback