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 or form following a submit action.
Note: These alerts should not be confused with Callouts which are for static use on standard content pages to draw attention to a particular piece of content.
Alerts on the other hand are typically used to provide feedback to user interaction such as submitting a form or making a selection.
Alerts are commonly used within forms.
Info alerts may be present on page load or injected to provide information pertinent to a specific user selection.
Alerts are usually single lined.
<div class="ds-block">
<div class="ds-alert ds-alert--info" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="8"></line></svg>
</div>
<div class="ds-alert__text">
<p>You will be required to bring along <a href="https://www.housing.vic.gov.au/proof-identity">100 points of identification</a></p>
</div>
</div>
</div>Alerts can also be multiline and start with a heading. First heading should follow page outline, but if this can't be deteremined start with h3. Heading sizes are stepped down in alerts.
<div class="ds-block">
<div class="ds-alert ds-alert--info" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="8"></line></svg>
</div>
<div class="ds-alert__text">
<h3>Notice</h3>
<p>All vacancies close on the advertised closing date unless otherwise specified.</p>
</div>
</div>
</div>An info alert may be combined with a collapse where there is a need to provide supplemetary information or many optional links to follow.
<div class="ds-block">
<div class="ds-alert ds-alert--info" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="8"></line></svg>
</div>
<div class="ds-alert__text">
<p>You will be required to bring along <button class="ds-btn-link ds-icon-chevron-down ds-collapse__trigger" aria-controls="further1" aria-expanded="false" >100 points of identification</button></p>
</div>
<div id="further1" class="ds-collapse__content" role="region" hidden>
<p>Primary documents</p>
<ul>
<li>Australian birth certificate - 70 points</li>
<li>Australian citizenship certificate - 70 points</li>
<li>Australian residency status certificate - 70 points</li>
</ul>
</div>
</div>
</div>Success, error and warning alerts are usually not present on the page on load but injected upon user action (unless submit action takes user to new page where alert is loaded - eg success alert to say “Your application has been submitted”).
Use modifiers ds-alert--success, ds-alert--error, ds-alert--warning and swap out icon svg for these versions.
The success page alert is used for notifying the user that a task is fully completed.
<div class="ds-block">
<div class="ds-alert ds-alert--success" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
</div>
<div class="ds-alert__text">
<p>Your application is complete, and your documentation is in review</p>
</div>
</div>
</div><div class="ds-block">
<div class="ds-alert ds-alert--success" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
</div>
<div class="ds-alert__text">
<h4>Your application is complete, and your documentation is in review.</h4>
<p>It may take 2-3 work days for uploaded documents to be reviewed. If your documents are rejected, it will appear as "Rejected" in the list below. We will advise the reason over email and what you need to do to ensure the documents are accepted.</p>
</div>
</div>
</div>The error page alert should be used with form validation errors or other errors which will block the user from completing their task.
<div class="ds-block">
<div class="ds-alert ds-alert--error" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
</div>
<div class="ds-alert__text">
<p>There was a problem with your application submission</p>
</div>
</div>
</div><div class="ds-block">
<div class="ds-alert ds-alert--error" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
</div>
<div class="ds-alert__text">
<h3 class="h4">There was a problem with your application submission</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>
</div>
</div>Use warning page alerts to tell the user something urgent. Only use an alert if the information will help the user avoid a problem.
<div class="ds-block">
<div class="ds-alert ds-alert--warning" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg>
</div>
<div class="ds-alert__text">
<p>Browser out of date</p>
</div>
</div>
</div><div class="ds-block">
<div class="ds-alert ds-alert--warning" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg>
</div>
<div class="ds-alert__text">
<h3 class="h4">Browser out of date</h3>
<p>Your web browser is out of date <a href="https://browsehappy.com/">update to a modern browser</a> to improve your experience.</p>
</div>
</div>
</div>You can add a close button to alerts to allow user to dismiss them.
Note: The standard JS only removes the alert from the DOM. So if you place this alert on page load it will reappear.
<div class="ds-block">
<div class="ds-alert ds-alert--info" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="8"></line></svg>
</div>
<div class="ds-alert__text">
<p>Notice</p>
</div>
<button class="ds-alert__close" aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div><div class="ds-block">
<div class="ds-alert ds-alert--success" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
</div>
<div class="ds-alert__text">
<p>Your application is complete, and your documentation is in review</p>
</div>
<button class="ds-alert__close" aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div><div class="ds-block">
<div class="ds-alert ds-alert--error" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
</div>
<div class="ds-alert__text">
<p>There was a problem with your application submission</p>
</div>
<button class="ds-alert__close" aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div><div class="ds-block">
<div class="ds-alert ds-alert--warning" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg>
</div>
<div class="ds-alert__text">
<p>Browser out of date</p>
</div>
<button class="ds-alert__close" aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>Use ds-alert--centered modifier to center the alert.
<div class="ds-block">
<div class="ds-alert ds-alert--info ds-alert--centered" role="alert">
<div class="ds-alert__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="8"></line></svg>
</div>
<div class="ds-alert__text">
<p>Study online now and on campus later. <button class="ds-btn-link ds-icon-chevron-down ds-collapse__trigger" aria-controls="further1" aria-expanded="false" >Read more</button></p>
</div>
<div id="further1" class="ds-collapse__content" role="region" hidden>
<p>The world is transforming, and so are we.</p><p>For <strong>international students</strong> we’ve launched a new term structure. From July, these terms will commence every six weeks, so international students can begin studying online now and be ready to join us on campus once borders reopen. Learn more about <a href="https://www.latrobe.edu.au/international/international-terms">enrolment and eligible courses</a>.</p><p>For <strong>domestic students</strong>, application for Semester 2 is open now. As the COVID-19 response evolves, the courses we offer, and how we offer them, may need to adapt. We now have <a href="https://www.latrobe.edu.au/study/apply/terms">more start dates</a> than ever. <a href="https://www.latrobe.edu.au/study/one-on-one-consultations">Book a consultation</a>, or call us if anything is unclear and we’ll be happy to help.</p><p>As the COVID-19 situation evolves, the courses we offer, and how we offer them will need to adapt. We continue to implement a COVID-Safe process that is guided by the Victorian Government. While we are working towards a gradual return to face-to-face activity at our campuses, we expect most learning activity will continue to be delivered online for the remainder of this year.</p>
</div>
</div>
</div>