Taxonomic name: M-FOOTER
Added on: v3.0.0 (15/09/17)
Updated on: v5.4.0 (23/02/21)

Footer

The footer component should be used to consistently display links to site, legal and contact information. Users recognise the footer as the end of the page and expect there to be links to general information about the company or use of the site in this area.

Design and usage

Structure

Must contain at least the Abeille Assurances copyright, links to Abeille Assurances’ legal pages such as cookie policy, privacy policy and accessibility, and a breadcrumb trail.
Other than for very specific exceptions, the footer should also contain a breadcrumb trail back to the site home page on all pages (from the home page down) on all sites for both accessibility and SEO reasons; for more information, see the breadcrumb documentation.
Columns should be used to group related links within the footer.

Accessibility and screen readers

Link and icon contrast inline with pre-existing WCAG guidelines and established Framework components
Link dimensions a minimum of 44px by 44px in-line with pre-existing WCAG guidelines and established Framework components
Hover and focus states inline with pre-existing WCAG guidelines and established Framework components
Hidden descriptive text for social icons must be descriptive of what the link is doing eg. "Abeille Assurances' Facebook page"

Placement

Last visible component on the page.

Design anatomy

Links are displayed across five columns at desktop, four columns on tablet and one column on mobile.

Examples

to reduced

Interactive examples

6 colonnes + Réseaux sociaux

Reduced

Reduced with social links

Code example

<footer class="m-footer t-accent-dark">
	<div class="l-content-container">
		<h2 class="u-hidden--visually">Footer</h2>
		<nav class="a-breadcrumb" aria-label="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
			<p class="u-hidden--visually">You are currently within </p>
			<ol class="a-breadcrumb-list">
				<li class="a-breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<meta itemprop="position" content="1" />
					<a class="a-breadcrumb-page" itemprop="item" href="...">
						<span class="a-breadcrumb-page__inner" itemprop="name">...</span>
					</a>
				</li>
				<li class="a-breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<meta itemprop="position" content="2"  />
					<a class="a-breadcrumb-page" itemprop="item" href="...">
						<span class="a-breadcrumb-page__inner" itemprop="name">...</span>
					</a>
				</li>
				...
				<li class="a-breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<meta itemprop="position" content="..." />
					<a class="a-breadcrumb-page" itemprop="item" href="..." tabindex="-1" aria-current="page">
						<span class="a-breadcrumb-page__inner" itemprop="name">...</span>
					</a>
				</li>
			</ol>
		</nav>
		<div class="l-columns l-columns--4-medium l-columns--5-large m-footer__lists">
			<div class="l-columns__column m-footer__group">
				<h3 class="m-footer__list-heading">...</h3>
				<ul class="a-list-plain m-footer__list">
					<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<h3 class="m-footer__list-heading">...</h3>
				<ul class="a-list-plain m-footer__list">
				<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<h3 class="m-footer__list-heading">...</h3>
				<ul class="a-list-plain m-footer__list">
					<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<h3 class="m-footer__list-heading">...</h3>
				<ul class="a-list-plain m-footer__list">
					<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group m-footer__group--social">
				<h3 class="m-footer__list-heading u-hidden--visually">...</h3>
				<ul class="a-list-plain m-footer__list a-social-links">
					<li><a class="a-social-links__icon a-social-links__icon--[ Modifer ]" href="..." itemprop="sameAs"><span>...</span></a></li>
					...
				</ul>
			</div>
		</div>
		<div class="l-columns l-columns--1-medium l-columns--1-large m-footer__lists">
			<div class="l-columns__column m-footer__group m-footer__group--inline">
				<h3 class="m-footer__list-heading u-hidden--visually">...</h3>
				<ul class="a-list-plain m-footer__list m-footer__list--legal">
					<li><a class="a-button a-button--tertiary [ Modifier ]" href="..."><span class="a-button__inner">...</span></a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group m-footer__group--inline">
				<h3 class="m-footer__list-heading u-hidden--visually">...</h3>
				<ul class="a-list-plain m-footer__list m-footer__list--copyright">
					<li>...</li>
					<li>&copy; 2021 Aviva</li>
				</ul>
			</div>
		</div>
	</div>
</footer>

Footer with textual links

Interactive examples

40% width

Right aligned

Code example

<footer class="m-footer t-accent-dark">
	<div class="l-content-container">
		<h2 class="u-hidden--visually">Footer</h2>
		<nav class="a-breadcrumb" aria-label="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
			<p class="u-hidden--visually">You are currently within </p>
			<ol class="a-breadcrumb-list">
				<li class="a-breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<meta itemprop="position" content="1" />
					<a class="a-breadcrumb-page" itemprop="item" href="...">
						<span class="a-breadcrumb-page__inner" itemprop="name">...</span>
					</a>
				</li>
				<li class="a-breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<meta itemprop="position" content="2"  />
					<a class="a-breadcrumb-page" itemprop="item" href="...">
						<span class="a-breadcrumb-page__inner" itemprop="name">...</span>
					</a>
				</li>
				...
				<li class="a-breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
					<meta itemprop="position" content="..." />
					<a class="a-breadcrumb-page" itemprop="item" href="..." tabindex="-1" aria-current="page">
						<span class="a-breadcrumb-page__inner" itemprop="name">...</span>
					</a>
				</li>
			</ol>
		</nav>		<div class="l-columns [ Modifiers ] m-footer__lists">
			<div class="l-columns__column m-footer__group m-footer__group--textual-links [ Modifiers ]">
				<h3 class="m-footer__list-heading">...</h3>
				<ul class="a-list-plain m-footer__list l-columns [ Modifier ]">
					<li class="l-columns__column">
						<a class="a-button a-button--tertiary" href="#example">
							<h4 class="a-heading a-heading--4">...</h4>
							<p class="a-button__inner">...</p>
						</a>
					</li>
					...
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<h3 class="m-footer__list-heading">...</h3>
				<ul class="a-list-plain m-footer__list">
					...
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<h3 class="m-footer__list-heading">...</h3>
				<ul class="a-list-plain m-footer__list">
					...
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<h3 class="m-footer__list-heading">...</h3>
				<ul class="a-list-plain m-footer__list">
					...
				</ul>
			</div>
			<div class="l-columns__column m-footer__group">
				<h3 class="m-footer__list-heading">...</h3>
				<ul class="a-list-plain m-footer__list">
					<li><a class="a-button a-button--tertiary a-button--external" href="#example"><span class="a-button__inner">...</span></a></li>
					...
				</ul>
			</div>
			<div class="m-footer__group m-footer__group--social m-footer__group--social-bottom-aligned">
				<h3 class="m-footer__list-heading u-hidden--visually">...</h3>
				<ul class="a-list-plain a-social-links m-footer__list">
					<li><a class="a-social-links__icon a-social-links__icon--facebook" href="#example"><span>Abeille Assurances' Facebook page</span></a></li>
					...
				</ul>
			</div>
		</div>
		<div class="l-columns l-columns--1-medium l-columns--1-large m-footer__lists">
			<div class="l-columns__column m-footer__group m-footer__group--inline">
				<h3 class="m-footer__list-heading u-hidden--visually">...</h3>
				<ul class="a-list-plain m-footer__list m-footer__list--legal">
					<li><a class="a-button a-button--tertiary" href="#example"><span class="a-button__inner">...</span></a></li>
				</ul>
			</div>
			<div class="l-columns__column m-footer__group m-footer__group--inline">
				<h3 class="m-footer__list-heading u-hidden--visually">...</h3>
				<ul class="a-list-plain m-footer__list m-footer__list--copyright">
					<li>...</li>
					<li>&copy; 2021 Aviva</li>
				</ul>
			</div>
		</div>
	</div>
</footer>

Development and test

Notes for developers

For further information and guidelines about using the breadcrumb in footers, please see the breadcrumb documentation.

The footer should have a generic heading (H2) that is visually hidden to maintain semantic structure of the page.

Groups of links should have the correct semantic heading (H3).

Footers must contain at least the Abeille Assurances copyright and links to Abeille Assurances' legal pages such as cookie policy, privacy policy and accessibility.

A footer can be made up of one to six .m-footer__group > .m-footer__list lists, and one optional .a-social-list.

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 the hidden text within any social links is descriptive of where the link will be taking the user eg. "Abeille Assurances' Facebook page" not simply "Facebook".

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-footer`	Base style for the footer section	Yes	`footer`
`.l-content-container`	Constrains the footer content	Yes	`.m-footer > div`
`.a-breadcrumb`	Base style for the breadcrumb element	Yes	`nav`	For more information, see the breadcrumb documentation
`.a-breadcrumb-list`	Styles the list within the breadcrumb element	Yes	`.a-breadcrumb ol`
`.a-breadcrumb-list__item`	Styles the list items within the breadcrumb list element	Yes	`.a-breadcrumb-list > li`
`.a-breadcrumb-page`	Styles the links within the breadcrumb	Yes	`.a-breadcrumb-list__item > a`
`.a-breadcrumb-page__inner`	Styles the links within the breadcrumb	Yes	`.a-breadcrumb-page > span`
`.l-columns [ Modifier ]`	Sets the number of columns for the footer lists	Yes	`.m-footer > .l-content-container > div`
`.m-footer__lists`	Applies additional styles to the footer list columns	Yes	`.l-columns (.m-footer > .l-content-container > div)`
`.l-column m-footer__group`	Base style for a footer column	Yes	`.m-footer > .l-content-container > div`
`.m-footer__group--textual-links`	Base style for textual links group		`.m-footer__group`
`.m-footer__group--social`	Base style for social links group		`.m-footer__group`
`.m-footer__group--social-bottom-aligned`	Sets the social links group to be bottom aligned in all viewports		`.m-footer__group, .m-footer__group--social`
`.m-footer__group--textual-links-highlight`	Sets the headings and the keylines to yellow for the content in a texual links group		`.m-footer__group--textual-links`	Style to be used for abeille-assurances.fr
`.m-footer__group--no-content-keylines`	Removes keylines from the textual links		`.m-footer__group--textual-links`
`.m-footer__link-heading`	Style for a footer column heading	Yes	`.m-footer__group > p`
`.m-footer__list`	Base style a footer column link list	Yes	`.m-footer__group > ul.a-list-plain`	To be used in combination with the `.a-list-plain` styling. These lists come prior to the social link and copyright
`.a-social-links`	Base style for lists of social links within the footer		`.m-footer__list`	To be used in combination with the `.a-list-plain` styling. This list comes directly after the last `.footer__link-list`
`.a-social-links__icon`	Base style for social links within the footer		`.a-social-links > li > a`	See social list reference for all possible modifiers
`.m-footer__group--inline`	Base style for the legal links and copyright notice area at the base of the footer	Yes	`.m-footer__group`
`.m-footer__list--legal`	Additional style for the legal links list at the base of the footer	Yes	`.m-footer__group--inline > ul`
`.m-footer__list--copyright`	Additional style for the copyright notice area at the base of the footer	Yes	`.m-footer__group--inline > ul`
`m-footer__l-columns--40-15-15-15-15-large`	Sets the first column to 40% in a group of 5.		`.l-columns`
`m-footer__l-columns--15-15-15-15-40-large`	Sets the last column to 40% in a group of 5.		`.l-columns`
`m-footer__l-columns--40-20-20-20-large`	Sets the first column to 40% in a group of 4.		`.l-columns`
`m-footer__l-columns--20-20-20-40-large`	Sets the last column to 40% in a group of 4.		`.l-columns`
`m-footer__l-columns--40-30-30-large`	Sets the first column to 40% in a group of 3.		`.l-columns`
`m-footer__l-columns--30-30-40-large`	Sets the last column to 40% in a group of 3.		`.l-columns`

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)
Updated on: v5.4.0 (23/02/21)

Latest update:

updated: Guidance regarding social sharing links has been updated to recommend containing more descriptive text eg. "Abeille Assurances' Facebook page" instead of simply "Facebook" in order to make it clearer to users of assistive technologies what the link will do.

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