Page alerts

Skip to main guidance


        
        
            <!-- Default -->
<div class="ontario-alert ontario-alert--informational">
    <div class="ontario-alert__header">
        <div class="ontario-alert__header-icon">
            <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                <use href="#ontario-icon-alert-information"></use>
            </svg>
        </div>
        <h2 class="ontario-alert__header-title ontario-h4">Licence plates</h2>
    </div>
    <div class="ontario-alert__body">
        <p>ServiceOntario centres may issue either a blue licence plate or a white embossed ‘Yours to Discover’ licence
            plate depending on availability. <a href="#">Learn more about replacing a licence plate</a>.</p>
    </div>
</div>


        
            <!-- Warning -->
<div class="ontario-alert ontario-alert--warning">
    <div class="ontario-alert__header">
        <div class="ontario-alert__header-icon">
            <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                <use href="#ontario-icon-alert-warning"></use>
            </svg>
        </div>
        <h2 class="ontario-alert__header-title ontario-h4">Service wait times</h2>
    </div>
    <div class="ontario-alert__body">
        <p>We are experiencing longer than normal wait times at this ServiceOntario centre. You can <a href="#">check out our Service Finder</a> to see if the service you need is offered online or at a different centre nearby.</p>
    </div>
</div>


        
            <!-- Success -->
<div class="ontario-alert ontario-alert--success">
    <div class="ontario-alert__header">
        <div class="ontario-alert__header-icon">
            <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                <use href="#ontario-icon-alert-success"></use>
            </svg>
        </div>
        <h2 class="ontario-alert__header-title ontario-h4">Your order is complete</h2>
    </div>
    <div class="ontario-alert__body">
        <p>Your payment was successful. Please look out for an email confirmation with your receipt and order number. Your licence plate sticker
            should arrive in 2–4 weeks.</p>
    </div>
</div>


        
            <!-- Error -->
<div class="ontario-alert ontario-alert--error">
    <div class="ontario-alert__header">
        <div class="ontario-alert__header-icon">
            <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
                <use href="#ontario-icon-alert-error"></use>
            </svg>
        </div>
        <h2 class="ontario-alert__header-title ontario-h4">There is a problem</h2>
    </div>
    <div class="ontario-alert__body">
        <p>Errors were found on this page:</p>
        <ul>
            <li><a href="#">Your licence plate number must be a valid plate number</a></li>
            <li><a href="#">The odometer reading must be a valid number</a></li>
            <li><a href="#">The name field must not be empty</a></li>
        </ul>
    </div>
</div>

Content:


                                @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;

.ontario-alert {
	border-width: 0 0 0 4px;
	border-style: solid;
	padding: spacing.$spacing-5;
	margin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-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: breakpoints.$small-breakpoint) {
			width: 32px;
			height: 32px;
		}
	}
}

.ontario-alert__header-title {
	margin-bottom: spacing.$spacing-3;
	padding-top: 2px;
}

.ontario-alert__body {
	margin-left: 3.25rem;
	max-width: globalVariables.$standard-width;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		margin-left: 0;
	}
}

.ontario-alert__body p {
	margin-top: spacing.$spacing-0;

	&:last-of-type {
		margin-bottom: spacing.$spacing-2;
	}
}

.ontario-alert__body p:last-of-type + ul {
	margin-top: spacing.$spacing-4;
}

.ontario-alert__body ul:last-of-type {
	margin-bottom: spacing.$spacing-2;
}

.ontario-alert--error ul {
	margin-left: 1.25rem;
}

.ontario-alert--error ul:last-of-type {
	margin-bottom: spacing.$spacing-2;
}

// ---------------------
//    Alert variations
// ---------------------
// informational alert
.ontario-alert--informational {
	border-color: colours.$ontario-colour-information;
	background-color: colours.$ontario-colour-information-light;
}

.ontario-alert--informational svg {
	fill: colours.$ontario-colour-information;
}

// warning alert
.ontario-alert--warning {
	border-color: colours.$ontario-colour-warning;
	background-color: colours.$ontario-colour-warning-light;
}

.ontario-alert--warning svg {
	fill: colours.$ontario-colour-warning;
}

// success alert
.ontario-alert--success {
	border-color: colours.$ontario-colour-success;
	background-color: colours.$ontario-colour-success-light;
}

.ontario-alert--success svg {
	fill: colours.$ontario-colour-success;
}

// error alert
.ontario-alert--error {
	border-color: colours.$ontario-colour-alert;
	background-color: colours.$ontario-colour-alert-light;
}

.ontario-alert--error svg {
	fill: colours.$ontario-colour-alert;
}

.ontario-alert--error a {
	color: colours.$ontario-colour-alert;

	&:hover,
	&:focus {
		color: #6b0000;
	}

	&:active {
		color: #280000;
	}
}

URL: /components/raw/page-alerts/page-alerts.scss
Filesystem Path: fractal/components/components/system-feedback/page-alerts/page-alerts.scss
Size: 2.8 KB

Content:


                                .ontario-alert{border-width:0 0 0 4px;border-style:solid;padding:1.5rem;margin:2rem 0 2.5rem 0}.ontario-alert__header{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}

URL: /components/raw/page-alerts/page-alerts.css
Filesystem Path: fractal/components/components/system-feedback/page-alerts/page-alerts.css
Size: 1.5 KB

When to use this component

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:

bring a user’s attention to important page information or system status
communicate the result of a user action (for example, error or success)

Do not use page alerts to simply add emphasis or highlight content – use callouts and asides instead.

How page alerts work

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.

Types of page alerts

There are four main types of page alerts:

Information
Warning
Success
Error

Information

Use information alerts for important time-sensitive information. For example, important dates, recent content updates, new policies or email confirmation.

Warning

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

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

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.

Best practices

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.

Do:

try to limit to one alert per page
write concise headings and copy totalling a max of 280 characters
page alerts must include headings that clearly convey the purpose of the alert (for example, “Warning”)

Don’t:

use page alerts just for styling regular content (for emphasis or highlighting)
include alerts that are not related to the user’s current goal.

If you have any questions or feedback, please get in touch.