Use a page alert to notify users of important information or changes on a page.
@import "../../../../theme/assets/styles/sass/variables-import";
.ontario-alert {
border-width: 0 0 0 4px;
border-style: solid;
padding: $spacing-5;
margin: $spacing-6 0 $spacing-7 0;
}
.ontario-alert__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ontario-alert__header-icon {
display: inline-block;
vertical-align: top;
margin-right: 0.95rem;
svg {
width: 36px;
height: 36px;
@media screen and (max-width: $small-breakpoint) {
width: 32px;
height: 32px;
}
}
}
.ontario-alert__header-title {
margin-bottom: $spacing-3;
padding-top: 2px;
}
.ontario-alert__body {
margin-left: 3.25rem;
max-width: 48rem;
@media screen and (max-width: $small-breakpoint) {
margin-left: 0;
}
}
.ontario-alert__body p {
margin-top: $spacing-0;
&:last-of-type {
margin-bottom: $spacing-2;
}
}
.ontario-alert__body p:last-of-type + ul {
margin-top: $spacing-4;
}
.ontario-alert__body ul:last-of-type {
margin-bottom: $spacing-2;
}
.ontario-alert--error ul {
margin-left: 1.25rem;
}
.ontario-alert--error ul:last-of-type {
margin-bottom: $spacing-2;
}
// ---------------------
// Alert variations
// ---------------------
// informational alert
.ontario-alert--informational {
border-color: $ontario-colour-information;
background-color: $ontario-colour-information-light;
}
.ontario-alert--informational svg {
fill: $ontario-colour-information;
}
// warning alert
.ontario-alert--warning {
border-color: $ontario-colour-warning;
background-color: $ontario-colour-warning-light;
}
.ontario-alert--warning svg {
fill: $ontario-colour-warning;
}
// success alert
.ontario-alert--success {
border-color: $ontario-colour-success;
background-color: $ontario-colour-success-light;
}
.ontario-alert--success svg {
fill: $ontario-colour-success;
}
// error alert
.ontario-alert--error {
border-color: $ontario-colour-alert;
background-color: $ontario-colour-alert-light;
}
.ontario-alert--error svg {
fill: $ontario-colour-alert;
}
.ontario-alert--error a {
color: $ontario-colour-alert;
&:hover,
&:focus {
color: #6B0000;
}
&:active {
color: #280000;
}
}
.ontario-alert{border-width:0 0 0 4px;border-style:solid;padding:1.5rem;margin:2rem 0 2.5rem 0}.ontario-alert__header{display:-webkit-box;display:-webkit-flex;display:flex}.ontario-alert__header-icon{display:inline-block;vertical-align:top;margin-right:.95rem}.ontario-alert__header-icon svg{width:36px;height:36px}@media screen and (max-width: 40em){.ontario-alert__header-icon svg{width:32px;height:32px}}.ontario-alert__header-title{margin-bottom:.75rem;padding-top:2px}.ontario-alert__body{margin-left:3.25rem;max-width:48rem}@media screen and (max-width: 40em){.ontario-alert__body{margin-left:0}}.ontario-alert__body p{margin-top:0}.ontario-alert__body p:last-of-type{margin-bottom:.5rem}.ontario-alert__body p:last-of-type+ul{margin-top:1rem}.ontario-alert__body ul:last-of-type{margin-bottom:.5rem}.ontario-alert--error ul{margin-left:1.25rem}.ontario-alert--error ul:last-of-type{margin-bottom:.5rem}.ontario-alert--informational{border-color:#1080a6;background-color:#e2f0f4}.ontario-alert--informational svg{fill:#1080a6}.ontario-alert--warning{border-color:#ffd440;background-color:#fef6dc}.ontario-alert--warning svg{fill:#ffd440}.ontario-alert--success{border-color:#118847;background-color:#e5f0e9}.ontario-alert--success svg{fill:#118847}.ontario-alert--error{border-color:#cd0000;background-color:#fceff0}.ontario-alert--error svg{fill:#cd0000}.ontario-alert--error a{color:#cd0000}.ontario-alert--error a:hover,.ontario-alert--error a:focus{color:#6b0000}.ontario-alert--error a:active{color:#280000}
Page alerts contain time-sensitive pieces of information and typically appear at the top of a page to capture the user’s attention.
Use page alerts to:
Do not use page alerts to simply add emphasis or highlight content – use callouts and asides instead.
Page alerts occur after a change of context. For example, when a user clicks a link or submits a form, launching a new page or an updated view.
Success and error summary alerts are used following a form submission. When the new page or view is first loaded, ensure that focus is moved to the success or error summary alert. Screen readers will then announce the alert, letting the user know the status of their form submission and what to do next.
The HTML title element should also start with copy that indicates the status (for example, “Success:” or “Error:” or “There is a problem:”) to ensure feedback is provided in the page’s name.
There are four main types of page alerts:
Use information alerts for important time-sensitive information. For example, important dates, recent content updates, new policies or email confirmation.
Warning alerts tell the user something urgent or help the user avoid a problem. For example, travel information, content trigger warnings or location closures.
Success alerts should be used to tell the user that the action was successful. Use them for confirmation messaging as a user moves through a web form. For example, when a payment has been successfully processed in a transaction.
Error alerts tell users that the action was unsuccessful or that there was a validation error upon submission of a form. For example, a user incorrectly completes a field and the system does not allow the user to complete the task upon submission unless the errors are fixed.
Page alerts are typically at the top of the page and above the main body content. In some cases, there might be an alert needed for a particular section of a page - in this case, place the alert next to impacted points of service or information.
If a user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible, for example by providing a link.
If you have other suggestions or advice or any questions on page alerts, the design system team would love to hear from you.