Inline alert

Users browse pages, scanning quickly for useful or interesting information. If important information is buried within the page content, users can easily miss it.

Inline alerts will always be close to the content it is referring to. They should be used to deliver important applicable information or caution information to users for a specific content.


Component data

Component resources:
SCSS files

Functional grouping: Status and alerts

Demo

Configure: select the dropdowns below to display the variety of options that an inline alert supports.

Select inline alert type:

  • Caution
  • Important information

Display CTA:

  • Hide
  • Show

Code


				
			

Responsive preview

Usage best practices

Alert title:

  • should be concise and descriptive - avoid long sentences
  • recommended character limit is 50
  • include the alert type prior to the title i.e. “Caution | Your message here.”

Alert description:

  • message should contain further details
  • recommended character limit is 255

Call to action:

  • allows users to take further action on the notification
  • ensure the text is concise and direct

Alert icon:

  • serves as a visual cue to correlate with an alert type

Inline alerts can be full page width or constrained by grid columns. For site-wide/critical alerts, use global alert.

Consider using inline alerts for:

  • important information regarding specific content or task(s) on the page
  • information users should read before proceeding but is not critical for them to read

Usage examples:

  • notice of service outage
  • instructions for applications
Banner options
Class name Colour Recommended icon Usage
"caution" yellow

 cicon-exclamation-triangle

Urgent information and/or major disruptions to something specific to a service. Alert users to exercise care or attention regarding specific information. Example:

  • important health and safety information
"information" blue

 cicon-exclamation-circle

Highlight crucial details that users need to know regarding to something specific on a page. Example:

  • location closure announcement

Do

Make sure to choose the right alert type, using the wrong type can confuse users.

Check weekly to see if it can be taken down. Update information accordingly.

Keep the title and description clear and concise so users understand why the information is important and the action(s) to take.

Include the alert type prior to the title i.e. "Caution" or "Information".

Place alerts inline with the related content such as form fields.

Guide the user towards a next step with a call to action button if there are any to be taken.

Make sure the alert will always have a context, placing it in the wrong location can confuse users or make users ignore the message.

Don't

Do not use more than 1  call to action or links, which can distract or confuse users.

Do not use more than 3 inline alerts on a page. This can confuse users about which information is more important and can clutter the page.

Do not write messages that are ambiguous or unhelpful for users. An alert that says 'System is down' without providing specifics or guidance is ineffective.

Do not use to display error messages. Example, do not use for an inline error validation on form inputs. Use an error message or error summary instead.

Do not use to Highlighting content, quotes, examples, snippets of information. Use a callout instead.

Do not use to display popular content, not to call for attention on a specific topic of the page.

Don't stack alert banners. If a new alert banner appears with a higher priority message, it should replace an existing alert banner of lesser importance until the higher priority one has been addressed