Alerts (in page)

Page alerts are used to notify users about important information or changes on a page. They attract the user's attention without interrupting their task. They usually appear at the top of a page following a submit action.

Information

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

Vanilla example

Palette

Default
Light
Alt
Dark
Dark-alt

Alert title

Alert content and link

<div class="qld__page-alerts qld__page-alerts--info">
                <div class="qld__page-alerts--heading qld__display-lg">Alert title</div>
                <div><p>Alert content and <a href="www.google.com">link</a></p></div>
        </div>

Success

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

Vanilla example

Palette

Default
Light
Alt
Dark
Dark-alt

Alert title

Alert content and link

<div class="container-fluid">
        <div class="qld__page-alerts qld__page-alerts--success">
                <div class="qld__page-alerts--heading qld__display-lg">Alert title</div>
                <div><p>Alert content and <a href="www.google.com">link</a></p></div>
        </div>
    </div>

Error

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

Vanilla example

Palette

Default
Light
Alt
Dark
Dark-alt

Alert title

Alert content and link

<div class="container-fluid">
        <div class="qld__page-alerts qld__page-alerts--error">
                <div class="qld__page-alerts--heading qld__display-lg">Alert title</div>
                <div><p>Alert content and <a href="www.google.com">link</a></p></div>
        </div>
    </div>

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.

Vanilla example

Palette

Default
Light
Alt
Dark
Dark-alt

Alert title

Alert content and link

<div class="container-fluid">
        <div class="qld__page-alerts qld__page-alerts--error">
                <div class="qld__page-alerts--heading qld__display-lg">Alert title</div>
                <div><p>Alert content and <a href="www.google.com">link</a></p></div>
        </div>
    </div>

Last updated: April 2026