Site switcher

Tabbed site switcher (two options)

Structure

• Background colour of black bar is #111
• Site switcher selected/current site has a background of #EFEFEF
• Site switcher link has a background hover state of #444444 - Body copy grey
• Copy within the labels must not cause the tabs to wrap at mobile
• Only for use with two options

Placement

• Can only be used with the masthead black bar

• Black bar containing the optional:

  • Site switcher (Personal/Business tabs or dropdown)
  • Country selector

Use case

• Should only be used to switch between pages/sites and is not to be used for updating page content

<div class="m-site-country-selection">
	<div class="l-content-container">
		<ul class="a-list-plain m-site-country-selection__site-list">
			<li><a href="...">...</a></li>
			<li><span>...</span></li>
		</ul>
		<p class="m-site-country-selection__country [ Modifier ]"><a href="..." aria-label="... - select alternative country site">...</a></p>
	</div>
</div>

Show/hide site switcher (Two to six options)

Structure

• Background colour of black bar is #111
• Site switcher link has a background hover state of #444 - Body copy grey
• Site switcher link text is vertically aligned with the content below (causes the hover state to extend 10px off the grid)
• The site switcher can be closed by clicking the button used to open it

• Content can contain:

  • A heading group (H2 semi-bold and H3 light #FFF - white)
  • 2-6 transparent buttons
  • Body copy and inline link (#FFF - white)
  • Body copy above the buttons (only for use with the 2-4 column structure)
• All standard vertical padding rules apply
• The copy that sits above the buttons is restricted to 80 characters
• Note: Minimum requirement for use is 2 buttons, all other elements are optional
• Note: The H3 in the heading group is also optional

Dropdown link text

• Site switcher link copy has a maximum limit of 70 characters
• Arrow must not wrap onto a third line
• Country selector retains its position when the site switcher link wraps
• Copy changes after selection has been made from the site switcher to show selected option
• Standard colour for the site switcher link is #FFF - white
• Selected text can change to #FFD900 (Abeille Assurances yellow) if needed (see highlight selected option example)

Non-JS requirements and considerations

• The site switcher button links to the black bar content at the bottom of the page
• The content sits above the footer and has a #333 colour background, a #444 (body copy grey) key line divides the content from the footer content
• A H3 semi-bold #FFF (white) label sits above the content explaining that it's the site switcher if a heading group has not been included

Accessibility and screen readers

• Inclusion of appropriate level headings to aid in understanding of the component whilst using assistive technologies. Although these headings do not follow the correct nesting order once JavaScript has run, they do not constitute a failure of WCAG 1.3.1 as specified within WCAG technique H42 - example 2. This component is an exception to maintaining the heading order as removal of the headings would cause failure of WCAG 1.3.1 due to content being styled as headings but not marked up as headings, as well as detrementing any assistive technology users.

Placement

• Can only be used with the masthead black bar

Use case

• Should only be used to switch between pages/sites and is not to be used for updating page content

Animation

• All animations have an ease-in-out applied

• Opening the navigation:

  • The yellow navigation bar and black bar animate first over 0.3 seconds
  • After a 0.2 second delay the content fades in over 0.2 seconds

• Closing the navigation:

  • The content fades out first over 0.2 seconds
  • After a 0.1 second delay the yellow navigation bar and black bar animate back to their original positions over 0.3 seconds
• Clicking a transparent button automatically closes the site switcher (same rules apply as for closing the animation)

<div class="m-site-country-selection">
	<div class="l-content-container">
		<p class="m-site-country-selection__site-switcher"><a href="#...">Site switcher</a></p>
		<p class="m-site-country-selection__country [ Modifier ]"><a href="..." aria-label="... - select alternative country site">...</a></p>
	</div>
</div>

Highlight selected option

Example layout options

Maximum of 6 buttons can be used within the site switcher.

<div class="m-site-switcher t-accent-dark" id="...">
	<div class="l-content-container">
		<h2 class="a-heading a-heading--3 u-margin--top-none m-site-switcher__heading">Site switcher</h2>
		<ul class="m-button-group">
			<li class="m-button-group__item"><a class="a-button a-button--transparent m-site-switcher__selected-option is-disabled" aria-current="true" href="..." data-value="...">...</a></li> <!-- Current website/selected website -->
			<li class="m-button-group__item"><a class="a-button a-button--transparent" href="..." data-value="...">...</a></li>
			...
		</ul>		<!-- Optional paragraph -->
		<p>...</p>
	</div>
</div>
<!-- footer -->

When using the heading group the sub-heading is optional.

<div class="m-site-switcher t-accent-dark" id="...">
	<div class="l-content-container">
		<div class="m-heading-group u-margin--top-none">
			<h2 class="a-heading m-heading-group__item a-heading--2 a-heading--semibold">...</h2>
			<h3 class="a-heading m-heading-group__item a-heading--3 a-heading--light">...</h3>
		</div>
		<ul class="m-button-group">
			<li class="m-button-group__item"><a class="a-button a-button--transparent m-site-switcher__selected-option is-disabled" href="..." data-value="...">...</a></li> <!-- Current website/selected website -->
			<li class="m-button-group__item"><a class="a-button a-button--transparent" href="..." data-value="...">...</a></li>
			...
		</ul>		<!-- Optional paragraph -->
		<p>...</p>
	</div>
</div>

2, 3 or 4 columns can be used when you need to add description copy to the buttons.

<div class="m-site-switcher t-accent-dark" id="...">
	<div class="l-content-container">
		<div class="m-heading-group u-margin--top-none">
			<h2 class="a-heading m-heading-group__item a-heading--2 a-heading--semibold">...</h2>
			<h3 class="a-heading m-heading-group__item a-heading--3 a-heading--light">...</h3>
		</div>
		<div class="l-columns l-columns--2-medium l-columns--4-large">
			<div class="l-columns__column">
				<p>...</p>
				<p><a class="a-button a-button--transparent m-site-switcher__selected-option is-disabled" href="..." data-value="...">...lt;/a></p>
			</div>
			<div class="l-columns__column">
				<p>...</p>
				<p><a class="a-button a-button--transparent" href="...">...</a></p>
			</div>
			<div class="l-columns__column">
				<p>...</p>
				<p><a class="a-button a-button--transparent" href="...">...</a></p>
			</div>
			<div class="l-columns__column">
				<p>...</p>
				<p><a class="a-button a-button--transparent" href="...">...</a></p>
			</div>
		</div>		<!-- Optional paragraph -->
		<p>...</p>
	</div>
</div>