Taxonomic name: M-CARD-NOTIFICATION
Added on: v3.0.0 (15/09/17)
Updated on: v5.10.0 (10/08/21)

Notification patterns

Notifications are used to provide various notifications to a user, for example the successful update of details. They are available in various forms, including full-width straps, inset cards and toggles, to cover various use cases.

Design and usage

Notification classifications (for all variants)

Green: positive - an action has been successfully completed
Blue: neutral - an informational update
Amber: information / mild warning - a functional update which does not require the user to take action
Red: warning - an action is required from the user to proceed, such as an error messages
Grey: inactive / retired - used for notification tags only, this is to indicate inactive / retired / disabled options

Notification message (for all variants)

Always ensure that the wording of the actual notification message itself clearly conveys its severity; this is in order to aid user comprehension and to assist where colour visibility could be an issue for particular users

Full width notifications

Site level notifications should be used for things affecting the whole website or experiece, eg the website is unavilable, or for the CoVId19 information message
Page level notifications should be used for issues affecting the current page only, eg some information may not be available at this time, or the details on this page are currently being reviewed
Site level notifications are placed above the global masthead; page level notifications are placed below the global masthead
Must always appear on a white background
Optional close functionality
Optional heading inclusion

Standard inline notifications

Should be used to bring important information to a user's attention, or to indicate statuses of ongoing processes
Placed inline within normal content area
Optional close functionality
Optional heading inclusion
Optional colour background (for use on white backgrounds only)
Options available to use on light and dark accent colours

Notification modals

Used for interrupting a journey e.g. a warning or a confirmation
Appear within a standard modal
Must always contain a CTA and only be closable when this is actioned
White backgrounds only

Notification tags

Smaller, succinct variants which should be used to colour code any content they are grouped with
Used for at-a-glance prompts, for example to indicate a policy is near expiry or has expired
Always have coloured background
Can be used on light and dark accent colours

Examples

Site level notifications (full-width, placed above global nav)

Interactive example

Code example

<header>
	<p class="o-masthead-main-content"><a href="#main">Skip to content</a></p>
	<div class="m-card-notification-wrapper">
		<div class="m-card-notification-wrapper__inner">
			<div class="m-card m-card-notification [ Modifiers ]" role="status">
				<div class="m-card-content">
					<div class="m-card-content__inner">
						<p>...</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- o-masthead markup here -->
</header>

Page level notifications (full-width, placed below global nav)

Interactive example

Code example

<div id="#main" class="l-main-content" role="main">
	<div class="m-card-notification-wrapper m-card-notification-wrapper--page">
		<div class="m-card-notification-wrapper__inner">
			<div class="m-card m-card-notification [ Modifiers ]" role="status">
				<div class="m-card-content__inner">
					<p>...</p>
				</div>
			</div>
		</div>
	</div>
...

Standard notifications (placed inline within normal content area)

Interactive example

Code example

Standard inline notification

<div class="m-card m-card-notification [ Modifiers ]" role="status">
	<div class="m-card-content">
		<div class="m-card-content__inner">
			<p>...</p>
		</div>
	</div>
</div>

Standard inline notification with close functionality

<div class="m-card m-card-notification [ Modifiers ]" role="status" data-module="m-card-close">
	<div class="m-card-content">
		<div class="m-card-content__inner">
			<p>...</p>
		</div>
	</div>
</div>

Notification tags

Interactive example

Code example

<p class="a-notification-tag [ Modifiers ]">...</p>

Notification modal

Interactive example

Code example

Notification modals use the same markup as standard modals with the addition of the data-modal-notification attribute, which should be marked with the appropriate class as per other notification patterns, ie 'success', 'neutral', 'information', 'warning' or 'inactive'; using the right class ensures the correct icon is used within the modal.

<button href="..." class="a-button" data-module="o-modal" data-module-load="true" data-modal-notification="...">...</button>

<div id="..." class="o-modal__content-container">
	<--Standard modal content, for example:-->
	<h2 class="a-heading a-heading--2">...</h2>
	<p class="a-heading a-heading--3">...</p>
	<p>...</p>
	<ul class="m-button-group">
		<li class="m-button-group__item">
			<button class="a-button a-button--cancel a-button--primary" type="button">...</button>
		</li>
		<li class="m-button-group__item">
			<button class="a-button a-button--cancel" type="button">...</button>
		</li>
	</ul>
</div>

Development and test

Notes for developers

Notification cards must always use the light accent colour classes t-accent-light t-accent-light--1 to retain content colours on any accent colours (except for optional colour background cards, which are always placed on white backgrounds only).

Ensure the data-module m-card-close is present on the m-card-notification if you wish the card to be closed by the user.

Important messages

To help those using assistive technologies, make sure that success/error messages which need to be announced to users have their aria attributes updated to role="alert" and/or aria-live="assertive".

Controling notification cards programatically

Notification cards with close link can be controlled programatically to close them. The following method is available for use:

Method	Description
`close()`	Close the notification card.

For example:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-card-close' ], function ( mCardCloseModule ) {
		var mCardCloseEl = document.querySelector( '#cardId' ),
			mCardCloseInstance = mCardCloseModule.initInstance( mCardCloseEl );		mCardCloseInstance.close();
	});
});

Changing locale settings

The default close text for the close link can be changed for a particular locale.

en: {
	mCardNotification : { closeText : 'Close' },
},

For more information on this, see our page on how to change locale settings within JavaScript.

Notes for testers

Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard
Use a screen reader to confirm that the links are understandable as to where they will be going when listed out of context of the page
Ensure that when hovering over a link the style changes noticeably.
Ensure that when a link has focus the style changes noticeably.
Ensure that text within links is descriptive of what or where the link is going. Additional text descriptive text can be hidden visually from the user to aid in make the link understandable especially if there area number of links such as "Find out more" on the page which go to different locations.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class	Outcome	Required	Applied to	Comments
`.m-card`	Base style for card	Yes	`div`
`.m-card-notification`	Base styling for notification card	Yes	`.m-card`
`.m-card-notification--success`	Modifier for success notification card		`.m-card-notification`
`.m-card-notification--neutral`	Modifier for neutral notification card		`.m-card-notification`
`.m-card-notification--information`	Modifier for information/mild warning notification card		`.m-card-notification`
`.m-card-notification--warning`	Modifier for warning notification card		`.m-card-notification`
`.m-card-notification--background-colour`	Modifier for adding background colours to cards		`.m-card-notification`	Use with corresponding icon class `.m-card-notification--success` `.m-card-notification--neutral` `.m-card-notification--information` `.m-card-notification--warning`
`.m-card-content`	Base style for the text section of card	Yes	`.m-card > div`
`.m-card-content__inner`	Wrapper class for the main part of the card content section	Yes	`.m-card-content > div`
`.m-card-notification-wrapper`	Wrapper for site and page level notification cards		`div`
`.m-card-notification-wrapper--page`	Modifier class for page level notification cards		`.m-card-notification-wrapper`
`.m-card-notification-wrapper__inner`	Wrapper inner class for site and page level notification cards		`.m-card-notification-wrapper > div`
`.a-notification-tag`	Style for value bar status badge		`.m-value-bar-wrapper > p`	Styles the value bar status badge when used
`.a-notification-tag--success`	Modifier style for value bar status badge - active		`.a-notification-tag`	Indicates status of the value bar badge when used in complex/comprehensive molecule
`.a-notification-tag--neutral`	Modifier style for value bar status badge - neutral		`.a-notification-tag`	Indicates status of the value bar badge when used in complex/comprehensive molecule
`.a-notification-tag--information`	Modifier style for value bar status badge - expiring		`..a-notification-tag`	Indicates status of the value bar badge when used in complex/comprehensive molecule
`.a-notification-tag--warning`	Modifier style for value bar status badge - expired		`.a-notification-tag`	Indicates status of the value bar badge when used in complex/comprehensive molecule
`.a-notification-tag--inactive`	Modifier style for value bar status badge - retired		`.a-notification-tag`	Indicates status of the value bar badge when used in complex/comprehensive molecule
`.a-notification-tag--favorite`	Modifier style for value bar status badge - add a ★ instead of ✓ / i / !		`.a-notification-tag`	To be used with a modifier such as .a-notification-tag--success
`.a-notification-tag--small`	Modifier style for value bar status badge - make it smaller		`.a-notification-tag`	To be used with a modifier such as .a-notification-tag--success
`.a-notification-tag--simple`	Modifier style for value bar status badge - make it simpler		`.a-notification-tag`	To be used with a modifier such as .a-notification-tag--success

Keyboard operations

TAB: Tabbing to an anchor should make the link clearly visually different so that the focus point on the page is obvious to the user
SPACE or ENTER: With focus on an anchor, pressing SPACE or ENTER will close the card.

Component releases

Added on: v3.0.0 (15/09/17)
Updated on: v5.10.0 (10/08/21)

Latest update:

updated: aria-live="polite" has been removed from the notification card as this function is already performed for screenreaders by role="status"
updated: Notification cards with close link can now be controlled programatically to close them.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team