Blue help bar

The blue help bar provided easy access to important features such as contact details.

Design and usage

It can be used to display chat options, chat and call options.
In a desktop view, the full blue help bar is clickable and expands the entire section below; the footer is pushed down the page to reveal additional information.
In a mobile view, the blue help bar is split into the sections listed, which are stacked on top of each other; individual sections push the content below down to reveal additional information.
The blue help bar utilises show / hide functionality.
The blue help bar must be displayed consistently across all pages on the site.
The blue help bar sections can all be closed by a link or button from anywhere in the page if required; for information on how to achieve, this please see notes for developers.
Must not be used on dark accent colours.

Examples

Single help option

Interactive example

Code example

<div class="o-contextual-help o-contextual-help--one" data-module="o-contextual-help">
	<div class="o-contextual-help-group-heading" id="...">
		<h2 class="a-heading a-heading--2 a-heading--light">
			<span class="o-contextual-help-group-heading__option">Chat online</span>
		</h2>
	</div>
	<div class="o-contextual-help__group">
		<div class="o-contextual-help__content l-content-container">
			...
		</div>
	</div>
</div>

Two help options

Interactive example

Code example

<div class="o-contextual-help o-contextual-help--two" data-module="o-contextual-help">
	<div class="o-contextual-help-group-heading" id="...">
		<h2 class="a-heading a-heading--2 a-heading--light">
			<span class="o-contextual-help-group-heading__option">...</span>
			<span class="u-hidden--visually"> or </span>
			<span class="o-contextual-help-group-heading__option">...</span>
		</h2>
	</div>
	<div class="o-contextual-help__group">
		<h3 class="a-heading a-heading--3 a-heading--light o-contextual-help__heading" id="...">...</h3>
		<div class="o-contextual-help__content l-content-container">
			...
		</div>
		<h3 class="a-heading a-heading--3 a-heading--light o-contextual-help__heading" id="...">...</h3>
		<div class="o-contextual-help__content l-content-container">
			...
		</div>
	</div>
</div>

Three help options

Interactive example

Code example

<div class="o-contextual-help o-contextual-help--two" data-module="o-contextual-help">
	<div class="o-contextual-help-group-heading" id="...">
		<h2 class="a-heading a-heading--2 a-heading--light">
			<span class="o-contextual-help-group-heading__option">...</span>
			<span class="u-hidden--visually">, </span>
			<span class="o-contextual-help-group-heading__option">...</span>
			<span class="u-hidden--visually"> or </span>
			<span class="o-contextual-help-group-heading__option">...</span>
		</h2>
	</div>
	<div class="o-contextual-help__group">
		<h3 class="a-heading a-heading--3 a-heading--light o-contextual-help__heading" id="...">...</h3>
		<div class="o-contextual-help__content l-content-container">
			...
		</div>
		<h3 class="a-heading a-heading--3 a-heading--light o-contextual-help__heading" id="...">...</h3>
		<div class="o-contextual-help__content l-content-container">
			...
		</div>
		<h3 class="a-heading a-heading--3 a-heading--light o-contextual-help__heading" id="...">...</h3>
		<div class="o-contextual-help__content l-content-container">
			...
		</div>
	</div>
</div>

Development and test

Notes for developers

Set the IDs for each of the individual headings to match what content is being displayed, eg. "Call us" could be conthelp-callus; these IDs enable the sections to be linked to and automatically opened if required.

Make sure that the hidden text within the o-contextual-help-group-heading is updated appropriately for the locale this module is being used in.

The blue help bar sections can be closed by a link or button anywhere on the page but adding the class js-o-contextual-help-close. If the link or button does not serve any other purpose ensure that it is ideally added in via JavaScript or hidded when JavaScript is not available using the utility class u-hidden--no-js so that a non functional link is not displayed the a user.

Extension component

This component forms part of the 'hidden-help' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:

<!--[if !IE | gt IE 8]><!-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/hidden-help.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if lte IE 8]>
	<link media="all" href="[ CDN Folder Path ]/css/customer/hidden-help-unmq.css" rel="stylesheet" />
<![endif]-->

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.

Classes overview

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

Class	Outcome	Required	Applied to	Comments
`.o-contextual-help`	Base style for the blue help bar section	Yes	`div`
`.o-contextual-help--one`	Modifier for a single source of help		`.o-contextual-help`
`.o-contextual-help--two`	Modifier for two sources of help		`.o-contextual-help`
`.o-contextual-help--three`	Modifier for three sources of help		`.o-contextual-help`
`.o-contextual-help-group-heading`	Base style for the grouped heading that is shown on large screens	Yes	`.o-contextual-help > div`
`.o-contextual-help-group-heading__option`	Base style for text within the grouped heading	Yes	`.o-contextual-help-group-heading > h2 > span`	Maximum of three of these to be used and must be separated by visually hidden content to ensure that the heading makes sense when read by a screen reader
`.o-contextual-help__group`	Base style to group the individual help items.	Yes	`.o-contextual-help > div`
`.o-contextual-help__heading`	Base style for heading of individual help item	Yes	`.o-contextual-help__group > h3`	Maximum of three of these
`.o-contextual-help__content`	Base style for container of the individual help item	Yes	`.o-contextual-help__heading + div.l-content-container`	Maximum of three of these

Keyboard operations

TAB: Tabbing to an anchor should make the anchor 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 open the link. If the link is internal to the page it will scroll the page otherwise it will load the new page.

Component releases

Added on: v3.0.0 (15/09/17)
Removed on: v5.0.0 (05/10/20)

Latest update:

Component removed; use help utility section instead.

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