Government of Ontario
Français

Design System

Page alerts

In progress

Use a page alert to notify users of important information or changes on a page.

  • Content: 
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ontario-digital-service/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/alerts-highlights/page-alerts/page-alerts.scss
  • Size: 2.9 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/alerts-highlights/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

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”)

Do not:

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

Contact us

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