Banner
Normal
HTML markup
<div class="wmnds-banner-container">
<div class="wmnds-col-1">
<p class="wmnds-banner-container__text">
This is a new service - your
<a href="#" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
feedback
</a>
will help us to improve it.
</p>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/banner/_banner.njk" import wmndsBanner %}
{{
wmndsBanner({
contentText: null,
contentHTML: "This is a new service - your <a href='#'>feedback</a> will help us to improve it.",
emergency: false,
onPage: false,
phase: false,
phaseText: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Specifies the content that will be part of the banner. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. Uses HTML to specify what content is to be shown in the banner. |
| emergency | boolean | If set to true the banner will display in the emergency style |
| onPage | boolean | If set to true the on page variant of the banner will display. |
| phase | boolean | If set to true the banner will display the phase indicator. |
| phaseText | string | Text to show in the phase indicator |
With phase indicator
What does it do?
- Helps users to identify when a service is new
- Offers users the opportunity to give feedback about a new service
When to use it?
- When a service is new
When not to use it?
- On a service that has matured and has a steadily positive rate of satisfaction
How it works
- A service can be in Alpha (prototype stage) or Beta (when it is on a publicly-accessible website)
- The survey link must point to a Hotjar or service feedback survey, with the service name within the URL. For example,
/?serviceName=descriptiveName. A service can either be in Alpha (prototype stage) or Beta (when it is on a publicly accessible website).
HTML markup
<div class="wmnds-banner-container">
<div class="wmnds-col-1">
<div class="wmnds-banner-container__phase-wrapper">
<span class="wmnds-phase-indicator">
Beta
</span>
</div>
<p class="wmnds-banner-container__text">
This is a new service - your
<a href="#" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
feedback
</a>
will help us to improve it.
</p>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/banner/_banner.njk" import wmndsBanner %}
{{
wmndsBanner({
contentText: null,
contentHTML: "This is a new service - your <a href='#'>feedback</a> will help us to improve it.",
emergency: false,
onPage: false,
phase: false,
phaseText: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Specifies the content that will be part of the banner. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. Uses HTML to specify what content is to be shown in the banner. |
| emergency | boolean | If set to true the banner will display in the emergency style |
| onPage | boolean | If set to true the on page variant of the banner will display. |
| phase | boolean | If set to true the banner will display the phase indicator. |
| phaseText | string | Text to show in the phase indicator |
Emergency banner
What does it do
- It communicates emergency information and provides advice on what to do.
- When an emergency is no longer relevant, the content will be archived or removed.
When to use it?
- When you need to communicate information that is urgent or critical, which will potentially affect a large group of our users. For example, if there is an emergency situation announced in Birmingham, the banner would advise all users on travel updates and guidance.
- The emergency banner should be placed directly below the main navigation.
- Only show one emergency banner notification at a time.
When not to use it?
- When a warning or emergency is directly related to a task the user is completing. In this case, use the appropriate Message component to notify users of any issues.
- If the issue is related to a service we are providing such as our customer service, you should place the Warning text and Inset text components next to the affected service, detailing the issue.
- Any disruptions to travel will be highlighted on the home page through the Disruption indicator components.
How it works
- The user can dismiss the Emergency banner through the 'Close' link. This will remove the current emergency banner from all pages they visit on the website.
- The On-page variant is only shown when a user is on the Emergency advice page, which can be accessed through the 'Read our latest advice' link.
Sitewide
HTML markup
<div class="wmnds-banner-container wmnds-banner-container--emergency">
<div class="wmnds-container wmnds-grid wmnds-grid--align-center">
<div class="wmnds-col-xl-1-24 wmnds-col-1-2 wmnds-banner-container__emergency-icon-col">
<svg class="wmnds-banner-container__emergency-icon-error">
<use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
</svg>
</div>
<div class="wmnds-col-xl-10-24 wmnds-col-1 wmnds-banner-container__emergency-title-col">
<h2 class="wmnds-h4 wmnds-m-b-none">Emergency notification title</h2>
</div>
<div class="wmnds-col-xl-10-24 wmnds-col-1 wmnds-banner-container__emergency-link-col">
<a href="#" target="_self" class="wmnds-link wmnds-banner-container__emergency-link">
Read our latest advice
<svg class="wmnds-banner-container__emergency-icon wmnds-m-l-sm">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
</div>
<div class="wmnds-col-xl-3-24 wmnds-col-1-2 wmnds-banner-container__emergency-close-col">
<button class="wmnds-banner-container__emergency-close">
Close
<svg class="wmnds-banner-container__emergency-icon wmnds-m-l-sm">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
</div>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/banner/_banner.njk" import wmndsBanner %}
{{
wmndsBanner({
contentText: null,
contentHTML: "This is a new service - your <a href='#'>feedback</a> will help us to improve it.",
emergency: false,
onPage: false,
phase: false,
phaseText: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Specifies the content that will be part of the banner. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. Uses HTML to specify what content is to be shown in the banner. |
| emergency | boolean | If set to true the banner will display in the emergency style |
| onPage | boolean | If set to true the on page variant of the banner will display. |
| phase | boolean | If set to true the banner will display the phase indicator. |
| phaseText | string | Text to show in the phase indicator |
On-page variant
HTML markup
<div class="wmnds-banner-container wmnds-banner-container--emergency">
<div class="wmnds-container wmnds-grid wmnds-grid--align-center">
<div class="wmnds-col-xl-1-24 wmnds-col-1-2 wmnds-banner-container__emergency-icon-col">
<svg class="wmnds-banner-container__emergency-icon-error">
<use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
</svg>
</div>
<div class="wmnds-col-xl-20-24 wmnds-col-1 wmnds-banner-container__emergency-title-col">
<h2 class="wmnds-h4 wmnds-m-b-none">Emergency notification title</h2>
</div>
<div class="wmnds-col-xl-3-24 wmnds-col-1-2 wmnds-banner-container__emergency-close-col">
<button class="wmnds-banner-container__emergency-close">
Close
<svg class="wmnds-banner-container__emergency-icon wmnds-m-l-sm">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
</div>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/banner/_banner.njk" import wmndsBanner %}
{{
wmndsBanner({
contentText: null,
contentHTML: "This is a new service - your <a href='#'>feedback</a> will help us to improve it.",
emergency: false,
onPage: false,
phase: false,
phaseText: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Specifies the content that will be part of the banner. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. Uses HTML to specify what content is to be shown in the banner. |
| emergency | boolean | If set to true the banner will display in the emergency style |
| onPage | boolean | If set to true the on page variant of the banner will display. |
| phase | boolean | If set to true the banner will display the phase indicator. |
| phaseText | string | Text to show in the phase indicator |
Travel mode page banner
What does it do?
- Helps users to identify the travel mode service
- Provides users with a short description of the travel service in the West Midlands
When to use it?
- Only on Travel Mode Landing Pages
When not to use it?
- On pages where the mode of travel is not operated by Transport for West Midlands, such as E-scooters
How it works
- The image container width will expand if users are viewing the page with a browser width higher than 1280px.
- The image within the container will zoom to fill the size of the image container.
- The image will be hidden on mobile devices. Our previous research found mobile users do not see the value of images on mobile pages.
- The image, modal icon and the Transport for West Midlands logo variant will change for each travel mode landing page.
HTML markup
<div class="wmnds-travel-mode-page-banner wmnds-travel-mode-page-banner--bus">
<div class="wmnds-container">
<div class="wmnds-travel-mode-page-banner__content">
<div class="wmnds-travel-mode-page-banner__copy">
<h2>Bus in the West Midlands</h2>
<p>It’s easy to travel by bus in the West Midlands. Buses are frequent, with many routes operating late into the evening and on Sundays.</p>
</div>
<div class="wmnds-travel-mode-page-banner__logos">
<svg>
<use xlink:href="#wmnds-modes-bg-bus" href="#wmnds-modes-bg-bus"></use>
</svg>
<img src="https://designsystem.tfwm.org.uk/img/logos/WM Bus/Landscape/White.png" alt="West Midlands Bus">
</div>
</div>
</div>
<div class="wmnds-travel-mode-page-banner__image wmnds-hide-mobile" style="background-image: url(/img/component-images/banner/bus-banner-img.png);">
<svg class="wmnds-travel-mode-page-banner__svg-background" viewBox="0 0 40 200">
<path d="M0,0v200h6.03l32.87-93.5c1.48-4.21,1.48-8.79,0-12.99L6.03,0H0z" />
</svg>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/travel-mode-page-banner/_travel-mode-page-banner.njk" import wmndsTravelModePageBanner %}
{{
wmndsTravelModePageBanner({
title: "Buses in the West Midlands",
contentHTML: "<p>It’s easy to travel by bus in the West Midlands. Buses are frequent, with many routes operating late into the evening and on Sundays.</p>",
image: "/img/component-images/banner/bus-banner-img.png",
mode: "bus"
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| title | string | Required. Title content to use in the banner. |
| contentHTML | string | Required. HTML content to use in the banner. |
| image | string | Required. Url for the image to be displayed in the banner. |
| mode | string | Transport mode the banner relates to. This will determine the icon and background colour which is displayed. Accepted values are bus, rail, metro, roads, walk, cycle and eScooter. If not set, will default to bus. |
HTML markup
<div class="wmnds-travel-mode-page-banner wmnds-travel-mode-page-banner--cycle">
<div class="wmnds-container">
<div class="wmnds-travel-mode-page-banner__content">
<div class="wmnds-travel-mode-page-banner__copy">
<h2>Cycling and walking in the West Midlands</h2>
<p>Cycling and walking is great exercise. There are plenty of places to explore in the West Midlands.</p>
</div>
<div class="wmnds-travel-mode-page-banner__logos">
<svg>
<use xlink:href="#wmnds-modes-bg-cycle" href="#wmnds-modes-bg-cycle"></use>
</svg>
<svg>
<use xlink:href="#wmnds-modes-bg-walk" href="#wmnds-modes-bg-walk"></use>
</svg>
<img src="https://designsystem.tfwm.org.uk/img/logos/WM Cycle + Walk/Landscape/White.png" alt="West Midlands eScooter">
</div>
</div>
</div>
<div class="wmnds-travel-mode-page-banner__image wmnds-hide-mobile" style="background-image: url(/img/component-images/banner/bus-banner-img.png);">
<svg class="wmnds-travel-mode-page-banner__svg-background" viewBox="0 0 40 200">
<path d="M0,0v200h6.03l32.87-93.5c1.48-4.21,1.48-8.79,0-12.99L6.03,0H0z" />
</svg>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/travel-mode-page-banner/_travel-mode-page-banner.njk" import wmndsTravelModePageBanner %}
{{
wmndsTravelModePageBanner({
title: "Buses in the West Midlands",
contentHTML: "<p>It’s easy to travel by bus in the West Midlands. Buses are frequent, with many routes operating late into the evening and on Sundays.</p>",
image: "/img/component-images/banner/bus-banner-img.png",
mode: "bus"
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| title | string | Required. Title content to use in the banner. |
| contentHTML | string | Required. HTML content to use in the banner. |
| image | string | Required. Url for the image to be displayed in the banner. |
| mode | string | Transport mode the banner relates to. This will determine the icon and background colour which is displayed. Accepted values are bus, rail, metro, roads, walk, cycle and eScooter. If not set, will default to bus. |
Purple branded banner
What does it do?
- Helps user to identify the brand or a service provider
When to use it?
- Only on Swift product landing pages such as Swift Go, PAYG, Swift and tickets and TfWM corporate landing page
When not to use it?
- On informational content pages
How it works
- The banner container width will expand if users are viewing the page with a browser width higher than 1280px
- User can add/remove text and call to action button
- User can add a logo in the title
HTML markup
<div class="wmnds-branded-banner">
<div class="wmnds-container">
<div class="wmnds-grid wmnds-grid--spacing-lg-2-xl wmnds-m-t-sm wmnds-m-b-sm">
<div class="wmnds-col-1 wmnds-col-md-2-3">
<h1 class="wmnds-branded-banner__title">
<svg class="wmnds-swift-logo-inline">
<use xlink:href="#wmnds-swift-full-logo" href="#wmnds-swift-full-logo"></use>
</svg>
and tickets
</h1>
<p class="wmnds-h3">We sell lots of tickets for bus, train and tram travel in the West Midlands</p>
<p>You can also combine different modes of travel to suit your needs. <br>Tickets can last from 1 day to a year.</p>
</div>
</div>
<div class="wmnds-col-1">
<a href="#" title="link title" target="_self" class="wmnds-btn wmnds-btn--dark-bg">
Find a ticket
<svg class="wmnds-btn__icon wmnds-btn__icon--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/branded-banner/_branded-banner.njk" import wmndsBrandedBanner %}
{{
wmndsBrandedBanner({
title: "<svg class=\"wmnds-swift-logo-inline\"><use xlink:href=\"#wmnds-swift-full-logo\" href=\"#wmnds-swift-full-logo\"></use></svg> and tickets",
contentCol1: "<p class=\".wmnds-h3\">We sell lots of tickets for bus, train and tram travel in the West Midlands</p><p>You can also combine different modes of travel to suit your needs. <br>Tickets can last from 1 day to a year.</p>",
transportModals: ["Bus", "Train", "Tram", "Park and ride"],
ctaButton: {
contentText: 'Find a ticket',
link: '#',
linkTitle: 'Find a ticket'
}
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| title | string | Required. HTML content to use as the title in the banner. |
| contentCol1 | string | Required. HTML content to use in the first column of the banner. |
| contentCol2 | string | HTML content to use in the second column of the banner. If left blank, this column will not display. |
| breadcrumbItems | array | Array of breadcrumb items to show in the banner. See the items property under Breadcrumb. |
| ctaButton | object | Call to action link (displayed as a button) to use in the banner. If not supplied, no button will be displayed. |
Options for ctaButton
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Text to use within the button. |
| link | string | Required. Link for the button. |
| linkTitle | string | Text to use as the link title. |
| linkTarget | string | Target attribute for the link. Defaults to "_self" |
Variant with transport modals
HTML markup
<div class="wmnds-branded-banner">
<div class="wmnds-container">
<div class="wmnds-grid wmnds-grid--spacing-lg-2-xl wmnds-m-t-sm wmnds-m-b-sm">
<div class="wmnds-col-1 wmnds-col-md-2-3">
<h1 class="wmnds-branded-banner__title">
<svg class="wmnds-swift-logo-inline">
<use xlink:href="#wmnds-swift-full-logo" href="#wmnds-swift-full-logo"></use>
</svg> pay as you go
</h1>
<p class="wmnds-h3">The cashless way to buy tickets on the bus and tram</p>
<p>A Swift card is a smartcard for public transport in the West Midlands. You load a Swift pay as you go card with credit to pay for journeys.</p>
<div class="wmnds-branded-banner__modals wmnds-m-b-lg">
<div class="wmnds-branded-banner__modal">
<svg class="wmnds-branded-banner__icon wmnds-branded-banner__icon--bus">
<use xlink:href="#wmnds-modes-bg-bus" href="#wmnds-modes-bg-bus"></use>
</svg>
Bus
</div>
<div class="wmnds-branded-banner__modal">
<svg class="wmnds-branded-banner__icon wmnds-branded-banner__icon--train">
<use xlink:href="#wmnds-modes-bg-rail" href="#wmnds-modes-bg-rail"></use>
</svg>
Train
</div>
<div class="wmnds-branded-banner__modal">
<svg class="wmnds-branded-banner__icon wmnds-branded-banner__icon--tram">
<use xlink:href="#wmnds-modes-bg-metro" href="#wmnds-modes-bg-metro"></use>
</svg>
Tram
</div>
<div class="wmnds-branded-banner__modal wmnds-branded-banner__icon--p-r">
<svg class="wmnds-branded-banner__icon">
<use xlink:href="#wmnds-modes-bg-p-r" href="#wmnds-modes-bg-p-r"></use>
</svg>
Park and ride
</div>
</div>
</div>
</div>
<div class="wmnds-col-1">
<a href="#" title="Get a Swift Pay as you go" target="_self" class="wmnds-btn wmnds-btn--dark-bg">
Get a Swift Pay as you go
<svg class="wmnds-btn__icon wmnds-btn__icon--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/branded-banner/_branded-banner.njk" import wmndsBrandedBanner %}
{{
wmndsBrandedBanner({
title: "<svg class=\"wmnds-swift-logo-inline\"><use xlink:href=\"#wmnds-swift-full-logo\" href=\"#wmnds-swift-full-logo\"></use></svg> and tickets",
contentCol1: "<p class=\".wmnds-h3\">We sell lots of tickets for bus, train and tram travel in the West Midlands</p><p>You can also combine different modes of travel to suit your needs. <br>Tickets can last from 1 day to a year.</p>",
transportModals: ["Bus", "Train", "Tram", "Park and ride"],
ctaButton: {
contentText: 'Find a ticket',
link: '#',
linkTitle: 'Find a ticket'
}
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| title | string | Required. HTML content to use as the title in the banner. |
| contentCol1 | string | Required. HTML content to use in the first column of the banner. |
| contentCol2 | string | HTML content to use in the second column of the banner. If left blank, this column will not display. |
| breadcrumbItems | array | Array of breadcrumb items to show in the banner. See the items property under Breadcrumb. |
| ctaButton | object | Call to action link (displayed as a button) to use in the banner. If not supplied, no button will be displayed. |
Options for ctaButton
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Text to use within the button. |
| link | string | Required. Link for the button. |
| linkTitle | string | Text to use as the link title. |
| linkTarget | string | Target attribute for the link. Defaults to "_self" |
Homepage
What does it do?
- Provides a visual illustration of our most popular transport modes
- Highlights a welcome message for visitors of the West Midlands Network site
When to use it?
- On the homepage
When not to use it?
- On pages where the mode of travel is not operated by Transport for West Midlands, such as E-scooters
How it works
- The banner image will change on each page refresh. There are three images that will be shown in the banner, one for bus, train and tram
- The welcome message requires a Primary Purple highlight to provide sufficient colour contrast against the banner image
HTML markup
<div class="wmnds-homepage-banner" style="background-image: url(/img/component-images/banner/homepage-banner-img.png);">
<div class="wmnds-container">
<h1 class="wmnds-homepage-banner__title">
<span class="wmnds-homepage-banner__title-content">Bringing transport <br>together</span>
</h1>
</div>
</div>
Nunjucks markup
{% from "wmnds/patterns/banner/homepage-banner/_homepage-banner.njk" import wmndsHomepageBanner %}
{{
wmndsHomepageBanner({
titleHTML: "Bringing transport <br>together",
image: "/img/component-images/banner/homepage-banner-img.png",
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| titleText | string | Title text to use in the banner. |
| titleHTML | string | HTML title content to use in the banner. If titleText is provided, the titleHTML argument will be ignored. |
| image | string | Url for the image to be displayed in the banner. |