Header and footer
About
What does it do?
- The primary way of navigating the website
- Standardised pattern
When to use it?
- Every page must have a header and a footer
Header
Skip link
There is a hidden skip link for users with screen reader assistive technology. This allows users to quickly access the main content. All pages must include this.
Ensure there is a HTML element on the page with the ID of wmre-main-content so the user can skip to this section.
Logo
This must always be the West Midlands Rail Executive logo.
Phase indicator
This component must be used if the service is not live, using the phase indicator guidance.
Navigation
The three top-level navigation items were decided by identifying our user’s top tasks using Gerry McGovern’s methodology. We overlaid a heatmap of the home page, where we found the same three areas were the most-used areas.
The top-level items open a structured megamenu to avoid cognitive overload. Users are familiar with this pattern from online shopping and transport operators.
We only use three top-level items as we prefer not to use hamburger menus on mobile. Users are required to make an extra click to reveal the navigation, therefore you cannot glance at navigation options.
Mobile apps
When designing an app, you should use a tab bar and avoid using hamburger items wherever possible. Limit the tabs to the most important tasks using user research.
Search
This functionality only shows for desktop and tablet users. When clicked, search expands and takes over the whole page.
Component example
HTML Markup
<!-- Skip to content link -->
<a href="#wmre-main-content" title="Skip to main content" target="_self" class="wmre-link wmre-header__skip-link " >
Skip to main content
</a>
<!-- Main header section -->
<header>
<div class="bg-white wmre-p-t-md wmre-p-b-md wmre-cookies-banner">
<div class="wmre-container">
<div class="wmre-col-1 wmre-col-md-3-4 wmre-col-lg-2-3">
<h3>Your privacy settings</h3>
<p>
If you’re happy with the use of cookies by West Midlands Combined Authority
and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.
</p>
<div class="wmre-grid wmre-grid--spacing-2-md wmre-cookies-banner__group-buttons">
<button class="wmre-btn wmre-btn wmre-col-1 wmre-col-sm-1 wmre-col-md-12-24 wmre-cookies-banner__accept-all-cookies" >
Accept all cookies
</button>
<a href="/patterns/cookies/#cookies_manager" title="link title" target="_self" class="wmre-btn wmre-btn wmre-col-1 wmre-col-sm-1 wmre-col-md-12-24">
Manage Cookies
</a>
</div>
</div>
</div>
</div>
<div class="wmre-header wmre-header--mega-menu">
<div class="wmre-container wmre-grid wmre-grid--align-center wmre-grid--justify-between">
<div class="wmre-header__vertical-align wmre-col-auto">
<!-- Logo -->
<a class="wmre-header__logo-link" href="https://wmcadigital.github.io/wmre-design-system" title="West Midlands Combined Authority Design System">
<img class="wmre-header__logo" alt="West Midlands Combined Authority logo" src="https://wmcadigital.github.io/wmre-design-system/img/logo.svg" />
</a>
</div>
<!-- Mega menu nav items-->
<nav id="mega-menu" class="wmre-mega-menu">
<!-- Mobile toggle button -->
<button class="wmre-mega-menu__mobile-toggle wmre-btn wmre-btn--secondary wmre-hide-desktop" aria-expanded="false" aria-controls="mega-menu-primary-menu">Menu
<svg class="wmre-mega-menu__close-icon"><use xlink:href="#wmre-general-cross" href="#wmre-general-cross"></use></svg>
</button>
<!-- Container for mega menu - allows scrolling on mobile nav -->
<div id="mega-menu-primary-menu" class="wmre-mega-menu__scroll-controller">
<!-- Start primary (level 1) navigation -->
<ul class="wmre-mega-menu__primary-menu">
<li class="wmre-mega-menu__primary-menu-item">
<!-- Show swift logo in nav if is swift & tickets link -->
<!-- allow primary (level 1) item to link if specified -->
<a href="https://wmcadigital.github.io/wmre-design-system/styles/" title="Styles page" target="_self" class="wmre-mega-menu__primary-menu-link" >
Styles
</a>
<!-- if not linked use a button -->
<!-- arrow icon for mobile nav -->
<button class="wmre-mega-menu__link-arrow-icon-btn" data-label="Styles" aria-label="toggle Styles" aria-controls="mega-menu-container"><svg class="wmre-mega-menu__link-arrow-icon"><use xlink-href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use></svg></button>
<!-- Start mega menu container -->
<div id="mega-menu-container-1" class="wmre-mega-menu__container">
<div class="wmre-container">
<!-- Start submenu (level 2) -->
<ul class="wmre-mega-menu__sub-menu">
<li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/styles/colour-palettes/" class="wmre-mega-menu__sub-menu-link">
Colour palettes</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/styles/typography/" class="wmre-mega-menu__sub-menu-link">
Typography</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/styles/icons/" class="wmre-mega-menu__sub-menu-link">
Icons</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/styles/utility-classes/" class="wmre-mega-menu__sub-menu-link">
Utility classes</a>
</li>
</ul>
<!-- End submenu (level 2) -->
</div>
</div>
<!-- End mega menu container -->
</li><li class="wmre-mega-menu__primary-menu-item">
<!-- Show swift logo in nav if is swift & tickets link -->
<!-- allow primary (level 1) item to link if specified -->
<a href="https://wmcadigital.github.io/wmre-design-system/components/" title="Components page" target="_self" class="wmre-mega-menu__primary-menu-link" >
Components
</a>
<!-- if not linked use a button -->
<!-- arrow icon for mobile nav -->
<button class="wmre-mega-menu__link-arrow-icon-btn" data-label="Components" aria-label="toggle Components" aria-controls="mega-menu-container"><svg class="wmre-mega-menu__link-arrow-icon"><use xlink-href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use></svg></button>
<!-- Start mega menu container -->
<div id="mega-menu-container-2" class="wmre-mega-menu__container">
<div class="wmre-container">
<!-- Start submenu (level 2) -->
<ul class="wmre-mega-menu__sub-menu">
<li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/accordion/" class="wmre-mega-menu__sub-menu-link">
Accordion</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/breadcrumb/" class="wmre-mega-menu__sub-menu-link">
Breadcrumb</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/buttons/" class="wmre-mega-menu__sub-menu-link">
Buttons</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/content-card/" class="wmre-mega-menu__sub-menu-link">
Content card</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/file-download/" class="wmre-mega-menu__sub-menu-link">
File download</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/form-elements/" class="wmre-mega-menu__sub-menu-link">
Form elements</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/hub-header/" class="wmre-mega-menu__sub-menu-link">
Hub header</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/inset-text/" class="wmre-mega-menu__sub-menu-link">
Inset text</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/links/" class="wmre-mega-menu__sub-menu-link">
Links</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/loader/" class="wmre-mega-menu__sub-menu-link">
Loader</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/page-header/" class="wmre-mega-menu__sub-menu-link">
Page header</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/phase-indicator/" class="wmre-mega-menu__sub-menu-link">
Phase indicator</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/warning-text/" class="wmre-mega-menu__sub-menu-link">
Warning text</a>
</li>
</ul>
<!-- End submenu (level 2) -->
</div>
</div>
<!-- End mega menu container -->
</li><li class="wmre-mega-menu__primary-menu-item">
<!-- Show swift logo in nav if is swift & tickets link -->
<!-- allow primary (level 1) item to link if specified -->
<a href="https://wmcadigital.github.io/wmre-design-system/patterns/" title="Patterns page" target="_self" class="wmre-mega-menu__primary-menu-link" >
Patterns
</a>
<!-- if not linked use a button -->
<!-- arrow icon for mobile nav -->
<button class="wmre-mega-menu__link-arrow-icon-btn" data-label="Patterns" aria-label="toggle Patterns" aria-controls="mega-menu-container"><svg class="wmre-mega-menu__link-arrow-icon"><use xlink-href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use></svg></button>
<!-- Start mega menu container -->
<div id="mega-menu-container-3" class="wmre-mega-menu__container">
<div class="wmre-container">
<!-- Start submenu (level 2) -->
<ul class="wmre-mega-menu__sub-menu">
<li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/patterns/header-and-footer/" class="wmre-mega-menu__sub-menu-link">
Header and footer</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/patterns/contact-details/" class="wmre-mega-menu__sub-menu-link">
Contact details</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/patterns/search/" class="wmre-mega-menu__sub-menu-link">
Search</a>
</li>
</ul>
<!-- End submenu (level 2) -->
</div>
</div>
<!-- End mega menu container -->
</li><li class="wmre-mega-menu__primary-menu-item">
<!-- Show swift logo in nav if is swift & tickets link -->
<!-- allow primary (level 1) item to link if specified -->
<a href="https://wmcadigital.github.io/wmre-design-system/templates/" title="Templates page" target="_self" class="wmre-mega-menu__primary-menu-link" >
Templates
</a>
<!-- if not linked use a button -->
<!-- arrow icon for mobile nav -->
<button class="wmre-mega-menu__link-arrow-icon-btn" data-label="Templates" aria-label="toggle Templates" aria-controls="mega-menu-container"><svg class="wmre-mega-menu__link-arrow-icon"><use xlink-href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use></svg></button>
<!-- Start mega menu container -->
<div id="mega-menu-container-4" class="wmre-mega-menu__container">
<div class="wmre-container">
<!-- Start submenu (level 2) -->
<ul class="wmre-mega-menu__sub-menu">
<li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/homepage/" class="wmre-mega-menu__sub-menu-link">
Homepage</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/programme/" class="wmre-mega-menu__sub-menu-link">
Programme</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/newsroom/" class="wmre-mega-menu__sub-menu-link">
Newsroom</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/news-article/" class="wmre-mega-menu__sub-menu-link">
News article</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/project/" class="wmre-mega-menu__sub-menu-link">
Project</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/projects-map/" class="wmre-mega-menu__sub-menu-link">
Projects map</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/projects-list/" class="wmre-mega-menu__sub-menu-link">
Projects list</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/content-page-example/" class="wmre-mega-menu__sub-menu-link">
Content page example</a>
</li>
</ul>
<!-- End submenu (level 2) -->
</div>
</div>
<!-- End mega menu container -->
</li>
</ul>
<!-- End primary (level 1) navigation -->
</div>
<!-- End scrollable container -->
<div class="wmre-mega-menu__primary-menu-item wmre-mega-menu__search">
<button class="wmre-mega-menu__primary-menu-link wmre-mega-menu__search-btn">
<svg class="wmre-mega-menu__search-icon">
<title>Search</title>
<use xlink:href="#wmre-general-search" href="#wmre-general-search"></use>
</svg>
<svg class="wmre-mega-menu__search-close-icon">
<title>Close</title>
<use xlink:href="#wmre-general-cross" href="#wmre-general-cross"></use>
</svg>
</button>
<div class="wmre-mega-menu__container wmre-mega-menu__search-container">
<div class="wmre-search-container">
<form class="wmre-search-bar">
<input aria-label="Search" type="search" class="wmre-search-bar__input wmre-fe-input" placeholder="Site search...">
<button class="wmre-search-bar__btn" types="submit">
<svg><title>Search</title><use xlink:href="#wmre-general-search" href="#wmre-general-search"></use></svg>
</button>
</form>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="wmre-container">
<!-- Phase banner -->
<div class="wmre-banner-container">
<div class="wmre-col-1">
<div class="wmre-banner-container__phase-wrapper">
<a href="https://wmcadigital.github.io/wmre-design-system/" target="_self" class="wmre-phase-indicator" title="Beta homepage of West Midlands Rail Executive Design System">
Beta
</a>
</div>
<p class="wmre-banner-container__text">
This is a new service - your
<a href="https://github.com/wmcadigital/wmca-design-system/issues" title="WMCA Design System Github" target="_blank" class="wmre-link " rel="noopener noreferrer" >
feedback
</a>
will help us to improve it.
</p>
</div>
</div>
<!-- Breadcrumbs -->
<div class="wmre-breadcrumb">
<div class="wmre-container">
<nav aria-label="Breadcrumb">
<ol class="wmre-breadcrumb__list">
<li class="wmre-breadcrumb__list-item">
<a href="https://wmcadigital.github.io/wmre-design-system/" class="wmre-breadcrumb__link">
Home
</a>
</li>
<li class="wmre-breadcrumb__list-item">
<a href="https://wmcadigital.github.io/wmre-design-system/patterns/" class="wmre-breadcrumb__link">
Patterns
</a>
</li>
<li class="wmre-breadcrumb__list-item">
<a href="https://wmcadigital.github.io/wmre-design-system/patterns/header-and-footer/" class="wmre-breadcrumb__link wmre-breadcrumb__link--current" aria-current="page">
Header and footer
</a>
</li>
</ol>
</nav>
</div>
</div>
</div>
</header>
With a title variant of header
When developing a service you may not need the navigation of the main website. When this is the case, you can place the title of the service in the header (providing their is no other h1 element on the page).
To use the title variant:
- Add the h1 element and ensure it has the classes
.wmre-header__title .wmre-col-1 .wmre-col-sm-autoon the element
Component example
Skip to main content
Reinstate your Direct Debit
Reinstate your Direct Debit
(COVID-19)
HTML Markup
<!-- Skip to content link -->
<a href="#wmre-main-content" title="Skip to main content" target="_self" class="wmre-link wmre-header__skip-link " >
Skip to main content
</a>
<!-- Main header section -->
<header>
<div class="bg-white wmre-p-t-md wmre-p-b-md wmre-cookies-banner">
<div class="wmre-container">
<div class="wmre-col-1 wmre-col-md-3-4 wmre-col-lg-2-3">
<h3>Your privacy settings</h3>
<p>
If you’re happy with the use of cookies by West Midlands Combined Authority
and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.
</p>
<div class="wmre-grid wmre-grid--spacing-2-md wmre-cookies-banner__group-buttons">
<button class="wmre-btn wmre-btn wmre-col-1 wmre-col-sm-1 wmre-col-md-12-24 wmre-cookies-banner__accept-all-cookies" >
Accept all cookies
</button>
<a href="/patterns/cookies/#cookies_manager" title="link title" target="_self" class="wmre-btn wmre-btn wmre-col-1 wmre-col-sm-1 wmre-col-md-12-24">
Manage Cookies
</a>
</div>
</div>
</div>
</div>
<div class="wmre-header wmre-header--mega-menu">
<div class="wmre-container wmre-grid wmre-grid--align-center wmre-grid--justify-between">
<div class="wmre-header__vertical-align wmre-col-auto">
<!-- Logo -->
<a class="wmre-header__logo-link" href="https://wmcadigital.github.io/wmre-design-system" title="West Midlands Combined Authority Design System">
<img class="wmre-header__logo" alt="West Midlands Combined Authority logo" src="https://wmcadigital.github.io/wmre-design-system/img/logo.svg" />
</a>
</div>
<!-- Header title -->
<h1 class="wmre-header__title wmre-col-1 wmre-col-sm-auto">
Reinstate your Direct Debit<br>(COVID-19)
</h1>
</div>
</div>
</header>
Mobile app variant of header
When developing a mobile app, if you are limited for space and need extra room then it is recommended to use the mobile app variant of the West Midlands Rail Executive header.
To use the mobile app variant:
- Add the modifier class
wmre-header--mobile-appto the wmre-header element - Copy the code for the back button section below and insert it into your existing header
- Finally, add the script for the back button in your local javascript file
You will most likely want to use this with the mobile variants of the breadcrumb component and footer pattern .
Component example
HTML Markup
<!-- Skip to content link -->
<a href="#wmre-main-content" title="Skip to main content" target="_self" class="wmre-link wmre-header__skip-link " >
Skip to main content
</a>
<!-- Main header section -->
<header>
<div class="bg-white wmre-p-t-md wmre-p-b-md wmre-cookies-banner">
<div class="wmre-container">
<div class="wmre-col-1 wmre-col-md-3-4 wmre-col-lg-2-3">
<h3>Your privacy settings</h3>
<p>
If you’re happy with the use of cookies by West Midlands Combined Authority
and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.
</p>
<div class="wmre-grid wmre-grid--spacing-2-md wmre-cookies-banner__group-buttons">
<button class="wmre-btn wmre-btn wmre-col-1 wmre-col-sm-1 wmre-col-md-12-24 wmre-cookies-banner__accept-all-cookies" >
Accept all cookies
</button>
<a href="/patterns/cookies/#cookies_manager" title="link title" target="_self" class="wmre-btn wmre-btn wmre-col-1 wmre-col-sm-1 wmre-col-md-12-24">
Manage Cookies
</a>
</div>
</div>
</div>
</div>
<div class="wmre-header wmre-header--mobile-app wmre-header--mega-menu">
<div class="wmre-container wmre-grid wmre-grid--align-center wmre-grid--justify-between">
<div class="wmre-header__vertical-align wmre-col-auto">
<!-- Logo -->
<a class="wmre-header__logo-link" href="https://wmcadigital.github.io/wmre-design-system" title="West Midlands Combined Authority Design System">
<img class="wmre-header__logo" alt="West Midlands Combined Authority logo" src="https://wmcadigital.github.io/wmre-design-system/img/logo.svg" />
</a>
</div>
<!-- Mega menu nav items-->
<nav id="" class="wmre-mega-menu">
<!-- Mobile toggle button -->
<button class="wmre-mega-menu__mobile-toggle wmre-btn wmre-btn--secondary wmre-hide-desktop" aria-expanded="false" aria-controls="-primary-menu">Menu
<svg class="wmre-mega-menu__close-icon"><use xlink:href="#wmre-general-cross" href="#wmre-general-cross"></use></svg>
</button>
<!-- Container for mega menu - allows scrolling on mobile nav -->
<div id="-primary-menu" class="wmre-mega-menu__scroll-controller">
<!-- Start primary (level 1) navigation -->
<ul class="wmre-mega-menu__primary-menu">
<li class="wmre-mega-menu__primary-menu-item">
<!-- Show swift logo in nav if is swift & tickets link -->
<!-- allow primary (level 1) item to link if specified -->
<button target="_self" class="wmre-mega-menu__primary-menu-link" >
Styles
</button>
<!-- arrow icon for mobile nav -->
<button class="wmre-mega-menu__link-arrow-icon-btn" data-label="Styles" aria-label="toggle Styles" aria-controls="-container"><svg class="wmre-mega-menu__link-arrow-icon"><use xlink-href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use></svg></button>
<!-- Start mega menu container -->
<div id="-container-1" class="wmre-mega-menu__container">
<div class="wmre-container">
<!-- Start submenu (level 2) -->
<ul class="wmre-mega-menu__sub-menu">
<li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/styles/colour-palettes/" class="wmre-mega-menu__sub-menu-link">
Colour palettes</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/styles/typography/" class="wmre-mega-menu__sub-menu-link">
Typography</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/styles/icons/" class="wmre-mega-menu__sub-menu-link">
Icons</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/styles/utility-classes/" class="wmre-mega-menu__sub-menu-link">
Utility classes</a>
</li>
</ul>
<!-- End submenu (level 2) -->
</div>
</div>
<!-- End mega menu container -->
</li><li class="wmre-mega-menu__primary-menu-item">
<!-- Show swift logo in nav if is swift & tickets link -->
<!-- allow primary (level 1) item to link if specified -->
<button target="_self" class="wmre-mega-menu__primary-menu-link" >
Components
</button>
<!-- arrow icon for mobile nav -->
<button class="wmre-mega-menu__link-arrow-icon-btn" data-label="Components" aria-label="toggle Components" aria-controls="-container"><svg class="wmre-mega-menu__link-arrow-icon"><use xlink-href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use></svg></button>
<!-- Start mega menu container -->
<div id="-container-2" class="wmre-mega-menu__container">
<div class="wmre-container">
<!-- Start submenu (level 2) -->
<ul class="wmre-mega-menu__sub-menu">
<li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/accordion/" class="wmre-mega-menu__sub-menu-link">
Accordion</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/breadcrumb/" class="wmre-mega-menu__sub-menu-link">
Breadcrumb</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/buttons/" class="wmre-mega-menu__sub-menu-link">
Buttons</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/content-card/" class="wmre-mega-menu__sub-menu-link">
Content card</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/file-download/" class="wmre-mega-menu__sub-menu-link">
File download</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/form-elements/" class="wmre-mega-menu__sub-menu-link">
Form elements</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/hub-header/" class="wmre-mega-menu__sub-menu-link">
Hub header</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/inset-text/" class="wmre-mega-menu__sub-menu-link">
Inset text</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/links/" class="wmre-mega-menu__sub-menu-link">
Links</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/loader/" class="wmre-mega-menu__sub-menu-link">
Loader</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/page-header/" class="wmre-mega-menu__sub-menu-link">
Page header</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/phase-indicator/" class="wmre-mega-menu__sub-menu-link">
Phase indicator</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/components/warning-text/" class="wmre-mega-menu__sub-menu-link">
Warning text</a>
</li>
</ul>
<!-- End submenu (level 2) -->
</div>
</div>
<!-- End mega menu container -->
</li><li class="wmre-mega-menu__primary-menu-item">
<!-- Show swift logo in nav if is swift & tickets link -->
<!-- allow primary (level 1) item to link if specified -->
<button target="_self" class="wmre-mega-menu__primary-menu-link" >
Patterns
</button>
<!-- arrow icon for mobile nav -->
<button class="wmre-mega-menu__link-arrow-icon-btn" data-label="Patterns" aria-label="toggle Patterns" aria-controls="-container"><svg class="wmre-mega-menu__link-arrow-icon"><use xlink-href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use></svg></button>
<!-- Start mega menu container -->
<div id="-container-3" class="wmre-mega-menu__container">
<div class="wmre-container">
<!-- Start submenu (level 2) -->
<ul class="wmre-mega-menu__sub-menu">
<li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/patterns/header-and-footer/" class="wmre-mega-menu__sub-menu-link">
Header and footer</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/patterns/contact-details/" class="wmre-mega-menu__sub-menu-link">
Contact details</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/patterns/search/" class="wmre-mega-menu__sub-menu-link">
Search</a>
</li>
</ul>
<!-- End submenu (level 2) -->
</div>
</div>
<!-- End mega menu container -->
</li><li class="wmre-mega-menu__primary-menu-item">
<!-- Show swift logo in nav if is swift & tickets link -->
<!-- allow primary (level 1) item to link if specified -->
<button target="_self" class="wmre-mega-menu__primary-menu-link" >
Templates
</button>
<!-- arrow icon for mobile nav -->
<button class="wmre-mega-menu__link-arrow-icon-btn" data-label="Templates" aria-label="toggle Templates" aria-controls="-container"><svg class="wmre-mega-menu__link-arrow-icon"><use xlink-href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use></svg></button>
<!-- Start mega menu container -->
<div id="-container-4" class="wmre-mega-menu__container">
<div class="wmre-container">
<!-- Start submenu (level 2) -->
<ul class="wmre-mega-menu__sub-menu">
<li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/homepage/" class="wmre-mega-menu__sub-menu-link">
Homepage</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/programme/" class="wmre-mega-menu__sub-menu-link">
Programme</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/newsroom/" class="wmre-mega-menu__sub-menu-link">
Newsroom</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/news-article/" class="wmre-mega-menu__sub-menu-link">
News article</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/project/" class="wmre-mega-menu__sub-menu-link">
Project</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/projects-map/" class="wmre-mega-menu__sub-menu-link">
Projects map</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/projects-list/" class="wmre-mega-menu__sub-menu-link">
Projects list</a>
</li><li class="wmre-mega-menu__sub-menu-item">
<a href="https://wmcadigital.github.io/wmre-design-system/templates/content-page-example/" class="wmre-mega-menu__sub-menu-link">
Content page example</a>
</li>
</ul>
<!-- End submenu (level 2) -->
</div>
</div>
<!-- End mega menu container -->
</li>
</ul>
<!-- End primary (level 1) navigation -->
</div>
<!-- End scrollable container -->
</nav>
</div>
</div>
</header>
Full variant of footer
The full variant of the footer may include menus which become collapsible on smaller devices.
To enable the collapsible footer menus on smaller screens you can include the recommended javascript below:
Component example
HTML Markup
<footer>
<div class="wmre-footer wmre-footer--v2">
<div class="wmre-container wmre-grid">
<div class="wmre-col-1 wmre-col-md-1-2 wmre-col-lg-1-3 wmre-p-r-lg">
<h3 class="wmre-footer__statement">Driving a revolution in rail services for West Midlanders</h3>
</div>
<div class="wmre-col-1 wmre-col-md-1-2 wmre-col-lg-1-3 wmre-p-r-lg">
<h3 class="wmre-footer__heading wmre-collapse-heading" aria-controls="footer-menu-" aria-expanded="true">
Resources & support
<svg class="wmre-collapse-heading__indicator">
<use xlink:href="#wmre-general-chevron-right" href="#wmre-general-chevron-right"></use>
</svg>
</h3>
<ul class="wmre-footer__menu wmre-collapse-panel" id="footer-menu-">
<li><a class="wmre-footer__link" href="#">Businesses</a></li>
<li><a class="wmre-footer__link" href="#">Education</a></li>
<li><a class="wmre-footer__link" href="#">Job centres</a></li>
<li><a class="wmre-footer__link" href="#">Young people</a></li>
</ul>
</div>
</div>
<div class="wmre-container">
<div class="wmre-footer__bottom wmre-grid">
<div class="wmre-col-1 wmre-col-md-1-3 wmre-col-lg-1-2">
<p class="wmre-footer__copyright">© West Midlands Combined Authority 2020</p>
</div>
<div class="wmre-col-1 wmre-col-md-2-3 wmre-col-lg-1-2">
<ul class="wmre-footer__bottom-menu">
<li><a class="wmre-footer__link" href="">Accessibility</a></li>
<li><a class="wmre-footer__link" href="">Terms and Conditions</a></li>
<li><a class="wmre-footer__link" href="">Policies</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
Mobile app variant of Footer
When developing a mobile app, if you are limited for space and need extra room then it is recommended to use the mobile app variant of the West Midlands Rail Executive footer.
The mobile app version of the footer ensures that it will not show on devices with a screen width less than 768px. This means the footer will only show on devices with a screen resolution bigger than 768px.
To use the mobile app variant:
- Add the modifier class
wmre-footer--mobile-appto the wmre-footer element
You will most likely want to use this with the mobile variants of the breadcrumb component and header pattern .
Component example
HTML Markup
<footer>
<div class="wmre-footer wmre-footer--mobile-app wmre-footer--v2">
<div class="wmre-container wmre-grid">
<div class="wmre-col-1 wmre-col-md-1-2 wmre-col-lg-1-3 wmre-p-r-lg">
<h3 class="wmre-footer__statement">Driving a revolution in rail services for West Midlanders</h3>
</div>
</div>
<div class="wmre-container">
<div class="wmre-footer__bottom wmre-grid">
<div class="wmre-col-1 wmre-col-md-1-3 wmre-col-lg-1-2">
<p class="wmre-footer__copyright">© West Midlands Combined Authority 2020</p>
</div>
</div>
</div>
</div>
</footer>