Components are reusable parts of the user interface that have been made to support a variety of
- applications.
-
-
Individual components can be used in multiple different patterns and contexts. For example, the
- text input component can be used to ask for an email address, a National Insurance number or someone’s name.
-
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
- coded examples provided will render exactly as they do inside the Design System.
Components are reusable parts of the user interface that have been made to support a variety of
+ applications.
+
+
Individual components can be used in multiple different patterns and contexts. For example, the
+ text input component can be used to ask for an email address, a National Insurance number or someone’s name.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples provided will render exactly as they do inside the Design System.
{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/components/index.njk b/src/www/pages/mc/components/index.njk
index c6263a20..d055b8ef 100755
--- a/src/www/pages/mc/components/index.njk
+++ b/src/www/pages/mc/components/index.njk
@@ -1,5 +1,6 @@
{% extends "www/_layouts/layout-left-pane.njk" %}
{% set pageTitle = "Components" %}
+{% set ds = 'mc' %}
{% block content %}
Components are reusable parts of the user interface that have been made to support a variety of
diff --git a/src/www/pages/mc/components/patterns/autocomplete/index.njk b/src/www/pages/mc/components/patterns/autocomplete/index.njk
new file mode 100644
index 00000000..0f829eb8
--- /dev/null
+++ b/src/www/pages/mc/components/patterns/autocomplete/index.njk
@@ -0,0 +1,135 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Autocomplete" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{# Imports #}
+{% from "wmcads/patterns/autocomplete/_autocomplete.njk" import wmcadsAutocomplete %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+ The autocomplete component is an input field that offers the user text suggestions as they type.
+ This is often done by hitting an API endpoint with the users query when the user has finished typing.
+
+
+ The autocomplete pattern is a combination of the input and loader components.
+
+{# When #}
+
When to use it?
+
+
As a progressive enhancement to make a users journey shorter/easier when searching
+
When you have a smaller data set/list that is quick to query
+
When you want to ensure the user submits a relevant query/value
+
+{# When not #}
+
When not to use it?
+
+
When you have a massive set of data, instead you should have an input/search that shows results after submission.
+
Don't use this component as if it is a search box. Autocomplete is to suggest a value to a user via it's results not act as a results page for a search.
+
+
+
+{# Default #}
+
Default state
+
In its default state, the autcomplete component is made up of a text input with a search icon.
+
For best practice, ensure that the placeholder and aria-label describes what the autocompletes intended purpose is.
+
Notice that there is also a ds-loader component nested within the autocomplete, more on that in the next section.
+ When a user types in a query, you may want to have some code that hits an API or gets the data/suggestions for the autocomplete from somewhere. To help users understand that they need to wait for something we can change the autocomplete to a loading state.
+ We do this by adding the class ds--is-loading to the top level of the autocomplete (this is the only difference between the loading state and default state code snippets).
+
+
As mentioned in the previous section, there is a ds-loader component nested in the autocomplete. When adding the ds--is-loading class, it will hide the search icon and show the loading spinner in it's place.
+
Below is an example of how the autocomplete looks when a user has typed in 'My query' and is waiting for autocomplete suggestions to load.
+
+
It is good practice to:
+
+
Show loading state when waiting for data to load
+
Let the user finish typing before you fetch autocomplete suggestions (add a debounce)
+
Add the ds-is--loading class as soon as you are fetching data
The final state of the autocomplete is showing the suggestions.
+
You'll notice there is a new section in the code snippet called ds-autocomplete-suggestions, this should be shown/visible when your API/data has loaded the suggestions.
+
It's good practice to:
+
+
Show the suggestions in an unordered list
+
Ensure there is a title tag on the .ds-autocomplete-suggestions__li describing further information about the suggestion
+
Ensure there is a tabindex="0" attribute on the .ds-autocomplete-suggestions__li to allow users to tab through the results with a keyboard
+
+
+
Default (text)
+
The most commonly used suggestions will be displayed as text only.
You will notice that the suggestions are much bigger than text only results, and have an overflow scrollbar. This scrollbar will appear if the height of the suggestion container goes over a certain height.
+
+ As you can see from the code snippet, the main ds-autocomplete-suggestions and ds-autocomplete-suggestions__li classes are prevelant on the ul and li elements. Within the li element we have nested the disruption indicator component whilst also using the wmcads grid. This gives enough flexibility to style the suggestions to how we want, find out more in the next section.
+
There are many ways in which you can show the suggestions, as the autocomplete component has been built in a way that the suggestion results can be custom styled to how you like.
+
+ As long as you have the ul element with the class ds-autocomplete-suggestions which contains a direct child li element that has the class ds-autocomplete-suggestions__li then you can fully customise how you want the suggestions to look.
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/components/patterns/banner/index.njk b/src/www/pages/mc/components/patterns/banner/index.njk
new file mode 100644
index 00000000..f7eee3ec
--- /dev/null
+++ b/src/www/pages/mc/components/patterns/banner/index.njk
@@ -0,0 +1,273 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Banner" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/banner/_banner.njk" import wmcadsBanner %}
+
+{% block content %}
+
+{% markdown %}
+
+## Normal
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentHTML: "This is a new service - your feedback will help us to improve it."
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+
+{% markdown %}
+
+{# Banner with phase indicator #}
+
+## With phase indicator
+
+{# What #}
+
+### 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 #}
+
+### When to use it?
+
+- When a service is new
+
+{# When not to #}
+
+### When not to use it?
+
+- On a service that has matured and has a steadily positive rate of satisfaction
+
+{# How #}
+
+### 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).
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ phase: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+
+{% markdown %}
+
+{# Emergency banner #}
+
+## Emergency banner
+
+{# What #}
+
+
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 #}
+
+
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 #}
+
+
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 #}
+
+
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 #}
+
+### Sitewide
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentText: "Emergency notification title",
+ emergency: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{% markdown %}
+{# On-page #}
+
+### On-page variant
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentText: "Emergency notification title",
+ emergency: true,
+ onPage: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+{% markdown %}
+
+{# Hub page banner #}
+
+## Hub page banner
+
+{# What #}
+
+
What does it do?
+
+- Helps users to identify they have eventered a Hub section of the website
+- Provides users with a short description of the chosen hub of the WMCA
+
+{# When #}
+
+
When to use it?
+
+- Only on Hub Landing Pages
+
+
When not to use it?
+
+- On pages where the content is not related to a hub overview
+
+
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, optional logo or icon will change for each hub landing page.
+
+{% endmarkdown %}
+
+{% from "wmcads/patterns/hub-page-banner/_hub-page-banner.njk" import wmcadsHubPageBanner %}
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ contentHTML: "Example using a short description"
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ contentHTML: "Example using an example brand logo with a longer text description",
+ logo: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ title: "Hub Header with a longer example title"
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{% markdown %}
+
+{# Homepage banner #}
+
+## Homepage
+
+{# What #}
+
+
What does it do?
+
+- Provides a complementary image associated with the West Midlands
+- Highlights a welcome message for visitors of the West Midlands Combined Authority site
+
+{# When #}
+
+
A card with disruption indicator components in, which show the live status of a bus, train or tram route and roads.
+
+{# When to #}
+
When to use it?
+
+
When the live status of a mode of transport is useful to the content. For example, showing the live status of train lines next to content about trains.
+
+{# When not to #}
+
When not to use it?
+
+
When the live status is irrelevant to the content. Users can find this information on the homepage.
+
+
+{# Set up travel updates #}
+{% from "wmcads/patterns/content-cards/travel-updates/_travel-updates.njk" import wmcadsContentCardTravelUpdates %}
+
+{{
+ compExample([
+ wmcadsContentCardTravelUpdates()
+ ])
+}}
+
+
+{# Button card #}
+
Button card
+{# What #}
+
What is it?
+
+
A card with several buttons in.
+
+{# When to #}
+
When to use it?
+
+
To direct users to different content relevant to their needs.
+
At the end of the main page content. We found that users preferred to split lots of content into smaller, specific pages and that this was the best way to continue the journey after reading the main overview content.
+
+{# When not to #}
+
When not to use it?
+
+
To attract the user's attention if there is no benefit to them reading the content.
+
To list links within a section or related content. Use the in-line navigation card instead.
+
+
+{# Set up buttons #}
+{% from "wmcads/patterns/content-cards/buttons/_buttons.njk" import wmcadsContentCardButtons %}
+
+{{
+ compExample([
+ wmcadsContentCardButtons()
+ ])
+}}
+
+
+{# Image card #}
+
Image card
+{# What #}
+
What is it?
+
+
A card with an image in.
+
+{# When to #}
+
When to use it?
+
+
To display an image within a tile.
+
When the image complements the text.
+
+{# When to to #}
+
When not to use it?
+
+
When the image has text in. This distracts the user and usually fails accessibility criteria.
+
When the image is a cartoon or illustration. These are called vector images. Vector images display as poor quality for many users.
+
+
+{# Set up image #}
+{% from "wmcads/patterns/content-cards/image/_image.njk" import wmcadsContentCardImage %}
+
+{{
+ compExample([
+ wmcadsContentCardImage()
+ ])
+}}
+
+
+{# In-line navigation card #}
+
In-line navigation card
+{# What #}
+
What is it?
+
+
A card with in-text links for navigation of sections and displaying related content.
+
+{# When to #}
+
When to use it?
+
+
To help the user navigate a collection of pages. This is called a section.
+
To show related content which meets user needs.
+
To help the user navigate a long page using in-text anchors.
+
Only use this pattern in a sidebar.
+
+{# When not to #}
+
When not to use it?
+
+
When the page links you are listing to form part of a journey or process. The journey should be linear.
+
When you are trying to attract the user's attention. This is called a call-to-action.
+
+{# How to #}
+
How to use it
+
+
The group of links must have a title to help users understand what the links are for. For example, 'Related content', 'On this page' or the section name.
+
If the card is used to navigate a long page of content, it should be displayed on the left-hand side.
+
If the card is used to navigate a set of pages, like a section or related content, it should be displayed on the right-hand side.
+
The current page or section being viewed must be inset.
+
+
+{# Set up inline navigation #}
+{% from "wmcads/patterns/content-cards/inline-navigation/_inline-navigation.njk" import wmcadsContentCardInlineNavigation %}
+
+{{
+ compExample([
+ wmcadsContentCardInlineNavigation()
+ ])
+}}
+
+{# With current page #}
+
Allows the user to sign up for updates when information changes on a page.
+
Sends personalised updates to users based on their location.
+
+{# When to #}
+
When to use it?
+
+
Use these content tiles on pages where users can sign-up for newsletter updates.
+
For a standard newsletter sign up, use the content tile where the text fields expand.
+
If you want to capture additional user data, then use the content block which links to an external form, e.g. Campaign Monitor.
+
+
When adding a sign up form from Campaign Monitor, you are provided with HTML markup, but make sure not to change any of the generated attributes except for classes.
+
They have been changed in the following examples to avoid accessibility errors.
+
+
+{# Set up email sign up #}
+{% from "wmcads/patterns/content-cards/email-sign-up/_email-sign-up.njk" import wmcadsContentCardEmailSignUp %}
+
+{# Collapsed #}
+
Collapsed
+
This is the default state for the email sign up card.
Use this content card when you want to send users to an external Campaign Monitor form if you want to capture more user data such as demographics, travel habits etc.
Allows users to accept or amend our website's cookie settings.
+
Our cookie preferences should be confirmed before a user can use our website.
+
The Manage cookies pattern allows users to change their cookie preferences.
+
+
+
+
Cookie banner
+{# When to #}
+
When to use it?
+
+
+ When a user first visits the West Midlands Combined Authority website and has not accepted or amended the cookie preferences.
+
+
+ The banner should be above the header on every page and only disappear when a user has accepted or amended their
+ cookie preferences.
+
+
+{# When not to #}
+
When not to use it?
+
+
When a user has accepted or amended the website's cookies.
+
+ When a returning user visits the West Midlands Combined Authority website and has already accepted or amended their cookies in
+ a previous session.
+
+
+{# How #}
+
How it works
+
+
When a user has accepted or amended the website's cookies.
+
+ When a returning user visits the West Midlands Combined Authority website and has already accepted or amended their cookies in
+ a previous session.
+
+
+
The Cookies banner should be placed above the main header and be on every page
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 Transport for West Midlands 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 ds-footer--mobile-app to the ds-footer element
+
+
+
+ You will most likely want to use this with the mobile variants of the
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'header pattern',
+ link: '#mobile-app-header'
+ })
+ }} .
+
+
+{{
+ compExample([
+ wmcadsFooter({
+ app: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/footer/",
+ njk: false,
+ js: true
+ })
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/components/patterns/header-and-footer/index.njk b/src/www/pages/mc/components/patterns/header-and-footer/index.njk
new file mode 100644
index 00000000..8e42881b
--- /dev/null
+++ b/src/www/pages/mc/components/patterns/header-and-footer/index.njk
@@ -0,0 +1,212 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Header and footer" %}
+{% set section="Patterns" %}
+{# Imports #}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+{% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+{%- from "wmcads/components/link/link/_link.njk" import wmcadsLink -%}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
The primary way of navigating the website
+
Standardised pattern
+
+{# When #}
+
When to use it?
+
+
Every page must have a header and a footer
+
+
+
+
+
+
+{# Header #}
+
Header
+{# Skip Link #}
+
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 ds-main-content so the user can skip to this section.
+{# Logo #}
+
Logo
+
This must always be the West Midlands Combined Authority logo.
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 #}
+
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 #}
+
Search
+
This functionality only shows for desktop and tablet users. When clicked, search expands and takes over the whole page.
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 .ds-header__title .ds-col-1 .ds-col-sm-auto on the element
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 Combined Authority header.
+
+
To use the mobile app variant:
+
+
Add the modifier class ds-header--mobile-app to the ds-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
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'footer pattern',
+ link: '#mobile-app-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 Combined Authority 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 ds-footer--mobile-app to the ds-footer element
+
+
+
+ You will most likely want to use this with the mobile variants of the
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'header pattern',
+ link: '#mobile-app-header'
+ })
+ }} .
+
+
+{{
+ compExample([
+ wmcadsFooter({
+ app: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/footer/",
+ njk: false,
+ js: true
+ })
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/components/patterns/header-demo/index.njk b/src/www/pages/mc/components/patterns/header-demo/index.njk
new file mode 100644
index 00000000..c32de977
--- /dev/null
+++ b/src/www/pages/mc/components/patterns/header-demo/index.njk
@@ -0,0 +1,220 @@
+
+
+
+ {% include "www/_partials/_head.njk" %}
+
+
+
+
+
+ {# header #}
+ {% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+ {{
+ wmcadsHeader({
+ id: "mega-menu-example",
+ search: true,
+ searchSuggestions: ["See live departures", "Find a timetable", "Check for disruptions", "Manage my Swift card", "Find ticket prices", "Get a refund", "Update Direct Debit", "Apply for a 16-18 photocard"],
+ navItems: [{
+ name: "Plan a journey",
+ subnavItems: [{
+ name: "Plan your journey",
+ icon: "general-route",
+ subnavItems: [{
+ name: "Journey planner"
+ },
+ {
+ name: "Find a timetable"
+ },
+ {
+ name: "Live and planned disruptions"
+ },
+ {
+ name: "Major roadworks and events"
+ }]
+ },
+ {
+ name: "Ways to travel",
+ icon: "general-location-arrow",
+ subnavItems: [{
+ name: "Walking"
+ },
+ {
+ name: "Cycling"
+ },
+ {
+ name: "Buses"
+ },
+ {
+ name: "Trains"
+ },
+ {
+ name: "Trams"
+ },
+ {
+ name: "Park and ride"
+ },
+ {
+ name: "Driving"
+ }]
+ },
+ {
+ name: "Travel information",
+ icon: "general-info",
+ subnavItems: [{
+ name: "How to travel with accessibility needs"
+ },
+ {
+ name: "How to travel safely"
+ },
+ {
+ name: "How to get to hospital"
+ }]
+ },
+ {
+ name: "Discover our region",
+ icon: "general-star",
+ subnavItems: [{
+ name: "Places and attractions to visit"
+ },
+ {
+ name: "Find discount vouchers"
+ }]
+ }]
+ }, {
+ name: "Swift and tickets",
+ subnavItems: [{
+ name: "Find a ticket",
+ icon: "general-search",
+ subnavItems: [{
+ name: "Ticket finder"
+ },
+ {
+ name: "Types of ticket"
+ }]
+ },
+ {
+ name: "Discounts and free travel passes",
+ icon: "general-wallet",
+ subnavItems: [{
+ name: "Under 18s"
+ },
+ {
+ name: "Students"
+ },
+ {
+ name: "Families and groups"
+ },
+ {
+ name: "Finding or starting a new job"
+ },
+ {
+ name: "Disabled person's pass"
+ },
+ {
+ name: "Older person's pass"
+ },
+ {
+ name: "WASPI women's pass"
+ }]
+ },{
+ name: "Manage your Swift card",
+ icon: "swift-bird-icon",
+ subnavItems: [{
+ name: "How to use your Swift card"
+ },
+ {
+ name: "Update your personal details"
+ },
+ {
+ name: "Top up your Swift card"
+ },
+ {
+ name: "View your payment history"
+ },
+ {
+ name: "View your travel history"
+ },
+ {
+ name: "Replace your lost Swift card"
+ }]
+ },{
+ name: "Manage your ticket",
+ icon: "general-ticket",
+ subnavItems: [
+ {
+ name: "Update your Direct Debit"
+ },
+ {
+ name: "Get a refund"
+ },
+ {
+ name: "Make a payment"
+ },
+ {
+ name: "Replace your lost ticket or pass"
+ }
+ ]
+ }]
+ },{
+ name: "Get help",
+ subnavItems: [{
+ name: "Contact an operator"
+ },
+ {
+ name: "Find a travel centre"
+ },
+ {
+ name: "Find lost property"
+ },
+ {
+ name: "Give feedback"
+ },
+ {
+ name: "Contact us"
+ },
+ {
+ name: "Report anti-social behaviour"
+ },
+ {
+ name: "Request a new bus shelter or stop pole"
+ },
+ {
+ name: "Report a problem with a shelter or stop"
+ }]
+ }],
+ megaMenu: true
+ })
+ }}
+ {# header #}
+
+
+ {# main #}
+
+ Close window
+
+ {# main #}
+
+
+ {% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+ {{
+ wmcadsFooter({
+ bottomMenu: [{
+ name: "Privacy & Cookies Policy",
+ link: "https://www.wmca.org.uk/privacy-cookies-policy/"
+ }]
+ })
+ }}
+
+
+
+ {% include "www/_partials/_scripts.njk" %}
+
+
+
+
diff --git a/src/www/pages/mc/components/patterns/header/index.njk b/src/www/pages/mc/components/patterns/header/index.njk
new file mode 100644
index 00000000..423c907b
--- /dev/null
+++ b/src/www/pages/mc/components/patterns/header/index.njk
@@ -0,0 +1,305 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Header" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{# Imports #}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+{% from "wmcads/patterns/header-v2/_header-v2.njk" import wmcadsHeaderV2 %}
+{% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/warning-text/_warning-text.njk" import wmcadsWarningText %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
The primary way of navigating the website
+
Standardised pattern
+
+{# When #}
+
When to use it?
+
+
Every page must have a header and a footer
+
+
+
+{# Header #}
+
Header
+{# Skip Link #}
+
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 ds-main-content so the user can skip to this section.
+{# Logo #}
+
Logo
+
This must always be the Transport for West Midlands logo.
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 #}
+
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 #}
+
Search
+
This function expands the mega menu and reveals the search bar along with the ‘I want to…’ feature.
+
The ‘I want to...’ feature shows a list of the top page links which users access through search. This is to help users find the information they are searching for faster. These links are regularly updated using search data to maintain their relevance.
+
On mobile, the mega menu search function uses a primary purple background instead of the standard white background. Our user testing found users preferred the white link text on the primary purple background as it is clearer to read.
+
+{{
+ compExample([
+ wmcadsHeaderV2({
+ id: "mega-menu-example",
+ search: true,
+ placeholder: "fg",
+ brand: "wmca",
+ navItems: [{
+ name: "The Mayor",
+ subnavItems: [{
+ name: "Plan your journey",
+ icon: "general-route",
+ subnavItems: [{
+ name: "Journey planner"
+ },
+ {
+ name: "Find a timetable"
+ },
+ {
+ name: "Live and planned disruptions"
+ },
+ {
+ name: "Major roadworks and events"
+ }]
+ },
+ {
+ name: "Ways to travel",
+ icon: "general-location-arrow",
+ subnavItems: [{
+ name: "Walking"
+ },
+ {
+ name: "Cycling"
+ },
+ {
+ name: "Buses"
+ },
+ {
+ name: "Trains"
+ },
+ {
+ name: "Trams"
+ },
+ {
+ name: "Park and ride"
+ },
+ {
+ name: "Driving"
+ }]
+ },
+ {
+ name: "Travel information",
+ icon: "general-info",
+ subnavItems: [{
+ name: "How to travel with accessibility needs"
+ },
+ {
+ name: "How to travel safely"
+ },
+ {
+ name: "How to get to hospital"
+ }]
+ },
+ {
+ name: "Discover our region",
+ icon: "general-star",
+ subnavItems: [{
+ name: "Places and attractions to visit"
+ },
+ {
+ name: "Find discount vouchers"
+ }]
+ }]
+ }, {
+ name: "Who we are",
+ subnavItems: [{
+ name: "Find a ticket",
+ icon: "general-search",
+ subnavItems: [{
+ name: "Ticket finder"
+ },
+ {
+ name: "Types of ticket"
+ }]
+ },
+ {
+ name: "Discounts and free travel passes",
+ icon: "general-wallet",
+ subnavItems: [{
+ name: "Under 18s"
+ },
+ {
+ name: "Students"
+ },
+ {
+ name: "Families and groups"
+ },
+ {
+ name: "Finding or starting a new job"
+ },
+ {
+ name: "Disabled person's pass"
+ },
+ {
+ name: "Older person's pass"
+ },
+ {
+ name: "WASPI women's pass"
+ }]
+ },{
+ name: "Manage your Swift card",
+ icon: "swift-bird-icon",
+ subnavItems: [{
+ name: "How to use your Swift card"
+ },
+ {
+ name: "Update your personal details"
+ },
+ {
+ name: "Top up your Swift card"
+ },
+ {
+ name: "View your payment history"
+ },
+ {
+ name: "View your travel history"
+ },
+ {
+ name: "Replace your lost Swift card"
+ }]
+ },{
+ name: "Manage your ticket",
+ icon: "general-ticket",
+ subnavItems: [
+ {
+ name: "Update your Direct Debit"
+ },
+ {
+ name: "Get a refund"
+ },
+ {
+ name: "Make a payment"
+ },
+ {
+ name: "Replace your lost ticket or pass"
+ }
+ ]
+ }]
+ },{
+ name: "What we do",
+ subnavItems: [{
+ name: "Contact an operator"
+ },
+ {
+ name: "Find a travel centre"
+ },
+ {
+ name: "Find lost property"
+ },
+ {
+ name: "Give feedback"
+ },
+ {
+ name: "Contact us"
+ },
+ {
+ name: "Report anti-social behaviour"
+ },
+ {
+ name: "Request a new bus shelter or stop pole"
+ },
+ {
+ name: "Report a problem with a shelter or stop"
+ }]
+ },{
+ name: "In my area"
+ },{
+ name: "Contact us"
+ }],
+ megaMenu: true,
+ megaMenuDemo: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/header-v2/",
+ njk: false,
+ js: true,
+ iframe: true
+ })
+}}
+
+{# With title variant #}
+
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 .ds-header__title .ds-col-1 .ds-col-sm-auto on the element
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/components/patterns/index.njk b/src/www/pages/mc/components/patterns/index.njk
new file mode 100644
index 00000000..55ff4044
--- /dev/null
+++ b/src/www/pages/mc/components/patterns/index.njk
@@ -0,0 +1,16 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Patterns" %}
+{% set section = "Patterns" %}
+{% set ds = 'mc' %}
+
+{% block content %}
+
Patterns are reusable parts of the user interface that have been made to support a variety of
+ applications.
+
+
Individual patterns can be used in multiple different patterns and contexts. For example, the
+ text input component
+ can be used to ask for an email address, a National Insurance number or someone’s name.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples provided
+ will render exactly as they do inside the Design System.
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/components/patterns/question-form/index.njk b/src/www/pages/mc/components/patterns/question-form/index.njk
new file mode 100644
index 00000000..495871f1
--- /dev/null
+++ b/src/www/pages/mc/components/patterns/question-form/index.njk
@@ -0,0 +1,127 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Question form" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
What does it do?
+
+
Asks a user questions which a service requires.
+
Helps to break down complex forms by spreading questions across multiple pages.
+
+
When to use it?
+
+
When you are asking users for information as part of a service.
+
When a form is required to be spread across multiple pages.
+
+
When not to use it?
+
+
When there are multiple questions on the same page, unless you have user research that says it makes sense to group the questions.
+
+
How it works?
+
+
Always test questions with users through user research
This shows the user all of the data they have entered before they submit the form. This stage allows the user to change any details before submitting the form.
+ {% from "wmcads/patterns/question/summary/_summary.njk" import wmcadsSummary %}
+ {% from "wmcads/components/table/_table.njk" import wmcadsTable %}
+ {% from "wmcads/components/button/_button.njk" import wmcadsButton %}
+ {{
+ compExample([
+ wmcadsSummary({
+ question: "Check your answers before reinstating your Direct Debit",
+ html:
+"
Now send your request
+
By submitting this request you are confirming that, to the best of your knowledge, the details you are providing are correct.
+ You consent to West Midlands Combined Authority possibly changing your Direct Debit date if it usually would occur in the next 10 days.
+ You also consent to West Midlands Combined Authority reinstating your Direct Debit instruction.
This is a confirmation message to show that the user has successfully submitted the data in the form, along with a reference or any information which the user needs to be made aware of.
+ {% from "wmcads/patterns/question/confirmation-message/_confirmation-message.njk" import wmcadsConfirmationMessage %}
+ {{
+ compExample([
+ wmcadsConfirmationMessage() | indent(4) | trim
+ ])
+ }}
+ {# End Confirmation Message #}
+
+{% endblock %}
diff --git a/src/www/pages/mc/components/patterns/search/index.njk b/src/www/pages/mc/components/patterns/search/index.njk
new file mode 100644
index 00000000..01d64df5
--- /dev/null
+++ b/src/www/pages/mc/components/patterns/search/index.njk
@@ -0,0 +1,147 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Search" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
What does it do?
+
+
Allows the user to search for information across the West Midlands Combined Authority website
+
+
When to use it?
+
+
When a user needs to find the information they need, which they cannot find through the main navigation
+
+
How it works
+
+
Users should only be able to access the search function through the header by hovering or selecting the magnifying glass icon
+
The search bar will appear in a dropdown along with the ‘I want to…’ feature, where users can access popular search queries
+
Once a user submits their search query, they will be able to view the search results. They can sort and filter the search results on the search results page
+
+
+
+ {# Search bar #}
+
Search bar
+ {% from "wmcads/patterns/search/search-bar/_search-bar.njk" import wmcadsSearchbar %}
+ {{
+ compExample([
+ wmcadsSearchbar()
+ ])
+ }}
+ {# End Search bar #}
+
+
+
+ {# Sort #}
+
Sort
+
What does it do?
+
+
+ This gives the user the option to sort search results by relevance or when a page was last updated
+
This gives the user the option to filter search results using a predetermined set of filters
+
+
When to use it?
+
+
The filters will narrow down the search results by displaying pages which only match the filter criteria
+
On mobile, the filter options will appear when a user clicks on the ‘Filter your results button’. This will trigger an overlay where users can select and apply filters. This is to reduce page size on smaller devices
This is how a matching page will display in the search results page
+
+
How it works
+
+
Each page result will show the page breadcrumbs on desktop. On mobile, breadcrumbs are not shown. This is to reduce page size on smaller devices
+
The page description will display main body copy which is highest on the page. The description will be a maximum of 150 characters. Any descriptions longer than 150 characters will be truncated.
+
If the user’s search query is in the page description, it will be highlighted in bold. This is to help them understand the context of the page
+
The horizontal rule at the bottom of a search result is to make the results list easier to scan.
+
+ {% from "wmcads/patterns/search/search-result/_search-result.njk" import wmcadsSearchResult %}
+ {{
+ compExample([
+ wmcadsSearchResult(
+ {
+ pageTitle: "Swift: The smarter way to travel",
+ breadcrumbs: ['Home', 'Swift'],
+ excerpt: "Swift is the easy and flexible way to travel around the West Midlands. find the swift card for you. How do you travel? bus…"
+ }
+ )
+ ])
+ }}
+ {# End search result #}
+
+ {# Pagination #}
+
Pagination links
+
What does it do?
+
+
Allows the user to navigate through search results.
+
+{% endblock %}
diff --git a/src/www/pages/mc/components/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js b/src/www/pages/mc/components/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js
new file mode 100644
index 00000000..8371607f
--- /dev/null
+++ b/src/www/pages/mc/components/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js
@@ -0,0 +1,71 @@
+function aToZContentStyleGuide() {
+ // FUNCTIONS
+ // Change accordion state
+ const changeAccordionState = (accordionElem, changeStateToOpen = true) => {
+ const accordionBtn = accordionElem.querySelector('.ds-accordion__summary-wrapper');
+ if (changeStateToOpen) {
+ accordionElem.classList.add('ds-is--open');
+ accordionBtn.setAttribute('aria-expanded', true);
+ } else {
+ accordionElem.classList.remove('ds-is--open');
+ accordionBtn.setAttribute('aria-expanded', false);
+ }
+ };
+
+ // Change all accordion states at once
+ const changeAllAccordionStates = changeStateToOpen => {
+ const accordions = document.querySelectorAll('main .ds-accordion');
+ accordions.forEach(accordion => changeAccordionState(accordion, changeStateToOpen));
+ };
+
+ // Scroll to an anchor within an accordion
+ const scrollToAnchor = idWithHash => {
+ // Check if element is on the page
+ const elem = document.querySelector(idWithHash);
+ if (!elem || elem.classList.contains('ds-accordion__summary-wrapper')) {
+ return;
+ }
+ // Open accordion and scroll to element
+ changeAccordionState(elem.parentElement.parentElement);
+ elem.scrollIntoView();
+ };
+
+ // Check for anchor to scroll to onload
+ const scrollToAnchorOnLoad = () => {
+ if (document.location.hash) {
+ scrollToAnchor(document.location.hash);
+ }
+ };
+
+ // Add event listener to all section links on the page
+ const setupScrollToAnchor = () => {
+ const anchors = document.querySelectorAll('main a[href^="#"]:not([href="#"])');
+ // Loop through an add event listener
+ anchors.forEach(anchor => {
+ anchor.addEventListener('click', e => {
+ e.preventDefault();
+ scrollToAnchor(anchor.hash);
+ });
+ });
+ };
+
+ // Set up controls
+ const setupAccordionControls = () => {
+ const controls = document.querySelectorAll('main .js-accordion-controls button');
+
+ controls.forEach(control => {
+ control.addEventListener('click', () => {
+ changeAllAccordionStates(control.classList.contains('js-accordion-controls-open'));
+ });
+ });
+ };
+
+ // CALL FUNCTIONS
+ if (document.querySelector('#atozofstyle')) {
+ scrollToAnchorOnLoad();
+ setupScrollToAnchor();
+ setupAccordionControls();
+ }
+}
+
+export default aToZContentStyleGuide;
diff --git a/src/www/pages/mc/components/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json b/src/www/pages/mc/components/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json
new file mode 100644
index 00000000..143a4f85
--- /dev/null
+++ b/src/www/pages/mc/components/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json
@@ -0,0 +1,538 @@
+{
+ "aToZOfStyles": [
+ {
+ "letter": "A",
+ "styles": [
+ {
+ "title": "Abbreviations and acronyms",
+ "content": "
The first time you use an abbreviation or acronym explain it in full on each page unless it's well known, like UK or BBC. Then refer to it by initials.
Do not use full stops in abbreviations: BBC, not B.B.C.
If you only use a term once, you don't need to include the abbreviation afterwards.
Use 'm' (for millions) and 'bn' (for billions) for sums of money and measurable quantities: £10bn; 1bn litres of water. However, spell out for people and countable nouns: 3 billion commuters; 10 billion tickets.
Use lower case for standard measurements: kg; km; lb; mph but use upper case for KB; GB; MB.
Exception: Spell out metres to prevent confusion with abbreviation for million.
Note:
Do not include a space between the number and the unit: 20km; 50kph; 100KB
Never add an 's' to measurements: 20km, not 20kms
Use lower case for ie and eg, but avoid using these terms altogether where possible. Use 'that is' or 'for example' instead.
Do not use hyphens in ages unless to avoid confusion, although it's always best to write in a way that avoids ambiguity. For example, 'a class of 15 16-year-old students took the A level course' can be written as '15 students aged 16 took the A level course'.
Write ages like this: XX years old (for example, 66 years old).
Exception - use hyphens when talking about age groups:
under-16s (n): under-16s
under 16 (adj): If you are under 16
over-60s (n): over-60s
over 60 (adj): If you are over 60
"
+ },
+ {
+ "title": "American and UK English",
+ "content": "
Use UK English spelling and grammar. For example, use 'organise' not 'organize', 'modelling' not 'modeling', and 'fill in a form', not 'fill out a form'.
American proper nouns, like 4th Mechanized Brigade or World Health Organization, take American English spelling.
"
+ },
+ {
+ "title": "Ampersand",
+ "content": "
Use and rather than &, unless it's a department's logo image or a company's name as it appears on the Companies House register.
You can use bullet points to make text easier to read. Make sure that:
you always use a lead-in line with a colon
the bullets make sense running on from the lead-in line
you use lower case at the start of the bullet
you do not use more than one sentence per bullet point - use commas or dashes to expand on an item
you do not put 'or' or 'and' after the bullets
you do not make the whole bullet a link if it's a long phrase
you do not put any punctuation at the end of a bullet
there is no full stop after the last bullet point
Bullets should normally form a complete sentence following from the lead text. But it's sometimes necessary to add a short phrase to clarify whether all or some of the points apply. For example, 'You can only register a pension scheme that is (one of the following):'
The number and type of examples in a list may lead the user to believe the list is exhaustive. This can be dealt with by
checking if there are other conditions (or if the list is actually complete)
listing the conditions which apply to the most users and removing the rest
consider broader terms in the list which capture more scenarios (and could make the list exhaustive)
Numbered steps
Use numbered steps instead of bullet points to guide a user through a process. List the things the user needs to do in order. You do not need a lead-in line. Steps end in a full stop because each should be a complete sentence.
If you have a scheme or campaign brand, explain the brand. Don't expect users to understand what you mean. If you say ‘be aware and share’ or ‘get your roll and stroll on’ out of context, it’s not clear what that means.
Don’t capitalise slogans like ‘be aware and share’. If you’re talking about a specific brand or campaign, use capitals. For example, Workwise, PassProtect. Don’t tell people to ‘Be Aware and Share’, but do say ‘the Be Aware and Share’ campaign.
For example:
'get half-price travel when you start a new job with the Workwise scheme'
'find your nearest cycle route on the Starley cycle network'
'hire a bike with West Midlands Cycle Hire'
'If you join the PassProtect scheme, you will get a discount if you need to replace your child's school travel pass.'
"
+ },
+ {
+ "title": "cash fare",
+ "content": "Do not use - it's confusing. Say 'ticket bought on the bus, train or tram on the day' instead."
+ },
+ {
+ "title": "Capitalisation",
+ "content": "
DO NOT USE BLOCK CAPITALS FOR LARGE AMOUNTS OF TEXT AS IT'S QUITE HARD TO READ.
Always use lower case, even in page titles. The exceptions to this are proper nouns.
You can use contractions to help make your text less formal.
Avoid negative contractions like can't and don't. Many users find them harder to read, or misread them as the opposite of what they say. Use cannot instead of can't; do not instead of don’t.
Avoid should've, could've, would've, they've too. These can also be hard to read.
Coronavirus is the virus which causes the illness COVID-19. Coronavirus is lower case.
"
+ },
+ {
+ "title": "council",
+ "content": "
Use lower case when writing about local councils in general. Use capitals for the official name of a local council, for example: Birmingham City Council.
do not use a comma between the month and year: 4 June 2017
when space is an issue - in tables or publication titles, for example - you can use truncated months: Jan, Feb
use 'to' in date ranges - not hyphens, en rules or em dashes. For example: tax year 2011 to 2012
Monday to Friday, 9am to 5pm (put different days on a new line, do not separate with a comma)
10 November to 21 December
do not use quarter for dates, use the months: 'Jan to Mar 2013'
when referring to today (as in a news article) include the date: 'The minister announced today (14 June 2012) that…'
Use 'to' instead of a dash or slash in date ranges. 'To' is quicker to read than a dash, and it's easier for screen readers.
Always explain what your date range represents, for example 'tax year 2013 to 2014' or 'September 2013 to July 2014'. Date ranges can be the academic year, calendar year or tax year. This is why date ranges must be very, very clear.
eg can sometimes be read aloud as 'egg' by screen reading software. Instead use 'for example' or 'such as' or 'like' or 'including' - whichever works best in the specific context.
etc can usually be avoided. Try using 'for example' or 'such as' or 'like' or 'including'. Never use etc at the end of a list starting with these words.
ie - used to clarify a sentence - is not always well understood. Try (re)writing sentences to avoid the need to use it. If that is not possible, use an alternative such as 'meaning' or 'that is'.
If you write content by starting with user needs, you will not need to use FAQs.
FAQs are discouraged because they:
duplicate other content on the site
cannot be front-loaded (putting the most important words people will search for), which makes usability difficult
mean that content is not where people expect to find it; it needs to be in context
can add to search results with duplicate, competing text
"
+ },
+ {
+ "title": "fine",
+ "content": "
Use 'fine' instead of 'financial penalty'.
For example, \"You'll pay a £50 fine.\""
+ },
+ {
+ "title": "first person",
+ "content": "
Use \"we'\" and \"us\" when addressing the user where possible. For example, instead of \"West Midlands Combined Authority has…\" say \"We have\" - it’s more personal.
Lower case unless it's a full title. For example: 'UK government', but 'Her Majesty's Government of the United Kingdom of Great Britain and Northern Ireland'.
Do not use a hyphen unless it's confusing without it, for example, a little used-car is different from a little-used car. You can also refer to The Guardian style guide for advice on hyphenation.
Front-load your link text with the relevant terms and make them active and specific. Do not use ‘click here’. Use text that describes the link instead.
"
+ },
+ {
+ "title": "Lists",
+ "content": "
Lists should be bulleted to make them easier to read. See bullets and steps.
Very long lists can be written as a paragraph with a lead-in sentence if it looks better: 'The following countries are in the EU: Spain, France, Italy...'
Use when talking about network bus tickets - always use a lower case ‘n’, upper case ‘B’.
"
+ },
+ {
+ "title": "nNetwork",
+ "content": "
Use when talking about network tickets for the bus, train and tram - always use a lower case ‘n’, followed by an upper case ‘N’.
"
+ },
+ {
+ "title": "nTrain",
+ "content": "
Use when talking about network train tickets - always use a lower case ‘n’, upper case ‘T’.
"
+ },
+ {
+ "title": "Numbers",
+ "content": "
Use 'one' unless you're talking about a step, a point in a list or another situation where using the numeral makes more sense: 'in point 1 of the design instructions', for example. Or this:
You'll be shown 14 clips that feature everyday road scenes.
There will be:
developing hazard in 13 clips
developing hazards in the other clip
Write all other numbers in numerals (including 2 to 9) except where it's part of a common expression like 'one or two of them' where numerals would look strange.
If a number starts a sentence, write it out in full (Thirty-four, for example) except where it starts a title or subheading.
For numerals over 999 - insert a comma for clarity: 9,000
Spell out common fractions like two-thirds.
Use a % sign for percentages: 50%.
Use a 0 where there's no digit before the decimal point.
Use '500 to 900' and not '500-900' (except in tables and for the 16-18 photocard).
Use MB for anything over 1MB: 4MB not 4096KB.
Use KB for anything under 1MB: 569KB not 0.55MB.
Keep it as accurate as possible and up to 2 decimal places: 4.03MB.
Addresses: use 'to' in address ranges: 49 to 53 Cherry Street.
Ordinal numbers
Spell out first to ninth. After that use 10th, 11th and so on.
Do not abbreviate the name. For example, do not use ‘WM Metro’, ‘NX West Midlands’ or ‘West Mids Railway’.
You can use an acronym for timetables and passenger information. For example, ‘West Midlands Metro (WMM)’, ‘National Express West Midlands (NXWM)’ or ‘West Midlands Railway (WMR)’.
Do not use the NXWM acronym without explaining it first. It is not a well known acronym.
"
+ },
+ {
+ "title": "or",
+ "content": "
Do not use slashes instead of \"or\". For example, do not say \"Do this 3/4 times\".
"
+ },
+ {
+ "title": "pay as you go",
+ "content": "
Do not hyphenate and always use lower case.
"
+ },
+ {
+ "title": "pay as you go credit",
+ "content": "
Use to describe Swift cards with a stored cash value
Note: Do not use 'pay as you go travel value (cash)' or 'pay as you go cash value'.
"
+ },
+ {
+ "title": "PDF",
+ "content": "Upper case. No need to explain the acronym."
+ },
+ {
+ "title": "plain English",
+ "content": "
Lower case plain and upper case English unless in a title: the Plain English Campaign.
All content should be written in plain English. You should also make sure you use language your audience will understand. Use the Plain English Campaign’s A to Z of alternative words to avoid complex language.
Phone numbers should be split into at least three groups of digits for readability, ideally with no more than four digits in any single group. For example: 020 7378 1705; 0343 222 6666; 0762 480 4299. See also the design pattern for contact details.
Use double quotation marks if using a quote within a quote.
If a quote runs on longer than one paragraph, include quotation marks at the beginning of each subsequent paragraph but only at the end of the final paragraph.
Place full stops and commas inside quotes when they are complete sentences, otherwise place them outside: 'I want to buy a ticket,' said Mr Smith; When he said 'I promise', he didn't really mean it.
use 'to' in time ranges, not hyphens, en rules or em dashes: 10am to 11am (not 10-11am) 5:30pm (not 1730hrs) midnight (not 00:00) midday (not 12 noon, noon or 12pm) 6 hours 30 minutes Midnight is the first minute of the day, not the last. You should consider using \"11:59pm\" to avoid confusion about a single, specific time.
For example, \"You must register by 11:59pm on Tuesday 14 June.\" can only be read one way, but \"You must register by midnight on Tuesday 14 June\" can be read in two ways (the end of Monday 13, or end of Tuesday 14).
Timetables and printed passenger information use the 24-hour clock in HHMM format.
"
+ },
+ {
+ "title": "tram",
+ "content": "
Not Metro.
"
+ },
+ {
+ "title": "tram stop",
+ "content": "
Not station.
"
+ },
+ {
+ "title": "Transport for West Midlands",
+ "content": "
Avoid referring to Transport for West Midlands (TfWM). Users don't need to know about it while getting travel advice.
Explaining the relationship between West Midlands Combined Authority, TfWM and West Midlands Combined Authority (WMCA) is complicated. Use \"we\" instead. For example, \"we manage the Key Route Network (KRN)\" with a link to the TfWM policy page.
Not \"zero-hour contract\" or \"zero hours contract\"
"
+ }
+ ]
+ }
+ ]
+}
diff --git a/src/www/pages/mc/components/styles/a-to-z-content-style-guide/index.njk b/src/www/pages/mc/components/styles/a-to-z-content-style-guide/index.njk
new file mode 100644
index 00000000..d1434b5c
--- /dev/null
+++ b/src/www/pages/mc/components/styles/a-to-z-content-style-guide/index.njk
@@ -0,0 +1,131 @@
+{% extends "www/_layouts/layout-fullwidth.njk" %}
+{% set pageTitle="A to Z content style guide" %} {% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{# Set array of tiles #}
+{% block content %}
+
+{# About the style guide #}
+
+
+
Writing content for West Midlands Combined Authority
+
+ You should create all content with user-focused content design principles. This means content has an identified
+ user need and is written in plain English.
+
+
+ Do not use marketing speak - users will be visiting your website to perform a task (for example, buy a train ticket or find out about Swift cards). Your content shouldn’t try to sell them anything - instead, tell them the information they need to know in the simplest way possible.
+
+
+ Research has shown that both high literacy and low literacy users prefer plain English because it takes less time to read. Users won’t be on your website for fun - so make the experience quick and easy.
+
+
+ To find out more about why plain language is important, read:
+
+
+ {{
+ wmcadsLink({
+ link: 'https://readabilityguidelines.co.uk/clear-language/',
+ linkTitle: 'advice about clear language',
+ contentText: 'advice about clear language'
+ })
+ }}
+ from the Readability Guidelines project
+
+
+ the
+ {{
+ wmcadsLink({
+ link: 'http://www.plainenglish.co.uk/the-a-z-of-alternative-words.html',
+ linkTitle: 'plain English Campaign’s A to Z of alternative words',
+ contentText: 'plain English Campaign’s A to Z of alternative words'
+ })
+ }}
+ - this helps you find a simple replacement for a complicated word
+
+
+
+
+ Read the
+ {{
+ wmcadsLink({
+ link: 'https://www.gov.uk/guidance/content-design/what-is-content-design',
+ linkTitle: 'GOV.UK introduction to content design',
+ contentText: 'GOV.UK introduction to content design'
+ })
+ }}
+ to find out more about content design principles.
+
+
Design Team can help you to test your content with user research.
+
+
About the A-Z of style guide
+
This style guide will help you to use consistent words across West Midlands Combined Authority services.
+
+ If something is not covered by this style guide, check the
+ {{
+ wmcadsLink({
+ link: 'https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style',
+ linkTitle: 'GOV.UK Style Guide',
+ contentText: 'GOV.UK style guide'
+ })
+ }}
+ . You can also email Samresha Purewal if you think something is missing from this guidance.
+
+
Introducing West Midlands Combined Authority
+
If you’re talking about day-to-day services (bus, train or tram), you
+ may need to make it clear that West Midlands Combined Authority does not run these.
For example, you could say: "We don’t run the buses, trains or trams. We can point you in the right direction if you need help."
+
Below are the list of West Midlands Combined Authority colour palettes.
+
+ We have tested our colours against the three most prevalent colour blind anomalies: protanopia, deuteranopia and tritanopia. While in some circumstances, particularly protanopia, colours can appear to be relatively similar.
+
+
+ These issues can be circumvented by not referring to specific colours. For instance, when referring to a green button with the word 'start' in, the phrase 'click the green button to start' would not be helpful. Instead, use 'click the start button', without a colour reference.
+
+
+ W3C AA Accessibility criteria requires the contrast of test to be enhanced, with a contrast ratio upwards of 3:1.
+
+
+ All brand/web colours meet this criteria, though the modal colour 'WM Railway' must only be used for iconography and graphical devices.
+
+
The background only colours can only be used as a background colour and they are not intended for any other use.
+
+
+{# Using in development #}
+
Using in development
+
wmcads SCSS
+
If you are using WMCA Design System's SCSS in development, you shouldn't use the HEX values! Instead you should always use the scss variables instead, for example use get-color(primary) instead of #3c1053. This ensures you are always using the most up-to-date colour. To find out more on how to use the get-color() function in SCSS, please refer to the notes for @function get-color() in _mixins.scss.
+
+
Without wmcads SCSS
+
If you are not using WMCA Design System's SCSS then it is recommended to use the hex values below. It is highly adviseable to set these up as variables in your development enviornment, this ensures that you can easily change them to keep up-to-date with our colour palettes.
+
If you'd like to see how we have set the variables up, you can check out $palettes in _vars.scss and @function get-color() in _mixins.scss.
+
+{# Brand colours #}
+
+
Brand colours
+
+ {% for color in colors.brand %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+
+{# Web colours #}
+
+
Web colours
+
+ {% for color in colors.web %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+
+{# Background Only colours #}
+
+
Background only colours
+
+ {% for color in colors.backgroundOnly %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+ Spacing can be applied in between .ds-col-* elements by adding a class to the parent .ds-grid.
+
+
+ The classes are named using the format .ds-grid--spacing-{col-count}-{size}.
+
+
+ Where {col-count} is the number of columns per row and {size} is the same as in the spacing utility classes above.
+
+
+ Spacing can also be applied responsively using the format .ds-grid--spacing-{breakpoint}-{col-count}-{size}.
+
+
+ Where {breakpoint} is one of breakpoint sizes described in the grid section.
+
+
+
When to use Grid column spacing
+
+
Use when you require more control over child item spacing
+
Use only when the number of child items do not change
+
+
+
Examples
+
+
Example 1
+
This example shows the use of the ds-content-card component displayed in a grid of thirds with spacing of 1rem.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+
Contact us
+
Get in touch if you want to know more about the budget.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+
Contact us
+
Get in touch if you want to know more about the budget.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
Example 2
+
This example shows the use of the ds-content-card component displayed in a half grid with spacing of 2rem.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
Example 3
+
This example shows the use of the ds-content-card component displayed in a half grid with spacing controlled by breakpoints.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
The default spacing is 0.75rem (ds-grid--spacing-2-sm). Once the page width goes over 768px the spacing changes to 1rem (ds-grid--spacing-md-2-md).
+
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/components/styles/examples/grid-examples.njk b/src/www/pages/mc/components/styles/examples/grid-examples.njk
new file mode 100644
index 00000000..52ec7236
--- /dev/null
+++ b/src/www/pages/mc/components/styles/examples/grid-examples.njk
@@ -0,0 +1,335 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Grid Examples" %}
+{% set section = "Styles" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
Introduction to wmcads Grids
+
Grid classes vs. unit classes
+
wmcads Grids consist of two types of classes: the grid class (ds-grid) and unit classes (ds-col-*)
+
The widths of the units are fractions
+
Units have various class names that represent their widths. For example, ds-u-1-2 has a width of 50%, whereas ds-u-1-5 would have a width of 20%.
+
All child elements of a grid must be units
+
Child elements contained within an element with a ds-grid classname must be a grid unit with a ds-col-* classname.
+
Content goes inside grid units
+
All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.
+
+
Examples
+
Let's start with a simple example. Here's a grid with three columns:
+
+
+
Thirds
+
Thirds
+
Thirds
+
+
+
+
+ {%- filter forceescape %}
+
+
Thirds
+
Thirds
+
Thirds
+
+ {%- endfilter %}
+
+
+
+
The above example will keep the columns the same width no matter the page width.
+
+
Adding responsive classes
+
We can control the width by adding responsive classes.
+
+
When using Responsive Grids, you can control how the grid behaves at specific breakpoints by adding class names. wmcads default responsive grids comes with the following class names and media query breakpoints.
+
+
+
Default Media Queries
+
+
+
Key
+
CSS Media Query
+
Applies
+
Classname
+
+
+
+
+
None
+
None
+
Always
+
.ds-col-*
+
+
+
sm
+
@media screen and (min-width: 35.5em)
+
≥ 568px
+
.ds-col-sm-*
+
+
+
md
+
@media screen and (min-width: 48em)
+
≥ 768px
+
.ds-col-md-*
+
+
+
lg
+
@media screen and (min-width: 64em)
+
≥ 1024px
+
.ds-col-lg-*
+
+
+
xl
+
@media screen and (min-width: 80em)
+
≥ 1280px
+
.ds-col-xl-*
+
+
+
+
+
Let's modify the example so the columns become full width on mobile:
+
+
+
Thirds
+
Thirds
+
Thirds
+
+
+
+
+ {%- filter forceescape %}
+
+
Thirds
+
Thirds
+
Thirds
+
+ {%- endfilter %}
+
+
+
+
The above example has a default width of 1 (ds-col-1) so when the page is viewed below 586px the columns will display full width. When the page is viewed over 586px the columns will appear in 3 coloumns (ds-col-sm-1-3).
+
+
+
Justify Content
+
+
You can justify the grid content bby adding these classes:
+
+
ds-grid--justify-between
+
Items will have space between them
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-around
+
Items will have space before, between, and after them
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-end
+
Items are positioned at the end of the container
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-center
+
Items are positioned in the center of the container
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-even
+
Items will have equal space around them
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/components/styles/icons/_icons.scss b/src/www/pages/mc/components/styles/icons/_icons.scss
new file mode 100644
index 00000000..d03435ca
--- /dev/null
+++ b/src/www/pages/mc/components/styles/icons/_icons.scss
@@ -0,0 +1,12 @@
+.website-icons {
+ svg {
+ width: 60px;
+ height: 60px;
+ padding: $size-sm;
+ fill: get-color(primary);
+ }
+
+ .text-center {
+ text-align: center;
+ }
+}
diff --git a/src/www/pages/mc/components/styles/icons/index.njk b/src/www/pages/mc/components/styles/icons/index.njk
new file mode 100644
index 00000000..76c42c7f
--- /dev/null
+++ b/src/www/pages/mc/components/styles/icons/index.njk
@@ -0,0 +1,188 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Icons" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{# The icon vars are an array that match the folders they come from in src/assets/icon/{foldername} #}
+{% set iconGeneral = [
+ "arrow",
+ "caret-down",
+ "caret-up",
+ "checkmark",
+ "chevron-right",
+ "circle-hollow",
+ "circle-solid",
+ "cross",
+ "expand",
+ "favourite",
+ "file",
+ "filter",
+ "id-card",
+ "info",
+ "location-arrow",
+ "minimise",
+ "paperclip",
+ "pdf",
+ "html",
+ "search",
+ "success",
+ "swap",
+ "trash",
+ "warning-circle",
+ "warning-triangle"
+] %}
+
+{% set iconSocial = [
+ "facebook",
+ "facebook-hex",
+ "twitter",
+ "twitter-hex",
+ "instagram",
+ "instagram-hex",
+ "linkedin",
+ "linkedin-hex",
+ "youtube",
+ "youtube-hex",
+ "email"
+] %}
+
+{% set iconPortfolio = [
+ "culture-and-digital",
+ "economy",
+ "environment",
+ "housing-and-land",
+ "inclusive-communities",
+ "skills",
+ "transport",
+ "wellbeing"
+] %}
+
+
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+
+{% block content %}
+{# How to use #}
+
About
+
+
What does it do?
+
+
+ Icons are images used in context to communicate a meaning (a visual representation of an object, action, or idea).
+
+
+
When to use it?
+
+
+ Only use icons and images if there’s a real user need.
+
+
+
When not to use it?
+
+
+ Do not use it for unnecessary decoration.
+
+
+
+
+{# Using Icons #}
+
Using icons
+
WMCA Design System icons are available as an SVG sprite to include in your HTML page.
+
How to use
+
Recommended
+
The Recommended method of using the icon sprite sheet is to refer directly to the one used in the design system. This ensures that your icons will always be up to date.
+
To get started, include the below snippet of javascript somewhere in your codebase. This will:
+
+
Pull the latest SVG icon spritesheet to be used within your web app or service
+
Will ensure the icons work with older browsers such as Internet Explorer 11
+
Keep the icon set consistent with other West Midlands Combined Authority Services
To display an icon or glyph, use an icon tag (from the icon section at the bottom of the page) with a href attribute and xlink:href (as a fallback). Make sure that the xlink and href tags are pointing to the location of your downloaded icon sprite sheet.
+
The ICON-TAG-NAME should be replaced with the icon tag name of the icon you want to show from the Icons section below, for example #ds-general-arrow should be in the xlink:href and href attributes of the svg's <use> element.
+
+{% endblock %}
diff --git a/src/www/pages/mc/components/styles/images/index.njk b/src/www/pages/mc/components/styles/images/index.njk
new file mode 100644
index 00000000..e9dea0aa
--- /dev/null
+++ b/src/www/pages/mc/components/styles/images/index.njk
@@ -0,0 +1,29 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Images" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
An image tells a story, communicates a complex idea or supports page content by providing further details.
+
+{# When to #}
+
When to use it?
+
+
When there is a clear user need.
+
When an image serves a clear functional purpose.
+
All images, except decorative, must have alt text that describes the content and function of the image. This tells users using screen readers what information the image provides.
+
+{# When not to #}
+
When not to use it?
+
+
When an image is an unnecessary decoration.
+
When an image would create visual noise, which detracts attention away from the page content. This can distract the user from completing their task.
+
+{% endblock %}
diff --git a/src/www/pages/mc/components/styles/index.njk b/src/www/pages/mc/components/styles/index.njk
new file mode 100644
index 00000000..9b5b722d
--- /dev/null
+++ b/src/www/pages/mc/components/styles/index.njk
@@ -0,0 +1,15 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Styles" %}
+{% set section = "Styles" %}
+{% set ds = 'mc' %}
+
+{% block content %}
+
Make your service look and feel like WMCA Design System.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples in the
+ Design System will not need any additional styling.
+
If you need to apply styles manually, you should still follow existing WMCA Design System conventions. For
+ example, do not assign
+ new meanings to colours, do not change the style of buttons or adjust the thickness of borders on
+ form inputs.
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/components/styles/layout/index.njk b/src/www/pages/mc/components/styles/layout/index.njk
new file mode 100644
index 00000000..219dae2d
--- /dev/null
+++ b/src/www/pages/mc/components/styles/layout/index.njk
@@ -0,0 +1,84 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Layout" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+{# Standard content template #}
+
Standard content template
+{# What #}
+
What does it do?
+
+
A template is based on 2/3 column for content and a 1/3 column right-hand side for widgets to publish functional content.
+
Content editors will be able to use the design system components in Umbraco to structure content effectively and create visual hierarchy.
+
+{# When #}
+
When to use it?
+
+
When you need to publish functional content based on a clear user task.
+
When your content enables users to complete a specific task. For example, Get a refund, Update a Direct Debit, Find discount vouchers etc.
+
+{# When not to #}
+
When not to use it?
+
+
When you need to create a page for a marketing campaign and you need to use promotional images.
+
+{# Guidance #}
+
Guidance for content editors
+
+
Only use a header image when there is a clear user need for the image and it serves a purpose. For example, on a 'Travel by tram' page, you may want to use a header image of a tram so users unfamiliar with the West Midlands Combined Authority will instantly know what our trams look like throughout the region.
+
Use the Link component in your body content if you want to direct the user to additional content. Do not use buttons for any links. Do not use the same link twice as this confuses users.
+
Only use buttons in your body content when a user needs to complete an action as part of a process, or if a user is confirming their details e.g. newsletter sign-up.
+
+
Warning text with exclamation mark icon component: Please read the Creating effective content section below before writing content or placing content into your page.
+
+
+
+{# Publicity campaign template #}
+
Publicity campaign template
+{# What #}
+
What does it do?
+
+
A template based on a flexible grid provides content editors with an option to create a marketing campaign page.
+
Content editors will be able to use the design system components in Umbraco to structure content effectively and create visual hierarchy.
+
+{# When to #}
+
When to use it?
+
+
When you want to create a marketing campaign to promote and introduce a new service or a product.
+
+{# When not to #}
+
When not to use it?
+
+
When you need to publish functional content based on a clear user task. For example, Get a refund, Update a Direct Debit, Find discount vouchers etc. For this, you will need to use the Standard content template.
+
+{# Guidance #}
+
Guidance for content editors
+
+
Use a header image to draw attention and to increase the visual appeal of the page. Our User research found that 78% of users prefer pages with header images, with the most popular reason being that they make the page look more attractive. Remember to keep your header image relevant to your content.
+
If you are creating a hub page, use Content cards to direct users to the other pages. For marketing campaign pages, please use Content cards with images as this helps users to locate information faster. We recommend using a total of four content cards on one page. However, you can use up to six content cards on a page if absolutely necessary.
+
Restrict the body copy to a maximum of three paragraphs. The body copy introduces the page and should be brief and to the point. The main content your users require needs to be as higher up the page as possible, to reduce scrolling time.
+
Marketing campaign pages should be user tested prior to going live. This is to identify if users can locate the content that they need. Generating heatmaps through Hotjar will help track how the pages are used.
+
+
+
+
+{# Creating effective content #}
+
Creating effective content
+
There is no minimum or maximum page length, however:
Always place content with higher importance at the top of the page, with less important content following after.
+
If you have to use long content, break it down into smaller sections to make it easier for user to understand information. You can:
+
+
Use Content cards for important content which you want to draw attention to. You can use a maximum of six content cards on a page. Do not use more than six because user research shows that users prefer less information, especially on the mobile. Our user research showed that content tiles with images help users locate relevant content faster.
+
Use the Accordion component to organise and group related information at the bottom of the page, below body copy and content tiles. Accordions can shorten pages and reduce scrolling when your content does not need to be read in full. We also recommend using accordions when space is at a premium and you are placing long content on a mobile interface or in a side panel.
Place the In-line navigation component on the left side of a desktop page so users can skip to the relevant section without scrolling. This is especially useful for users on mobile, as the page content component will be placed after the page title.
+ When creating a map use the
+ {{
+ wmcadsLink({
+ link: "https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e",
+ linkTitle: "WMCA Basemap",
+ linkTarget: "_blank",
+ contentText: "WMCA Basemap"
+ })
+ }} as your basemap layer. This is to ensure maps are consistent across West Midlands Combined Authority services.
+
+
The WMCA Basemap is a portal item, you can use the
+{{
+ wmcadsLink({
+ link: "https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html",
+ linkTitle: "ArcGIS Basemap documentation",
+ linkTarget: "_blank",
+ contentText: "ArcGIS Basemap documentation"
+ })
+ }} with the WMCA Basemap ID to include the basemap in your application.
+
+
+{# Example of code #}
+
Example of the ESRI ArcGIS JavaScript API
+
+
+ // ESRI ArcGIS JS code...
+ const basemap = new Basemap({
+ baseLayers: [
+ new VectorTileLayer({
+ portalItem: {
+ // set the baselayer to WMCA Basemap:
+ // https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e
+ id: '53f165a8863c4d40ba017042e248355e',
+ },
+ }),
+ ],
+ });
+
+ // Create a new map with the basemap set above
+ const map = new Map({
+ basemap,
+ });
+
+
+
+{# Can't use Esri ArcGIS #}
+
Can't use ESRI ArcGIS?
+
+ We understand that you may not always be able to use
+ {{
+ wmcadsLink({
+ link: "https://developers.arcgis.com/documentation/core-concepts/apis-sdks-apps/#choosing-an-arcgis-api-or-sdk",
+ linkTitle: "ArcGIS APIs and SDKs",
+ linkTarget: "_blank",
+ contentText: "ArcGIS APIs and SDKs"
+ })
+ }}.
+ In these situations, style your map as closely to the
+ {{
+ wmcadsLink({
+ link: "https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e",
+ linkTitle: "WMCA Basemap",
+ linkTarget: "_blank",
+ contentText: "WMCA Basemap"
+ })
+ }} as possible.
+
+
+
+
+{# User interface #}
+
User interface
+
+ User interface elements on a map such as zoom, pan and location buttons follow particular pattern rules when being used.
+
+
These pattern rules are:
+
+
Accessible for screen readers and keyboard navigation
+
User interface buttons must have 35px height and 35px width
+
User interface buttons must display in the top right of the map
+
The border radius must be 5px (slight curve on the corners)
+
The icon colour must be white
+
+ The background/fill colour of the buttons must use the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Information colour",
+ linkTarget: "_blank",
+ contentText: "Information colour"
+ })
+ }}
+
+
+ If it is the location button, the background/fill colour must be transparent and the border/icon colour must use the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Primary Purple colour",
+ linkTarget: "_blank",
+ contentText: "Primary Purple colour"
+ })
+ }}
+
+
+
+
+ When hovered, the background/fill colour must be 30% darker (mixed with black) of the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Information colour",
+ linkTarget: "_blank",
+ contentText: "Information colour"
+ })
+ }}
+ (#5c236d)
+
+
+ If it is the location button, the background/fill colour must be 70% lighter (mixed with white) of the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Secondary Purple colour",
+ linkTarget: "_blank",
+ contentText: "Secondary Purple colour"
+ })
+ }}
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/src/www/pages/mc/components/styles/typography/index.njk b/src/www/pages/mc/components/styles/typography/index.njk
new file mode 100644
index 00000000..ca9dff7e
--- /dev/null
+++ b/src/www/pages/mc/components/styles/typography/index.njk
@@ -0,0 +1,75 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Typography" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+{# About #}
+
About
+
+ We have tested our typography with users, including those with dyslexia and those with low vision. The questionnaire presented respondents with two body fonts, set out in different sizes, line spacing and kerning. The options were shown randomly for each participant.
+
+ Our findings were as such:
+
+
55.2% of respondents found Noto Sans easiest to read, with a further 24.1% of respondents having no preference
+
69% of respondents found a larger font size easiest to read, with a further 5.2% having no preference
+
55.2% of respondents preferred increased line spacing, with a further 12.1% having no preference
+
+
+
+ As a public sector organisation, in addition to testing the above we are required to meet WCAG 2.1 guidelines at AA standard.
+ Therefore, features will be useable when text size is increased up to 200% and content reflowed for 400%.
+
+
+{# Fonts #}
+
Fonts
+
+ We utilise Google Fonts in our typography and all fonts used are pre-bundled in our design system CSS, so you won't need to include them seperately.
+
+
+ Find below, various examples of our typography in use.
+
+
+{# DM Sans / Headings #}
+
DM Sans / headings
+
+ The font DM Sans is used with font weight of 700 (bold) for heading elements only.
+ DM Sans font reference
+
+
Things to note:
+
+
+ On mobile devices (less than 768px wide), the H1 and H2 elements are reduced in size by 15%.
+
+
+
+
46px - Heading 1
+
32px - Heading 2
+
23px - Heading 3
+
18px - Heading 4
+
+
+{# Noto sans / body copy #}
+
Noto Sans / body copy
+
+ The font Noto Sans is used with the font weight of 400 (regular) and 700 (bold) for all elements other than headings. The default font size used is 16px.
+ Noto Sans font reference
+
+
+{% endblock %}
diff --git a/src/www/pages/mc/components/styles/utility-classes/index.njk b/src/www/pages/mc/components/styles/utility-classes/index.njk
new file mode 100644
index 00000000..ffe19480
--- /dev/null
+++ b/src/www/pages/mc/components/styles/utility-classes/index.njk
@@ -0,0 +1,276 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Utility classes" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+
+{% block content %}
+{# About #}
+
About
+
+ There are a variety of utility classes that can be used with the existing components and styles on.
+
+
+
+
+{# Containers #}
+
Containers
+
+ Containers are used to wrap content in a 'container'. The container will have a fixed max size and be centered on the page, it will adjust to 100% width when the page width is less than the container size.
+
+
+
+
+ .ds-container /* Container with max-width of 1280px */
+
+ /* This should be used on your main content section and will
+ add a margin top to seperate from header/breadcrumb section */
+ .ds-container.ds-container--main
+
+
+
+
+
+{# Grid #}
+
Grid
+
+ The WMCA Design System uses its own custom syntax grid system adopted from Pure CSS Grid. The grid system is already included in the bundled ds-components.min.css file so you don't need to include it seperately.
+
+
+
+ You can Refer to the Pure CSS Grid documentation for reference on how to use our grid system, but bear in mind that:
+
+
+
.pure-g becomes .ds-grid in our design system
+
.pure-u-* becomes .ds-col-* in our design system
+
+
+
+
You can also use modifier classes on the same element where the class .ds-grid is being used.
+ When you want to hide an element based on if the device width is a desktop or mobile device.
+
+
+
+
+ .ds-hide-mobile /* Hide only on mobile devices or smaller (less than 48em) */
+ .ds-hide-desktop /* Hide only on desktop devices or larger (greater than 48em) */
+ .ds-hide /* Hide on all devices */
+
+
+
+
+
Spacing
+
+ The spacing utility classes are used to adjust whitespace for an element via padding and margins.
+
+
Before using the spacing utility classes, please consider:
+
+
Most components already come with defined spacing. This spacing shouldn't be overwritten.
+
Spacing should be used as a last resort to help layout components on a page.
+
You can use none as a size to enforce zero margin or padding.
+
+
+
+ The classes are named using the format .ds-{type}-{side}-{size}.
+
+{# type #}
+
+ Where {type} is one of:
+
+
+
+ m - for classes that set margin
+
+
+ p - for classes that set padding
+
+
+{# side #}
+
+ Where {side} is one of:
+
+
+
+ t - for classes that set margin-top or padding-top
+
+
+ r - for classes that set margin-right or padding-right
+
+
+ b - for classes that set margin-bottom or padding-bottom
+
+
+ l - for classes that set margin-left or padding-left
+
+
+ blank - for classes that set a margin or padding on all 4 sides of the element
+
+
+{# size #}
+
+Where {size} is one of:
+
+
+
+ xs - set size to 0.25rem
+
+
+ xsm - set size to 0.5rem
+
+
+ sm - set size to 0.75rem
+
+
+ md - set size to 1rem
+
+
+ lg - set size to 2rem
+
+
+ xl - set size to 3rem
+
+
+
+
Some examples of using these utility classes...
+
+
+ .ds-m-xs // applies a margin of 0.25rem to all sides
+ .ds-p-b-lg // applies a padding-bottom of 2rem
+ .ds-m-l-none // sets left margin to 0
+
+
+
+{# Grid columns spacing #}
+
Grid column spacing
+
+
+ Spacing can be applied in between .ds-col-* elements by adding a class to the parent .ds-grid.
+
+
+ The classes are named using the format .ds-grid--spacing-{col-count}-{size}.
+
+
+ Where {col-count} is the number of columns per row and {size} is the same as in the spacing utility classes above.
+
+
+ Spacing can also be applied responsively using the format .ds-grid--spacing-{breakpoint}-{col-count}-{size}.
+
+
+ Where {breakpoint} is one of breakpoint sizes described in the grid section.
+
+
+
Some examples of using these utility classes...
+
+
+ .ds-grid--spacing-2-md // applies a 1rem spacing between 2 columns
+ .ds-grid--spacing-lg-4-lg // applies a 2rem spacing between 4 columns above a screen width of 1024px
+
+
Have your say on cycling & walking changes in your local area.
+
Lockdown has been quite a journey but cycling and walking is more popular than ever.
+
After marking this year the Big Summer of Cycling & Walking, let’s not stop now. We're continuing to invest in creating a region that supports healthy, greener and safer travelling. We want to help you get started or keep going.
+
Whatever your travel plans - whether it's a cycle around your local streets or a winter walkie - we're here to help you start the adventure before you get there. There’s never been a better time to stay fit and healthy than right now - so, get your roll & stroll on!
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isThirdCard: false,
+ title: 'Get Going Continue Rolling',
+ isDefault: true,
+ copy: 'Whether youre rolling to work or school, or catching some fresh air, theres always safe and new ways to get there.'
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isThirdCard: false,
+ title: 'All things strolling',
+ isDefault: true,
+ copy: 'Wherever youre heading, theres always new and safe ways to get there on foot. '
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isThirdCard: false,
+ title: 'Changes in your area',
+ isDefault: true,
+ copy: 'Understand what changes are being made in your area to help you travel safely'
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isThirdCard: false,
+ title: 'Get active and travel safely',
+ isDefault: true,
+ copy: 'Enjoy being physically active and travelling outdoors responsibly and safely. '
+ })
+ }}
+
+
+
+
+
Get the best from your bike
+
+
+
+
+
+
+ Some random subtitle
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
+
+
+
+
+
+
+
+
+
+
+ Some random subtitle
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
+
+
+
+
+
+
+
Additional Information
+
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isThirdCard: false,
+ title: 'Support for businesses',
+ isDefault: true,
+ copy: 'We have a wide range of options to support your business and employees at work and at home'
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isThirdCard: false,
+ title: 'Be Aware and Share',
+ isDefault: true,
+ copy: 'If you drive in the West Midlands be prepared to share the road space with more Rollers and Strollers.'
+ })
+ }}
+
Have your say on cycling & walking changes in your local area.
+
Lockdown has been quite a journey but cycling and walking is more popular than ever.
+
After marking this year the Big Summer of Cycling & Walking, let’s not stop now. We're continuing to invest in creating a region that supports healthy, greener and safer travelling. We want to help you get started or keep going.
+
Whatever your travel plans - whether it's a cycle around your local streets or a winter walkie - we're here to help you start the adventure before you get there. There’s never been a better time to stay fit and healthy than right now - so, get your roll & stroll on!
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Get Going Continue Rolling',
+ copy: 'Whether youre rolling to work or school, or catching some fresh air, theres always safe and new ways to get there.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'All things strolling',
+ copy: 'Wherever youre heading, theres always new and safe ways to get there on foot. '
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Changes in your area',
+ copy: 'Understand what changes are being made in your area to help you travel safely'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Get active and travel safely',
+ copy: 'Enjoy being physically active and travelling outdoors responsibly and safely. '
+ })
+ }}
+
+
+
+
Get the best from your bike
+
+
+
+
+
+
+ Some random subtitle
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
+
+
+
+
+
+
+
+
+
+
+ Some random subtitle
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
+
+
+
+
+
+
+
Additional Information
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Support for businesses',
+ copy: 'We have a wide range of options to support your business and employees at work and at home'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Be Aware and Share',
+ copy: 'If you drive in the West Midlands be prepared to share the road space with more Rollers and Strollers.'
+ })
+ }}
+
+
+{% endblock %}
diff --git a/src/www/pages/mc/components/templates/content-one-column/content-template.scss b/src/www/pages/mc/components/templates/content-one-column/content-template.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/www/pages/mc/components/templates/content-one-column/index.njk b/src/www/pages/mc/components/templates/content-one-column/index.njk
new file mode 100644
index 00000000..eb79ee22
--- /dev/null
+++ b/src/www/pages/mc/components/templates/content-one-column/index.njk
@@ -0,0 +1,95 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="Content One Column" %} {% set section = "Templates" %}
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/content-card/_content-card.njk" import wmcadsContentCard %}
+{# Set array of tiles #}
+{% block content %}
+
+{# About the style guide #}
+
+
+
+
+
+
+
Adult Education Budget
+
From 2018, we’re responsible for the region's Adult Education Budget (AEB).
+
We target priority growth sectors from the Local Industrial Strategy. This improves skills and secure jobs in communities. It also helps to improve productivity in the region.
+
What the budget is
+
The budget helps residents and employers get the skills needed in the region. This helps people to get the jobs they need and increases the skills of current employees. It unlocks specialist training as well.
+
It also allows for more flexible and tailored learning programmes in the region. This helps people to take part in learning, build confidence and their wellbeing. It unlocks opportunities for more people.
+
Our challenges
+
We set out the challenges for the labour market in our Regional Skills Plan:
+
High levels of unemployment in some parts of the region
+ Poverty is growing for people who are working because of low wages
+ Low skill levels with less people qualified to skill level 4, or no qualifications at all
+ Employers struggle to find people with the skills they need
+
We use the budget to help improve confidence and opportunities for residents. It helps business find staff with the skills they need too.
+
Priorities for the budget
+
We will fund adult education through a range of delivery partners. Through commissioning, the budget will focus on:
+
Innovation
+
Looking at new ways of delivering learning. These will align with our priorities in the construction and digital sectors.
+
Talent & Progression
+
We'll develop new job schemes, and help build the skills of people in employment.
+
Collaboration
+
Working with our provider partners, we'll create an agile skills system. It will align to the needs of businesses and residents.
+
Sustainability
+
We're developing agreements with providers. These will check delivery against our key priorities. It will also track the impact of this approach.
+
+
+
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault : true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isDoubleCard: true,
+ title: 'Pharetra Sollicitudin Bibendum',
+ copy: 'Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.'
+ })
+ }}
+
+
+
+
+{% endblock %}
diff --git a/src/www/pages/mc/components/templates/content-template/content-template.scss b/src/www/pages/mc/components/templates/content-template/content-template.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/www/pages/mc/components/templates/content-template/index.njk b/src/www/pages/mc/components/templates/content-template/index.njk
new file mode 100644
index 00000000..6c9b3333
--- /dev/null
+++ b/src/www/pages/mc/components/templates/content-template/index.njk
@@ -0,0 +1,98 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="Content Page Template" %} {% set section = "Templates" %}
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/content-card/_content-card.njk" import wmcadsContentCard %}
+{# Set array of tiles #}
+{% block content %}
+
+{# About the style guide #}
+
+
+
+
+
+
+
{{ pageTitle | safe}}
+
From 2018, we’re responsible for the region's Adult Education Budget (AEB).
+
We target priority growth sectors from the Local Industrial Strategy. This improves skills and secure jobs in communities. It also helps to improve productivity in the region.
+
What the budget is
+
The budget helps residents and employers get the skills needed in the region. This helps people to get the jobs they need and increases the skills of current employees. It unlocks specialist training as well.
+
It also allows for more flexible and tailored learning programmes in the region. This helps people to take part in learning, build confidence and their wellbeing. It unlocks opportunities for more people.
+
Our challenges
+
We set out the challenges for the labour market in our Regional Skills Plan:
+
High levels of unemployment in some parts of the region
+ Poverty is growing for people who are working because of low wages
+ Low skill levels with less people qualified to skill level 4, or no qualifications at all
+ Employers struggle to find people with the skills they need
+
We use the budget to help improve confidence and opportunities for residents. It helps business find staff with the skills they need too.
+
Priorities for the budget
+
We will fund adult education through a range of delivery partners. Through commissioning, the budget will focus on:
+
Innovation
+
Looking at new ways of delivering learning. These will align with our priorities in the construction and digital sectors.
+
Talent & Progression
+
We'll develop new job schemes, and help build the skills of people in employment.
+
Collaboration
+
Working with our provider partners, we'll create an agile skills system. It will align to the needs of businesses and residents.
+
Sustainability
+
We're developing agreements with providers. These will check delivery against our key priorities. It will also track the impact of this approach.
+
+
+
+
+ {{
+ wmcadsContentCard({
+ src: true,
+ isThirdCard: true,
+ title: 'Who weve funded',
+ copy: 'See which councils and providers weve funded, and what for.'
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ src: true,
+ isThirdCard: true,
+ title: 'Find training schemes',
+ copy: 'You can find training and education providers weve funded online.'
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ src: true,
+ isThirdCard: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+
+ {{
+ wmcadsContentCard({
+ src: true,
+ isDoubleCard: true,
+ title: 'Pharetra Sollicitudin Bibendum',
+ copy: 'Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.'
+ })
+ }}
+
+
+
+
+{% endblock %}
diff --git a/src/www/pages/mc/components/templates/content-two-columns/content-template.scss b/src/www/pages/mc/components/templates/content-two-columns/content-template.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/www/pages/mc/components/templates/content-two-columns/index.njk b/src/www/pages/mc/components/templates/content-two-columns/index.njk
new file mode 100644
index 00000000..788810ec
--- /dev/null
+++ b/src/www/pages/mc/components/templates/content-two-columns/index.njk
@@ -0,0 +1,110 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="Content Two Columns" %} {% set section = "Templates" %}
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/content-card/_content-card.njk" import wmcadsContentCard %}
+{% from "wmcads/components/page-contents/_page-contents.njk" import wmcadsPageContents %}
+{# Set array of tiles #}
+{% block content %}
+
+
+
+
+
Roll & Stroll
+
+
+
+
+
+
+
+
+
+
+
Adult Education Budget
+
From 2018, we’re responsible for the region's Adult Education Budget (AEB).
+
We target priority growth sectors from the Local Industrial Strategy. This improves skills and secure jobs in communities. It also helps to improve productivity in the region.
+
What the budget is
+
The budget helps residents and employers get the skills needed in the region. This helps people to get the jobs they need and increases the skills of current employees. It unlocks specialist training as well.
+
It also allows for more flexible and tailored learning programmes in the region. This helps people to take part in learning, build confidence and their wellbeing. It unlocks opportunities for more people.
+
Our challenges
+
We set out the challenges for the labour market in our Regional Skills Plan:
+
High levels of unemployment in some parts of the region
+ Poverty is growing for people who are working because of low wages
+ Low skill levels with less people qualified to skill level 4, or no qualifications at all
+ Employers struggle to find people with the skills they need
+
We use the budget to help improve confidence and opportunities for residents. It helps business find staff with the skills they need too.
+
Priorities for the budget
+
We will fund adult education through a range of delivery partners. Through commissioning, the budget will focus on:
+
Innovation
+
Looking at new ways of delivering learning. These will align with our priorities in the construction and digital sectors.
+
Talent & Progression
+
We'll develop new job schemes, and help build the skills of people in employment.
+
Collaboration
+
Working with our provider partners, we'll create an agile skills system. It will align to the needs of businesses and residents.
+
Sustainability
+
We're developing agreements with providers. These will check delivery against our key priorities. It will also track the impact of this approach.
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isDoubleCard: true,
+ title: 'Pharetra Sollicitudin Bibendum',
+ copy: 'Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.'
+ })
+ }}
+
+
+
+
+
+
+{% endblock %}
diff --git a/src/www/pages/mc/components/templates/document-foreword/index.njk b/src/www/pages/mc/components/templates/document-foreword/index.njk
new file mode 100644
index 00000000..7c4d0015
--- /dev/null
+++ b/src/www/pages/mc/components/templates/document-foreword/index.njk
@@ -0,0 +1,137 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="Local Transport Plan Green Paper" %} {% set section = "Templates" %}
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/page-contents/_page-contents.njk" import wmcadsPageContents %}
+{% from "wmcads/components/file-download/_file-download.njk" import wmcadsFileDownload %}
+{% from "wmcads/components/video-embed/_video-embed.njk" import wmcadsVideoEmbed %}
+{% from "wmcads/components/hub-header/_hub-header.njk" import wmcadsHubHeader %}
+{% from "wmcads/patterns/search/pagination/_pagination.njk" import wmcadsPagination %}
+{# Set array of tiles #}
+{% block content %}
+
+
+{{
+wmcadsHubHeader({
+ image: false,
+ title: "Local Transport Plan Green Paper"
+ })
+}}
+
+
+
+
+
Foreword
+
As well as being at the heart of the UK’s
+transport network, the West Midlands is at
+another kind of crossroads; one at which there
+is an opportunity to build back better from the
+COVID-19 pandemic, to ensure we can carry
+forward the reputation for economic success
+the region has built in the new millennium
+while improving the impacts of transport on
+our towns, cities and local communities.
+
+
This green paper sets out the challenges and
+opportunities facing our transport system to
+inspire deliberation with the public over the
+kind of transport system we want to see in the
+future. The decisions we make now about how
+we plan, invest in and manage our transport
+system will affect us all, as well as deciding
+what legacy we leave for future generations.
+
+
Over the past few years, the West Midlands has
+seen substantial improvements to its transport
+network. The West Midlands Metro has been
+extended through Birmingham city centre
+and a new line is under construction in the
+Black Country, connecting Wednesbury with
+Brierley Hill. We are improving our railways,
+with improved and new stations planned at
+Perry Barr, Darlaston, Willenhall, Aldridge and
+the revival of the old Camp Hill line. Fleets
+of electric buses are taking to the streets in
+increasing numbers. And our active travel
+revolution is well underway, with new cycling
+and walking routes springing up across the
+region. After decades of underinvestment, our
+region is beginning to turn things around.
+
+
But significant challenges remain in tackling
+the defining issues of our time, such as climate
+change, air quality, our health, and now our
+economic recovery from the pandemic. This
+paper poses some difficult questions about
+how we address these challenges. But it also
+offers real hope that, with a collective effort,
+we can create a West Midlands that leads the
+way in tackling these issues. We have a strong
+entrepreneurial and innovative heritage to build
+on. By thinking and acting differently we can
+create a place where transport improves the
+opportunities available to all our residents.
+
+
A key aim of this paper is to understand what
+our residents and communities want from their
+transport network. Your views will inform our
+new Local Transport Plan, due to be published
+later in the year.
+This green paper sets out five reasons why we
+should consider changing the way we travel.
+We call these our five Motives for Change.
+These are focussed on creating a fairer, greener,
+healthier, happier and more prosperous West
+Midlands. In particular, we want to know how
+the successive lockdowns have impacted our
+relationship with the transport network and how
+this should inform where we take the network in
+the coming years.
+This is the start of a conversation with
+residents, organisations and businesses on
+the kinds of changes we want to see in our
+transport system and the trade-offs required.
+So please engage with the prompts and issues
+raised in this paper and let us know what you
+think, so that together we can build a transport
+network that will
Getting transport right in our region requires us to have a plan for the future that balances the needs to provide access for everyone with the harmful impacts that transport can have on people and places.
+
This document sets out some of the big challenges that we need to address if we want transport to drive Inclusive Growth; sustainable and equitable growth where all citizens can shape, contribute and benefit from the advancement of the region.
+
These challenges are frames within the document as 5 Motives for Change.
+
+
Creating a fairer society
+
Supporting local communities and places
+
Becoming more active
+
Tackling the climate emergency
+
Sustaining economic success
+
+
+
Alternative formats
+ {{
+ wmcadsFileDownload({
+ html: false,
+ htmlInfo: true,
+ default: false,
+ htmlDoc: false,
+ pdfDoc: true,
+ dlName: 'Download Local Transport Plan Green Paper (pdf, 7.88MB)'
+ })
+ }}
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/components/templates/document-paper/index.njk b/src/www/pages/mc/components/templates/document-paper/index.njk
new file mode 100644
index 00000000..6e18a07f
--- /dev/null
+++ b/src/www/pages/mc/components/templates/document-paper/index.njk
@@ -0,0 +1,104 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="Reimagining transport in the West Midlands - WMLTP5 Green Paper" %} {% set section = "Templates" %}
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/page-contents/_page-contents.njk" import wmcadsPageContents %}
+{% from "wmcads/components/file-download/_file-download.njk" import wmcadsFileDownload %}
+{% from "wmcads/components/video-embed/_video-embed.njk" import wmcadsVideoEmbed %}
+{# Set array of tiles #}
+{% block content %}
+
+
+
+
+
+
Reimagining transport in the West Midlands - WMLTP5 Green Paper
+
+
+
+
+ {{
+ wmcadsVideoEmbed({
+ })
+ }}
+
+
TfWM is in the process of supporting the WMCA to update its current Local Transport Plan (LTP). This is a document that sets out the policies to promote safe, integrated, efficient and economic transport to, from and within our area as well as plans to implement those policies.
+
Publishing and reviewing the LTP is one of WMCA’s core statutory duties as the Local Transport Authority for the area covered by the West Midlands seven metropolitan districts/boroughs.
+
+
Why do we need a Green Paper?
+
Getting transport right in our region requires us to have a plan for the future that balances the needs to provide access for everyone with the harmful impacts that transport can have on people and places. We’ve published a Green Paper to start a conversation about what a new Local Transport Plan should look like.
+
We will use the Green Paper to drive engagement with people, businesses and other key stakeholders across the region. We want you to get involved and work with us together, so we can get it right for where you live and work.
+
The COVID-19 pandemic has hit our region hard but it has also shown us how adaptable we can be and that change can bring new opportunities and benefits. We want to build back better from the pandemic. Doing so will need us to think about how transport can better support a prosperous and well-connected West Midlands which is fairer, greener and healthier.
+
+
Our Motives for Change
+
We think there are some big challenges that we need to address if we want transport to drive Inclusive Growth; sustainable and equitable growth where all citizens can shape, contribute and benefit from the advancement of the region. We’ve framed these challenges in our 5 Motives for Change.
+
+
Creating a fairer society
+
Supporting local communities and places
+
Becoming more active
+
Tackling the climate emergency
+
Sustaining economic success
+
+
The Motives for Change are all important, but the need to tackle the climate emergency has a particular urgency that the other Motives for Change lack. Current predictions suggest that if we don’t rapidly reduce our carbon emissions, by 2030 we could face a global scenario in which we lose the ability to prevent escalating climate change and the harm it will cause around the world and in the West Midlands. That is why WMCA has declared a climate emergency and set a zero-carbon target for the West Midlands by 2041, with the first of four 5-year plans already published.
+
This suggests a new LTP could have a much stronger focus on achieving transformational change within the next 10 years, rather than focussing on a longer-term vision and more gradual change. This presents us with the opportunity to rapidly reimagine transport to deliver transformative improvement in the lives of millions of people across our region, and for the West Midlands to demonstrate leadership in tackling global and local problems.
+ {{
+ wmcadsFileDownload({
+ html: true,
+ default: true,
+ htmlName: 'Local Transport Plan Green Paper'
+ })
+ }}
+
+
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/components/templates/document-section/index.njk b/src/www/pages/mc/components/templates/document-section/index.njk
new file mode 100644
index 00000000..b8869507
--- /dev/null
+++ b/src/www/pages/mc/components/templates/document-section/index.njk
@@ -0,0 +1,60 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="Local Transport Plan Green Paper" %} {% set section = "Templates" %}
+{# Imports #}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/page-contents/_page-contents.njk" import wmcadsPageContents %}
+{% from "wmcads/components/hub-header/_hub-header.njk" import wmcadsHubHeader %}
+{% from "wmcads/patterns/search/pagination/_pagination.njk" import wmcadsPagination %}
+{% from "wmcads/components/images/_image-with-summary.njk" import wmcadsImageWithSummary %}
+{# Set array of tiles #}
+{% block content %}
+
+
+{{
+wmcadsHubHeader({
+ image: false,
+ title: "Local Transport Plan Green Paper"
+ })
+}}
+
+
+
+
+
Section 3: Our Motives for Change
+
Inclusive Growth in the West Midlands means that all citizens can shape, contribute and benefit from the advancement of the region.
+
It is a deliberate and socially purposeful model of economic growth – measured not only by how fast or aggressive it is; but also by how well it is shared across the whole population and place, and the capacity of our environment to sustain it.
+
WMCA’s goal for Inclusive Growth is to occupy a space where social need, economic ambition and our responsibilities to the environment are in balance.
+
+ {{
+ wmcadsImageWithSummary({
+ img: "/img/examples/diagram.png",
+ title: "Inclusive Growth Framework",
+ summary: "The space for a balanced, inclusive economy is where social challenges can be met without degrading the environment"
+ })
+ }}
+
+
Transport’s relationship with Inclusive Growth is complex:
+
+
Meeting many of our needs and ambitions relies on transport connections
+
But those same transport connections have impacts that the environment can’t sustain and which are detrimental to other social and economic outcomes; and
+
Improving connections for a particular group of people, by a particular mode, to particular places can limit and even worsen connectivity elsewhere for others.
Combined Authorites are set up to improve their region’s economies. We invest in the region through collaboration with our partners, but we don’t replace local councils.
+ {{
+ wmcadsContentCard({
+ src: true,
+ title: 'WMCA donates computers to school children to tackle digital divide',
+ copy: '150 old staff laptops will be donated to Wowdot',
+ isNews: true,
+ isNewsSub: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ src: true,
+ title: 'WMCA donates computers to school children to tackle digital divide',
+ copy: '150 old staff laptops will be donated to Wowdot',
+ isNews: true,
+ isNewsSub: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ src: true,
+ title: 'Historic devolution agreement reached',
+ copy: 'The Government will contribute 40 million over the next 30 years',
+ isNews: true,
+ isNewsSub: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ src: true,
+ title: 'Historic devolution agreement reached',
+ copy: 'The Government will contribute 40 million over the next 30 years',
+ isNews: true,
+ isNewsSub: true
+ })
+ }}
+
+ {{
+ wmcadsContentCard({
+ src: true,
+ isSrcDefault: true,
+ title: 'Coronavirus support',
+ copy: 'Get advice and support during the pandemic such as finding a new job and applying for business grants.',
+ clickable: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ src: true,
+ isSrcDefault: true,
+ title: '2021 Mayoral election',
+ copy: 'Find out what the Mayor is reponsible for and how to vote.',
+ clickable: true
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ title: 'Upskill yourself in lockdown',
+ copy: 'Find out what the Mayor is reponsible for and how to vote.',
+ clickable: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ title: 'Thrive at Work',
+ copy: 'Join our free workplace wellbeing scheme to keep staff healthy, motivated and productive.',
+ clickable: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ title: 'Annual Plan 2021 - 2022',
+ copy: 'We’ve set our ambitions for each of our priorities over the next year.',
+ clickable: true
+ })
+ }}
+
+
+
Upcoming events
+
+ {{
+ wmcadsContentCard({
+ eventTitle: 'Mayors Mentors',
+ eventCopy: 'Find out about the Mayor’s Mentors scheme and how it can help you grow.',
+ clickable: true,
+ isEvent: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ eventTitle: 'Greater Birmingham LEP Skills Day',
+ eventCopy: 'Hear from employers and training providers on upskilling opportunities available.',
+ clickable: true,
+ isEvent: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ eventTitle: 'Sprint exhibition - Walsall',
+ eventCopy: 'Learn and ask questions about the upcoming Sprint works in the region.',
+ clickable: true,
+ isEvent: true
+ })
+ }}
+
Example templates that make up the main West Midlands Combined Authority Website
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/components/templates/news-article/index.njk b/src/www/pages/mc/components/templates/news-article/index.njk
new file mode 100644
index 00000000..afa8b6f6
--- /dev/null
+++ b/src/www/pages/mc/components/templates/news-article/index.njk
@@ -0,0 +1,68 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="News Article" %} {% set section = "Templates" %}
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/content-card/_content-card.njk" import wmcadsContentCard %}
+{% from "wmcads/components/page-contents/_page-contents.njk" import wmcadsPageContents %}
+{# Set array of tiles #}
+{% block content %}
+
+
+
+
+
+
+
Mayor highlights HS2 jobs boost as new contractor for Curzon Street station development is unveiled
+
Published: Monday 10 May 2021
+
HS2 Ltd today confirmed that a team made up of Mace and Dragados will build Birmingham’s new city centre high speed railway station, in a deal that is set to further boost the West Midlands economy.
+
The deal, which is worth up to £570m, will see Mace Dragados work with HS2 Ltd in two stages to finalise the detailed design and then build the landmark station.
+
The station itself will be net zero carbon in operation and adopt the latest eco-friendly design and sustainable technologies, including capturing rainwater and utilising sustainable power generation, with over 2,800m2 of solar panels located on platform canopies.
+
+
Mayor of the West Midlands Andy Street welcomed the announcement and the major role HS2 will play in the regional recovery after the pandemic. He said:
+
“HS2 is at the heart of my plans to create 100,000 jobs in just two years to help the West Midlands recover from the coronavirus pandemic, and so I am absolutely thrilled by today’s news.
+
“Not only is this a major shot in the arm for our region’s construction sector that was performing so well pre-Covid, but the building of Curzon Street is also set to create hundreds of jobs.
+
“That’s local jobs for local people at such a difficult time, and I will ensure we continue to run construction training courses so residents can get the skills they need to take on these new roles.
+
“I’m also excited to see the commitment from HS2 ltd that the station will be net-zero, helping the West Midlands in its battle against the climate emergency and in our aim to become carbon neutral by 2041.
+
It is designed to meet a ‘BREEAM excellent’ standard, which is an industry recognised standard for buildings that reduce energy usage and materials waste and minimise their impact on the natural environment.
+
Mace and Dragados have a strong track record delivering some of the world’s most complex and exciting infrastructure projects, including the refurbishment of Birmingham New Street, Battersea Power Station (phase 2) and work on delivering the Spanish high speed rail network, including the major new Madrid Atocha and Barcelona Sants stations. They are also working together in a separate joint venture delivering HS2’s London terminus at Euston.
+
HS2 Ltd’s chief executive, Mark Thurston said:
+
“Birmingham Curzon Street is right at the heart of the HS2 project, providing a fantastic terminus for trains running right into the heart of the city centre. The station will play a vital role in the long-term economic future of the West Midlands, creating hundreds of jobs during construction and boosting the region after the pandemic.
+
“Mace and Dragados have some incredible experience delivering some of the world’s most challenging and exciting infrastructure projects, and I look forward to welcoming them to the team.
+
HS2 Minister Andrew Stephenson said:
+
“This is a huge moment for Birmingham and for HS2. The brand new, world class HS2 station at Birmingham Curzon Street will place the city at the beating heart of the new HS2 network.
+
“It marks a major investment in Birmingham’s future as we build back better from Covid-19 - breathing new life into the city centre, supporting hundreds of new skilled jobs and helping forge better connections across the whole country.
+
HS2 worked with WSP and Grimshaw Architects LLP on the design for Curzon Street, which is inspired by the great arched roofs built by the Victorian railway pioneers. The design takes that inspiration into the 21st Century, ensuring accessibility and a focus on the open space and landscaping around it.
+
Passengers will also be to access up to nine high speed trains an hour travelling north and south, and the Midland Metro - which runs alongside and underneath the station. Accessible pedestrian routes will connect to local bus services, Sprint rapid transit bus services and local rail services from the neighbouring Moor Street station. Cycle parking has also been incorporated, providing space for more than 550 bicycles.
+
Significant progress has already been made on site at Curzon Street. Site clearance is now complete and a massive archaeological programme, involving 70 archaeologists, has unearthed the world’s oldest railway roundhouse.
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "New transport system will be sprinting for success at Commonwealth Games",
+ date: "Thursday 23 August 2018",
+ excerpt: "Top athletes are not the only ones aiming to be in peak condition for the 2022 Commonwealth Games in Birmingham – the region’s transport system is also..."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "Mayor tells business leaders why the West Midlands should be seen as a leading net zero region",
+ date: "Thursday 23 August 2018",
+ excerpt: "Mayor of the West Midlands Andy Street has told a cross-sector audience of local decision makers why the West Midlands should be seen as one of the UK’s leading regions in supporting the race to net zero."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "First of the new generation of bus shelters unveiled as work continues on the Sprint rapid bus route",
+ date: "Thursday 23 August 2018",
+ excerpt: "The first of a new generation of bus shelters has been unveiled in Perry Barr, Birmingham ready for the introduction of the Sprint rapid bus route next year."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "First of the new generation of bus shelters unveiled as work continues on the Sprint rapid bus route",
+ date: "Thursday 23 August 2018",
+ excerpt: "The first of a new generation of bus shelters has been unveiled in Perry Barr, Birmingham ready for the introduction of the Sprint rapid bus route next year."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "First of the new generation of bus shelters unveiled as work continues on the Sprint rapid bus route",
+ date: "Thursday 23 August 2018",
+ excerpt: "The first of a new generation of bus shelters has been unveiled in Perry Barr, Birmingham ready for the introduction of the Sprint rapid bus route next year."
+ }
+ )}}
+
+ {{wmcadsPagination({
+ pageCount: 6,
+ activePage: 1
+ })}}
+
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "HS2 Ltd",
+ breadcrumbs: true,
+ date: "Thursday 23 August 2018",
+ excerpt: "High Speed Two (HS2) is the new railway that will be the backbone of Britain’s transport network. High Speed Two Limited (HS2 Ltd) is the company developing..."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "Connectivity",
+ breadcrumbs: true,
+ date: "Thursday 23 August 2018",
+ excerpt: "HS2 will place the West Midlands at the heart of the UK’s transport network, with two new stations in the region, the interchange at Solihull and the new Curzon Street..."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "New transport system will be sprinting for success at Commonwealth Games",
+ breadcrumbs: true,
+ date: "Thursday 23 August 2018",
+ excerpt: "Top athletes are not the only ones aiming to be in peak condition for the 2022 Commonwealth Games in Birmingham – the region’s transport system is also..."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "Our Vision",
+ breadcrumbs: true,
+ date: "Thursday 23 August 2018",
+ excerpt: "High Speed 2 (HS2) will have a truly transformational impact on the West Midlands. As well as the economic benefits of investment in high speed rail infrastructure..."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "Network Resilience",
+ breadcrumbs: true,
+ date: "Thursday 23 August 2018",
+ excerpt: "We are experiencing an unprecedented level of investment in bringing much needed improvements to the way that people and goods are able to move around the West..."
+ }
+ )}}
+
+ {{wmcadsPagination({
+ pageCount: 8,
+ activePage: 1
+ })}}
+
",
smallTitle: true,
readMore: true,
- link: '/templates/',
+ link: '/mc/templates/',
linkText: 'Read more about templates',
linkTitle: 'Templates'
})
diff --git a/src/www/pages/mc/patterns/autocomplete/index.njk b/src/www/pages/mc/patterns/autocomplete/index.njk
new file mode 100644
index 00000000..0f829eb8
--- /dev/null
+++ b/src/www/pages/mc/patterns/autocomplete/index.njk
@@ -0,0 +1,135 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Autocomplete" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{# Imports #}
+{% from "wmcads/patterns/autocomplete/_autocomplete.njk" import wmcadsAutocomplete %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+ The autocomplete component is an input field that offers the user text suggestions as they type.
+ This is often done by hitting an API endpoint with the users query when the user has finished typing.
+
+
+ The autocomplete pattern is a combination of the input and loader components.
+
+{# When #}
+
When to use it?
+
+
As a progressive enhancement to make a users journey shorter/easier when searching
+
When you have a smaller data set/list that is quick to query
+
When you want to ensure the user submits a relevant query/value
+
+{# When not #}
+
When not to use it?
+
+
When you have a massive set of data, instead you should have an input/search that shows results after submission.
+
Don't use this component as if it is a search box. Autocomplete is to suggest a value to a user via it's results not act as a results page for a search.
+
+
+
+{# Default #}
+
Default state
+
In its default state, the autcomplete component is made up of a text input with a search icon.
+
For best practice, ensure that the placeholder and aria-label describes what the autocompletes intended purpose is.
+
Notice that there is also a ds-loader component nested within the autocomplete, more on that in the next section.
+ When a user types in a query, you may want to have some code that hits an API or gets the data/suggestions for the autocomplete from somewhere. To help users understand that they need to wait for something we can change the autocomplete to a loading state.
+ We do this by adding the class ds--is-loading to the top level of the autocomplete (this is the only difference between the loading state and default state code snippets).
+
+
As mentioned in the previous section, there is a ds-loader component nested in the autocomplete. When adding the ds--is-loading class, it will hide the search icon and show the loading spinner in it's place.
+
Below is an example of how the autocomplete looks when a user has typed in 'My query' and is waiting for autocomplete suggestions to load.
+
+
It is good practice to:
+
+
Show loading state when waiting for data to load
+
Let the user finish typing before you fetch autocomplete suggestions (add a debounce)
+
Add the ds-is--loading class as soon as you are fetching data
The final state of the autocomplete is showing the suggestions.
+
You'll notice there is a new section in the code snippet called ds-autocomplete-suggestions, this should be shown/visible when your API/data has loaded the suggestions.
+
It's good practice to:
+
+
Show the suggestions in an unordered list
+
Ensure there is a title tag on the .ds-autocomplete-suggestions__li describing further information about the suggestion
+
Ensure there is a tabindex="0" attribute on the .ds-autocomplete-suggestions__li to allow users to tab through the results with a keyboard
+
+
+
Default (text)
+
The most commonly used suggestions will be displayed as text only.
You will notice that the suggestions are much bigger than text only results, and have an overflow scrollbar. This scrollbar will appear if the height of the suggestion container goes over a certain height.
+
+ As you can see from the code snippet, the main ds-autocomplete-suggestions and ds-autocomplete-suggestions__li classes are prevelant on the ul and li elements. Within the li element we have nested the disruption indicator component whilst also using the wmcads grid. This gives enough flexibility to style the suggestions to how we want, find out more in the next section.
+
There are many ways in which you can show the suggestions, as the autocomplete component has been built in a way that the suggestion results can be custom styled to how you like.
+
+ As long as you have the ul element with the class ds-autocomplete-suggestions which contains a direct child li element that has the class ds-autocomplete-suggestions__li then you can fully customise how you want the suggestions to look.
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/patterns/banner/index.njk b/src/www/pages/mc/patterns/banner/index.njk
new file mode 100644
index 00000000..f7eee3ec
--- /dev/null
+++ b/src/www/pages/mc/patterns/banner/index.njk
@@ -0,0 +1,273 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Banner" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/banner/_banner.njk" import wmcadsBanner %}
+
+{% block content %}
+
+{% markdown %}
+
+## Normal
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentHTML: "This is a new service - your feedback will help us to improve it."
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+
+{% markdown %}
+
+{# Banner with phase indicator #}
+
+## With phase indicator
+
+{# What #}
+
+### 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 #}
+
+### When to use it?
+
+- When a service is new
+
+{# When not to #}
+
+### When not to use it?
+
+- On a service that has matured and has a steadily positive rate of satisfaction
+
+{# How #}
+
+### 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).
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ phase: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+
+{% markdown %}
+
+{# Emergency banner #}
+
+## Emergency banner
+
+{# What #}
+
+
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 #}
+
+
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 #}
+
+
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 #}
+
+
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 #}
+
+### Sitewide
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentText: "Emergency notification title",
+ emergency: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{% markdown %}
+{# On-page #}
+
+### On-page variant
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentText: "Emergency notification title",
+ emergency: true,
+ onPage: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+{% markdown %}
+
+{# Hub page banner #}
+
+## Hub page banner
+
+{# What #}
+
+
What does it do?
+
+- Helps users to identify they have eventered a Hub section of the website
+- Provides users with a short description of the chosen hub of the WMCA
+
+{# When #}
+
+
When to use it?
+
+- Only on Hub Landing Pages
+
+
When not to use it?
+
+- On pages where the content is not related to a hub overview
+
+
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, optional logo or icon will change for each hub landing page.
+
+{% endmarkdown %}
+
+{% from "wmcads/patterns/hub-page-banner/_hub-page-banner.njk" import wmcadsHubPageBanner %}
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ contentHTML: "Example using a short description"
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ contentHTML: "Example using an example brand logo with a longer text description",
+ logo: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ title: "Hub Header with a longer example title"
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{% markdown %}
+
+{# Homepage banner #}
+
+## Homepage
+
+{# What #}
+
+
What does it do?
+
+- Provides a complementary image associated with the West Midlands
+- Highlights a welcome message for visitors of the West Midlands Combined Authority site
+
+{# When #}
+
+
A card with disruption indicator components in, which show the live status of a bus, train or tram route and roads.
+
+{# When to #}
+
When to use it?
+
+
When the live status of a mode of transport is useful to the content. For example, showing the live status of train lines next to content about trains.
+
+{# When not to #}
+
When not to use it?
+
+
When the live status is irrelevant to the content. Users can find this information on the homepage.
+
+
+{# Set up travel updates #}
+{% from "wmcads/patterns/content-cards/travel-updates/_travel-updates.njk" import wmcadsContentCardTravelUpdates %}
+
+{{
+ compExample([
+ wmcadsContentCardTravelUpdates()
+ ])
+}}
+
+
+{# Button card #}
+
Button card
+{# What #}
+
What is it?
+
+
A card with several buttons in.
+
+{# When to #}
+
When to use it?
+
+
To direct users to different content relevant to their needs.
+
At the end of the main page content. We found that users preferred to split lots of content into smaller, specific pages and that this was the best way to continue the journey after reading the main overview content.
+
+{# When not to #}
+
When not to use it?
+
+
To attract the user's attention if there is no benefit to them reading the content.
+
To list links within a section or related content. Use the in-line navigation card instead.
+
+
+{# Set up buttons #}
+{% from "wmcads/patterns/content-cards/buttons/_buttons.njk" import wmcadsContentCardButtons %}
+
+{{
+ compExample([
+ wmcadsContentCardButtons()
+ ])
+}}
+
+
+{# Image card #}
+
Image card
+{# What #}
+
What is it?
+
+
A card with an image in.
+
+{# When to #}
+
When to use it?
+
+
To display an image within a tile.
+
When the image complements the text.
+
+{# When to to #}
+
When not to use it?
+
+
When the image has text in. This distracts the user and usually fails accessibility criteria.
+
When the image is a cartoon or illustration. These are called vector images. Vector images display as poor quality for many users.
+
+
+{# Set up image #}
+{% from "wmcads/patterns/content-cards/image/_image.njk" import wmcadsContentCardImage %}
+
+{{
+ compExample([
+ wmcadsContentCardImage()
+ ])
+}}
+
+
+{# In-line navigation card #}
+
In-line navigation card
+{# What #}
+
What is it?
+
+
A card with in-text links for navigation of sections and displaying related content.
+
+{# When to #}
+
When to use it?
+
+
To help the user navigate a collection of pages. This is called a section.
+
To show related content which meets user needs.
+
To help the user navigate a long page using in-text anchors.
+
Only use this pattern in a sidebar.
+
+{# When not to #}
+
When not to use it?
+
+
When the page links you are listing to form part of a journey or process. The journey should be linear.
+
When you are trying to attract the user's attention. This is called a call-to-action.
+
+{# How to #}
+
How to use it
+
+
The group of links must have a title to help users understand what the links are for. For example, 'Related content', 'On this page' or the section name.
+
If the card is used to navigate a long page of content, it should be displayed on the left-hand side.
+
If the card is used to navigate a set of pages, like a section or related content, it should be displayed on the right-hand side.
+
The current page or section being viewed must be inset.
+
+
+{# Set up inline navigation #}
+{% from "wmcads/patterns/content-cards/inline-navigation/_inline-navigation.njk" import wmcadsContentCardInlineNavigation %}
+
+{{
+ compExample([
+ wmcadsContentCardInlineNavigation()
+ ])
+}}
+
+{# With current page #}
+
Allows the user to sign up for updates when information changes on a page.
+
Sends personalised updates to users based on their location.
+
+{# When to #}
+
When to use it?
+
+
Use these content tiles on pages where users can sign-up for newsletter updates.
+
For a standard newsletter sign up, use the content tile where the text fields expand.
+
If you want to capture additional user data, then use the content block which links to an external form, e.g. Campaign Monitor.
+
+
When adding a sign up form from Campaign Monitor, you are provided with HTML markup, but make sure not to change any of the generated attributes except for classes.
+
They have been changed in the following examples to avoid accessibility errors.
+
+
+{# Set up email sign up #}
+{% from "wmcads/patterns/content-cards/email-sign-up/_email-sign-up.njk" import wmcadsContentCardEmailSignUp %}
+
+{# Collapsed #}
+
Collapsed
+
This is the default state for the email sign up card.
Use this content card when you want to send users to an external Campaign Monitor form if you want to capture more user data such as demographics, travel habits etc.
Allows users to accept or amend our website's cookie settings.
+
Our cookie preferences should be confirmed before a user can use our website.
+
The Manage cookies pattern allows users to change their cookie preferences.
+
+
+
+
Cookie banner
+{# When to #}
+
When to use it?
+
+
+ When a user first visits the West Midlands Combined Authority website and has not accepted or amended the cookie preferences.
+
+
+ The banner should be above the header on every page and only disappear when a user has accepted or amended their
+ cookie preferences.
+
+
+{# When not to #}
+
When not to use it?
+
+
When a user has accepted or amended the website's cookies.
+
+ When a returning user visits the West Midlands Combined Authority website and has already accepted or amended their cookies in
+ a previous session.
+
+
+{# How #}
+
How it works
+
+
When a user has accepted or amended the website's cookies.
+
+ When a returning user visits the West Midlands Combined Authority website and has already accepted or amended their cookies in
+ a previous session.
+
+
+
The Cookies banner should be placed above the main header and be on every page
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 Transport for West Midlands 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 ds-footer--mobile-app to the ds-footer element
+
+
+
+ You will most likely want to use this with the mobile variants of the
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'header pattern',
+ link: '#mobile-app-header'
+ })
+ }} .
+
+
+{{
+ compExample([
+ wmcadsFooter({
+ app: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/footer/",
+ njk: false,
+ js: true
+ })
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/patterns/header-and-footer/index.njk b/src/www/pages/mc/patterns/header-and-footer/index.njk
new file mode 100644
index 00000000..8e42881b
--- /dev/null
+++ b/src/www/pages/mc/patterns/header-and-footer/index.njk
@@ -0,0 +1,212 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Header and footer" %}
+{% set section="Patterns" %}
+{# Imports #}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+{% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+{%- from "wmcads/components/link/link/_link.njk" import wmcadsLink -%}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
The primary way of navigating the website
+
Standardised pattern
+
+{# When #}
+
When to use it?
+
+
Every page must have a header and a footer
+
+
+
+
+
+
+{# Header #}
+
Header
+{# Skip Link #}
+
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 ds-main-content so the user can skip to this section.
+{# Logo #}
+
Logo
+
This must always be the West Midlands Combined Authority logo.
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 #}
+
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 #}
+
Search
+
This functionality only shows for desktop and tablet users. When clicked, search expands and takes over the whole page.
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 .ds-header__title .ds-col-1 .ds-col-sm-auto on the element
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 Combined Authority header.
+
+
To use the mobile app variant:
+
+
Add the modifier class ds-header--mobile-app to the ds-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
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'footer pattern',
+ link: '#mobile-app-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 Combined Authority 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 ds-footer--mobile-app to the ds-footer element
+
+
+
+ You will most likely want to use this with the mobile variants of the
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'header pattern',
+ link: '#mobile-app-header'
+ })
+ }} .
+
+
+{{
+ compExample([
+ wmcadsFooter({
+ app: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/footer/",
+ njk: false,
+ js: true
+ })
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/patterns/header-demo/index.njk b/src/www/pages/mc/patterns/header-demo/index.njk
new file mode 100644
index 00000000..c32de977
--- /dev/null
+++ b/src/www/pages/mc/patterns/header-demo/index.njk
@@ -0,0 +1,220 @@
+
+
+
+ {% include "www/_partials/_head.njk" %}
+
+
+
+
+
+ {# header #}
+ {% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+ {{
+ wmcadsHeader({
+ id: "mega-menu-example",
+ search: true,
+ searchSuggestions: ["See live departures", "Find a timetable", "Check for disruptions", "Manage my Swift card", "Find ticket prices", "Get a refund", "Update Direct Debit", "Apply for a 16-18 photocard"],
+ navItems: [{
+ name: "Plan a journey",
+ subnavItems: [{
+ name: "Plan your journey",
+ icon: "general-route",
+ subnavItems: [{
+ name: "Journey planner"
+ },
+ {
+ name: "Find a timetable"
+ },
+ {
+ name: "Live and planned disruptions"
+ },
+ {
+ name: "Major roadworks and events"
+ }]
+ },
+ {
+ name: "Ways to travel",
+ icon: "general-location-arrow",
+ subnavItems: [{
+ name: "Walking"
+ },
+ {
+ name: "Cycling"
+ },
+ {
+ name: "Buses"
+ },
+ {
+ name: "Trains"
+ },
+ {
+ name: "Trams"
+ },
+ {
+ name: "Park and ride"
+ },
+ {
+ name: "Driving"
+ }]
+ },
+ {
+ name: "Travel information",
+ icon: "general-info",
+ subnavItems: [{
+ name: "How to travel with accessibility needs"
+ },
+ {
+ name: "How to travel safely"
+ },
+ {
+ name: "How to get to hospital"
+ }]
+ },
+ {
+ name: "Discover our region",
+ icon: "general-star",
+ subnavItems: [{
+ name: "Places and attractions to visit"
+ },
+ {
+ name: "Find discount vouchers"
+ }]
+ }]
+ }, {
+ name: "Swift and tickets",
+ subnavItems: [{
+ name: "Find a ticket",
+ icon: "general-search",
+ subnavItems: [{
+ name: "Ticket finder"
+ },
+ {
+ name: "Types of ticket"
+ }]
+ },
+ {
+ name: "Discounts and free travel passes",
+ icon: "general-wallet",
+ subnavItems: [{
+ name: "Under 18s"
+ },
+ {
+ name: "Students"
+ },
+ {
+ name: "Families and groups"
+ },
+ {
+ name: "Finding or starting a new job"
+ },
+ {
+ name: "Disabled person's pass"
+ },
+ {
+ name: "Older person's pass"
+ },
+ {
+ name: "WASPI women's pass"
+ }]
+ },{
+ name: "Manage your Swift card",
+ icon: "swift-bird-icon",
+ subnavItems: [{
+ name: "How to use your Swift card"
+ },
+ {
+ name: "Update your personal details"
+ },
+ {
+ name: "Top up your Swift card"
+ },
+ {
+ name: "View your payment history"
+ },
+ {
+ name: "View your travel history"
+ },
+ {
+ name: "Replace your lost Swift card"
+ }]
+ },{
+ name: "Manage your ticket",
+ icon: "general-ticket",
+ subnavItems: [
+ {
+ name: "Update your Direct Debit"
+ },
+ {
+ name: "Get a refund"
+ },
+ {
+ name: "Make a payment"
+ },
+ {
+ name: "Replace your lost ticket or pass"
+ }
+ ]
+ }]
+ },{
+ name: "Get help",
+ subnavItems: [{
+ name: "Contact an operator"
+ },
+ {
+ name: "Find a travel centre"
+ },
+ {
+ name: "Find lost property"
+ },
+ {
+ name: "Give feedback"
+ },
+ {
+ name: "Contact us"
+ },
+ {
+ name: "Report anti-social behaviour"
+ },
+ {
+ name: "Request a new bus shelter or stop pole"
+ },
+ {
+ name: "Report a problem with a shelter or stop"
+ }]
+ }],
+ megaMenu: true
+ })
+ }}
+ {# header #}
+
+
+ {# main #}
+
+ Close window
+
+ {# main #}
+
+
+ {% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+ {{
+ wmcadsFooter({
+ bottomMenu: [{
+ name: "Privacy & Cookies Policy",
+ link: "https://www.wmca.org.uk/privacy-cookies-policy/"
+ }]
+ })
+ }}
+
+
+
+ {% include "www/_partials/_scripts.njk" %}
+
+
+
+
diff --git a/src/www/pages/mc/patterns/header/index.njk b/src/www/pages/mc/patterns/header/index.njk
new file mode 100644
index 00000000..423c907b
--- /dev/null
+++ b/src/www/pages/mc/patterns/header/index.njk
@@ -0,0 +1,305 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Header" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{# Imports #}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+{% from "wmcads/patterns/header-v2/_header-v2.njk" import wmcadsHeaderV2 %}
+{% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/warning-text/_warning-text.njk" import wmcadsWarningText %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
The primary way of navigating the website
+
Standardised pattern
+
+{# When #}
+
When to use it?
+
+
Every page must have a header and a footer
+
+
+
+{# Header #}
+
Header
+{# Skip Link #}
+
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 ds-main-content so the user can skip to this section.
+{# Logo #}
+
Logo
+
This must always be the Transport for West Midlands logo.
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 #}
+
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 #}
+
Search
+
This function expands the mega menu and reveals the search bar along with the ‘I want to…’ feature.
+
The ‘I want to...’ feature shows a list of the top page links which users access through search. This is to help users find the information they are searching for faster. These links are regularly updated using search data to maintain their relevance.
+
On mobile, the mega menu search function uses a primary purple background instead of the standard white background. Our user testing found users preferred the white link text on the primary purple background as it is clearer to read.
+
+{{
+ compExample([
+ wmcadsHeaderV2({
+ id: "mega-menu-example",
+ search: true,
+ placeholder: "fg",
+ brand: "wmca",
+ navItems: [{
+ name: "The Mayor",
+ subnavItems: [{
+ name: "Plan your journey",
+ icon: "general-route",
+ subnavItems: [{
+ name: "Journey planner"
+ },
+ {
+ name: "Find a timetable"
+ },
+ {
+ name: "Live and planned disruptions"
+ },
+ {
+ name: "Major roadworks and events"
+ }]
+ },
+ {
+ name: "Ways to travel",
+ icon: "general-location-arrow",
+ subnavItems: [{
+ name: "Walking"
+ },
+ {
+ name: "Cycling"
+ },
+ {
+ name: "Buses"
+ },
+ {
+ name: "Trains"
+ },
+ {
+ name: "Trams"
+ },
+ {
+ name: "Park and ride"
+ },
+ {
+ name: "Driving"
+ }]
+ },
+ {
+ name: "Travel information",
+ icon: "general-info",
+ subnavItems: [{
+ name: "How to travel with accessibility needs"
+ },
+ {
+ name: "How to travel safely"
+ },
+ {
+ name: "How to get to hospital"
+ }]
+ },
+ {
+ name: "Discover our region",
+ icon: "general-star",
+ subnavItems: [{
+ name: "Places and attractions to visit"
+ },
+ {
+ name: "Find discount vouchers"
+ }]
+ }]
+ }, {
+ name: "Who we are",
+ subnavItems: [{
+ name: "Find a ticket",
+ icon: "general-search",
+ subnavItems: [{
+ name: "Ticket finder"
+ },
+ {
+ name: "Types of ticket"
+ }]
+ },
+ {
+ name: "Discounts and free travel passes",
+ icon: "general-wallet",
+ subnavItems: [{
+ name: "Under 18s"
+ },
+ {
+ name: "Students"
+ },
+ {
+ name: "Families and groups"
+ },
+ {
+ name: "Finding or starting a new job"
+ },
+ {
+ name: "Disabled person's pass"
+ },
+ {
+ name: "Older person's pass"
+ },
+ {
+ name: "WASPI women's pass"
+ }]
+ },{
+ name: "Manage your Swift card",
+ icon: "swift-bird-icon",
+ subnavItems: [{
+ name: "How to use your Swift card"
+ },
+ {
+ name: "Update your personal details"
+ },
+ {
+ name: "Top up your Swift card"
+ },
+ {
+ name: "View your payment history"
+ },
+ {
+ name: "View your travel history"
+ },
+ {
+ name: "Replace your lost Swift card"
+ }]
+ },{
+ name: "Manage your ticket",
+ icon: "general-ticket",
+ subnavItems: [
+ {
+ name: "Update your Direct Debit"
+ },
+ {
+ name: "Get a refund"
+ },
+ {
+ name: "Make a payment"
+ },
+ {
+ name: "Replace your lost ticket or pass"
+ }
+ ]
+ }]
+ },{
+ name: "What we do",
+ subnavItems: [{
+ name: "Contact an operator"
+ },
+ {
+ name: "Find a travel centre"
+ },
+ {
+ name: "Find lost property"
+ },
+ {
+ name: "Give feedback"
+ },
+ {
+ name: "Contact us"
+ },
+ {
+ name: "Report anti-social behaviour"
+ },
+ {
+ name: "Request a new bus shelter or stop pole"
+ },
+ {
+ name: "Report a problem with a shelter or stop"
+ }]
+ },{
+ name: "In my area"
+ },{
+ name: "Contact us"
+ }],
+ megaMenu: true,
+ megaMenuDemo: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/header-v2/",
+ njk: false,
+ js: true,
+ iframe: true
+ })
+}}
+
+{# With title variant #}
+
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 .ds-header__title .ds-col-1 .ds-col-sm-auto on the element
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/patterns/index.njk b/src/www/pages/mc/patterns/index.njk
new file mode 100644
index 00000000..55ff4044
--- /dev/null
+++ b/src/www/pages/mc/patterns/index.njk
@@ -0,0 +1,16 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Patterns" %}
+{% set section = "Patterns" %}
+{% set ds = 'mc' %}
+
+{% block content %}
+
Patterns are reusable parts of the user interface that have been made to support a variety of
+ applications.
+
+
Individual patterns can be used in multiple different patterns and contexts. For example, the
+ text input component
+ can be used to ask for an email address, a National Insurance number or someone’s name.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples provided
+ will render exactly as they do inside the Design System.
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/patterns/question-form/index.njk b/src/www/pages/mc/patterns/question-form/index.njk
new file mode 100644
index 00000000..495871f1
--- /dev/null
+++ b/src/www/pages/mc/patterns/question-form/index.njk
@@ -0,0 +1,127 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Question form" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
What does it do?
+
+
Asks a user questions which a service requires.
+
Helps to break down complex forms by spreading questions across multiple pages.
+
+
When to use it?
+
+
When you are asking users for information as part of a service.
+
When a form is required to be spread across multiple pages.
+
+
When not to use it?
+
+
When there are multiple questions on the same page, unless you have user research that says it makes sense to group the questions.
+
+
How it works?
+
+
Always test questions with users through user research
This shows the user all of the data they have entered before they submit the form. This stage allows the user to change any details before submitting the form.
+ {% from "wmcads/patterns/question/summary/_summary.njk" import wmcadsSummary %}
+ {% from "wmcads/components/table/_table.njk" import wmcadsTable %}
+ {% from "wmcads/components/button/_button.njk" import wmcadsButton %}
+ {{
+ compExample([
+ wmcadsSummary({
+ question: "Check your answers before reinstating your Direct Debit",
+ html:
+"
Now send your request
+
By submitting this request you are confirming that, to the best of your knowledge, the details you are providing are correct.
+ You consent to West Midlands Combined Authority possibly changing your Direct Debit date if it usually would occur in the next 10 days.
+ You also consent to West Midlands Combined Authority reinstating your Direct Debit instruction.
This is a confirmation message to show that the user has successfully submitted the data in the form, along with a reference or any information which the user needs to be made aware of.
+ {% from "wmcads/patterns/question/confirmation-message/_confirmation-message.njk" import wmcadsConfirmationMessage %}
+ {{
+ compExample([
+ wmcadsConfirmationMessage() | indent(4) | trim
+ ])
+ }}
+ {# End Confirmation Message #}
+
+{% endblock %}
diff --git a/src/www/pages/mc/patterns/search/index.njk b/src/www/pages/mc/patterns/search/index.njk
new file mode 100644
index 00000000..01d64df5
--- /dev/null
+++ b/src/www/pages/mc/patterns/search/index.njk
@@ -0,0 +1,147 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Search" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
What does it do?
+
+
Allows the user to search for information across the West Midlands Combined Authority website
+
+
When to use it?
+
+
When a user needs to find the information they need, which they cannot find through the main navigation
+
+
How it works
+
+
Users should only be able to access the search function through the header by hovering or selecting the magnifying glass icon
+
The search bar will appear in a dropdown along with the ‘I want to…’ feature, where users can access popular search queries
+
Once a user submits their search query, they will be able to view the search results. They can sort and filter the search results on the search results page
+
+
+
+ {# Search bar #}
+
Search bar
+ {% from "wmcads/patterns/search/search-bar/_search-bar.njk" import wmcadsSearchbar %}
+ {{
+ compExample([
+ wmcadsSearchbar()
+ ])
+ }}
+ {# End Search bar #}
+
+
+
+ {# Sort #}
+
Sort
+
What does it do?
+
+
+ This gives the user the option to sort search results by relevance or when a page was last updated
+
This gives the user the option to filter search results using a predetermined set of filters
+
+
When to use it?
+
+
The filters will narrow down the search results by displaying pages which only match the filter criteria
+
On mobile, the filter options will appear when a user clicks on the ‘Filter your results button’. This will trigger an overlay where users can select and apply filters. This is to reduce page size on smaller devices
This is how a matching page will display in the search results page
+
+
How it works
+
+
Each page result will show the page breadcrumbs on desktop. On mobile, breadcrumbs are not shown. This is to reduce page size on smaller devices
+
The page description will display main body copy which is highest on the page. The description will be a maximum of 150 characters. Any descriptions longer than 150 characters will be truncated.
+
If the user’s search query is in the page description, it will be highlighted in bold. This is to help them understand the context of the page
+
The horizontal rule at the bottom of a search result is to make the results list easier to scan.
+
+ {% from "wmcads/patterns/search/search-result/_search-result.njk" import wmcadsSearchResult %}
+ {{
+ compExample([
+ wmcadsSearchResult(
+ {
+ pageTitle: "Swift: The smarter way to travel",
+ breadcrumbs: ['Home', 'Swift'],
+ excerpt: "Swift is the easy and flexible way to travel around the West Midlands. find the swift card for you. How do you travel? bus…"
+ }
+ )
+ ])
+ }}
+ {# End search result #}
+
+ {# Pagination #}
+
Pagination links
+
What does it do?
+
+
Allows the user to navigate through search results.
+
+{% endblock %}
diff --git a/src/www/pages/mc/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js b/src/www/pages/mc/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js
new file mode 100644
index 00000000..8371607f
--- /dev/null
+++ b/src/www/pages/mc/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js
@@ -0,0 +1,71 @@
+function aToZContentStyleGuide() {
+ // FUNCTIONS
+ // Change accordion state
+ const changeAccordionState = (accordionElem, changeStateToOpen = true) => {
+ const accordionBtn = accordionElem.querySelector('.ds-accordion__summary-wrapper');
+ if (changeStateToOpen) {
+ accordionElem.classList.add('ds-is--open');
+ accordionBtn.setAttribute('aria-expanded', true);
+ } else {
+ accordionElem.classList.remove('ds-is--open');
+ accordionBtn.setAttribute('aria-expanded', false);
+ }
+ };
+
+ // Change all accordion states at once
+ const changeAllAccordionStates = changeStateToOpen => {
+ const accordions = document.querySelectorAll('main .ds-accordion');
+ accordions.forEach(accordion => changeAccordionState(accordion, changeStateToOpen));
+ };
+
+ // Scroll to an anchor within an accordion
+ const scrollToAnchor = idWithHash => {
+ // Check if element is on the page
+ const elem = document.querySelector(idWithHash);
+ if (!elem || elem.classList.contains('ds-accordion__summary-wrapper')) {
+ return;
+ }
+ // Open accordion and scroll to element
+ changeAccordionState(elem.parentElement.parentElement);
+ elem.scrollIntoView();
+ };
+
+ // Check for anchor to scroll to onload
+ const scrollToAnchorOnLoad = () => {
+ if (document.location.hash) {
+ scrollToAnchor(document.location.hash);
+ }
+ };
+
+ // Add event listener to all section links on the page
+ const setupScrollToAnchor = () => {
+ const anchors = document.querySelectorAll('main a[href^="#"]:not([href="#"])');
+ // Loop through an add event listener
+ anchors.forEach(anchor => {
+ anchor.addEventListener('click', e => {
+ e.preventDefault();
+ scrollToAnchor(anchor.hash);
+ });
+ });
+ };
+
+ // Set up controls
+ const setupAccordionControls = () => {
+ const controls = document.querySelectorAll('main .js-accordion-controls button');
+
+ controls.forEach(control => {
+ control.addEventListener('click', () => {
+ changeAllAccordionStates(control.classList.contains('js-accordion-controls-open'));
+ });
+ });
+ };
+
+ // CALL FUNCTIONS
+ if (document.querySelector('#atozofstyle')) {
+ scrollToAnchorOnLoad();
+ setupScrollToAnchor();
+ setupAccordionControls();
+ }
+}
+
+export default aToZContentStyleGuide;
diff --git a/src/www/pages/mc/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json b/src/www/pages/mc/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json
new file mode 100644
index 00000000..143a4f85
--- /dev/null
+++ b/src/www/pages/mc/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json
@@ -0,0 +1,538 @@
+{
+ "aToZOfStyles": [
+ {
+ "letter": "A",
+ "styles": [
+ {
+ "title": "Abbreviations and acronyms",
+ "content": "
The first time you use an abbreviation or acronym explain it in full on each page unless it's well known, like UK or BBC. Then refer to it by initials.
Do not use full stops in abbreviations: BBC, not B.B.C.
If you only use a term once, you don't need to include the abbreviation afterwards.
Use 'm' (for millions) and 'bn' (for billions) for sums of money and measurable quantities: £10bn; 1bn litres of water. However, spell out for people and countable nouns: 3 billion commuters; 10 billion tickets.
Use lower case for standard measurements: kg; km; lb; mph but use upper case for KB; GB; MB.
Exception: Spell out metres to prevent confusion with abbreviation for million.
Note:
Do not include a space between the number and the unit: 20km; 50kph; 100KB
Never add an 's' to measurements: 20km, not 20kms
Use lower case for ie and eg, but avoid using these terms altogether where possible. Use 'that is' or 'for example' instead.
Do not use hyphens in ages unless to avoid confusion, although it's always best to write in a way that avoids ambiguity. For example, 'a class of 15 16-year-old students took the A level course' can be written as '15 students aged 16 took the A level course'.
Write ages like this: XX years old (for example, 66 years old).
Exception - use hyphens when talking about age groups:
under-16s (n): under-16s
under 16 (adj): If you are under 16
over-60s (n): over-60s
over 60 (adj): If you are over 60
"
+ },
+ {
+ "title": "American and UK English",
+ "content": "
Use UK English spelling and grammar. For example, use 'organise' not 'organize', 'modelling' not 'modeling', and 'fill in a form', not 'fill out a form'.
American proper nouns, like 4th Mechanized Brigade or World Health Organization, take American English spelling.
"
+ },
+ {
+ "title": "Ampersand",
+ "content": "
Use and rather than &, unless it's a department's logo image or a company's name as it appears on the Companies House register.
You can use bullet points to make text easier to read. Make sure that:
you always use a lead-in line with a colon
the bullets make sense running on from the lead-in line
you use lower case at the start of the bullet
you do not use more than one sentence per bullet point - use commas or dashes to expand on an item
you do not put 'or' or 'and' after the bullets
you do not make the whole bullet a link if it's a long phrase
you do not put any punctuation at the end of a bullet
there is no full stop after the last bullet point
Bullets should normally form a complete sentence following from the lead text. But it's sometimes necessary to add a short phrase to clarify whether all or some of the points apply. For example, 'You can only register a pension scheme that is (one of the following):'
The number and type of examples in a list may lead the user to believe the list is exhaustive. This can be dealt with by
checking if there are other conditions (or if the list is actually complete)
listing the conditions which apply to the most users and removing the rest
consider broader terms in the list which capture more scenarios (and could make the list exhaustive)
Numbered steps
Use numbered steps instead of bullet points to guide a user through a process. List the things the user needs to do in order. You do not need a lead-in line. Steps end in a full stop because each should be a complete sentence.
If you have a scheme or campaign brand, explain the brand. Don't expect users to understand what you mean. If you say ‘be aware and share’ or ‘get your roll and stroll on’ out of context, it’s not clear what that means.
Don’t capitalise slogans like ‘be aware and share’. If you’re talking about a specific brand or campaign, use capitals. For example, Workwise, PassProtect. Don’t tell people to ‘Be Aware and Share’, but do say ‘the Be Aware and Share’ campaign.
For example:
'get half-price travel when you start a new job with the Workwise scheme'
'find your nearest cycle route on the Starley cycle network'
'hire a bike with West Midlands Cycle Hire'
'If you join the PassProtect scheme, you will get a discount if you need to replace your child's school travel pass.'
"
+ },
+ {
+ "title": "cash fare",
+ "content": "Do not use - it's confusing. Say 'ticket bought on the bus, train or tram on the day' instead."
+ },
+ {
+ "title": "Capitalisation",
+ "content": "
DO NOT USE BLOCK CAPITALS FOR LARGE AMOUNTS OF TEXT AS IT'S QUITE HARD TO READ.
Always use lower case, even in page titles. The exceptions to this are proper nouns.
You can use contractions to help make your text less formal.
Avoid negative contractions like can't and don't. Many users find them harder to read, or misread them as the opposite of what they say. Use cannot instead of can't; do not instead of don’t.
Avoid should've, could've, would've, they've too. These can also be hard to read.
Coronavirus is the virus which causes the illness COVID-19. Coronavirus is lower case.
"
+ },
+ {
+ "title": "council",
+ "content": "
Use lower case when writing about local councils in general. Use capitals for the official name of a local council, for example: Birmingham City Council.
do not use a comma between the month and year: 4 June 2017
when space is an issue - in tables or publication titles, for example - you can use truncated months: Jan, Feb
use 'to' in date ranges - not hyphens, en rules or em dashes. For example: tax year 2011 to 2012
Monday to Friday, 9am to 5pm (put different days on a new line, do not separate with a comma)
10 November to 21 December
do not use quarter for dates, use the months: 'Jan to Mar 2013'
when referring to today (as in a news article) include the date: 'The minister announced today (14 June 2012) that…'
Use 'to' instead of a dash or slash in date ranges. 'To' is quicker to read than a dash, and it's easier for screen readers.
Always explain what your date range represents, for example 'tax year 2013 to 2014' or 'September 2013 to July 2014'. Date ranges can be the academic year, calendar year or tax year. This is why date ranges must be very, very clear.
eg can sometimes be read aloud as 'egg' by screen reading software. Instead use 'for example' or 'such as' or 'like' or 'including' - whichever works best in the specific context.
etc can usually be avoided. Try using 'for example' or 'such as' or 'like' or 'including'. Never use etc at the end of a list starting with these words.
ie - used to clarify a sentence - is not always well understood. Try (re)writing sentences to avoid the need to use it. If that is not possible, use an alternative such as 'meaning' or 'that is'.
If you write content by starting with user needs, you will not need to use FAQs.
FAQs are discouraged because they:
duplicate other content on the site
cannot be front-loaded (putting the most important words people will search for), which makes usability difficult
mean that content is not where people expect to find it; it needs to be in context
can add to search results with duplicate, competing text
"
+ },
+ {
+ "title": "fine",
+ "content": "
Use 'fine' instead of 'financial penalty'.
For example, \"You'll pay a £50 fine.\""
+ },
+ {
+ "title": "first person",
+ "content": "
Use \"we'\" and \"us\" when addressing the user where possible. For example, instead of \"West Midlands Combined Authority has…\" say \"We have\" - it’s more personal.
Lower case unless it's a full title. For example: 'UK government', but 'Her Majesty's Government of the United Kingdom of Great Britain and Northern Ireland'.
Do not use a hyphen unless it's confusing without it, for example, a little used-car is different from a little-used car. You can also refer to The Guardian style guide for advice on hyphenation.
Front-load your link text with the relevant terms and make them active and specific. Do not use ‘click here’. Use text that describes the link instead.
"
+ },
+ {
+ "title": "Lists",
+ "content": "
Lists should be bulleted to make them easier to read. See bullets and steps.
Very long lists can be written as a paragraph with a lead-in sentence if it looks better: 'The following countries are in the EU: Spain, France, Italy...'
Use when talking about network bus tickets - always use a lower case ‘n’, upper case ‘B’.
"
+ },
+ {
+ "title": "nNetwork",
+ "content": "
Use when talking about network tickets for the bus, train and tram - always use a lower case ‘n’, followed by an upper case ‘N’.
"
+ },
+ {
+ "title": "nTrain",
+ "content": "
Use when talking about network train tickets - always use a lower case ‘n’, upper case ‘T’.
"
+ },
+ {
+ "title": "Numbers",
+ "content": "
Use 'one' unless you're talking about a step, a point in a list or another situation where using the numeral makes more sense: 'in point 1 of the design instructions', for example. Or this:
You'll be shown 14 clips that feature everyday road scenes.
There will be:
developing hazard in 13 clips
developing hazards in the other clip
Write all other numbers in numerals (including 2 to 9) except where it's part of a common expression like 'one or two of them' where numerals would look strange.
If a number starts a sentence, write it out in full (Thirty-four, for example) except where it starts a title or subheading.
For numerals over 999 - insert a comma for clarity: 9,000
Spell out common fractions like two-thirds.
Use a % sign for percentages: 50%.
Use a 0 where there's no digit before the decimal point.
Use '500 to 900' and not '500-900' (except in tables and for the 16-18 photocard).
Use MB for anything over 1MB: 4MB not 4096KB.
Use KB for anything under 1MB: 569KB not 0.55MB.
Keep it as accurate as possible and up to 2 decimal places: 4.03MB.
Addresses: use 'to' in address ranges: 49 to 53 Cherry Street.
Ordinal numbers
Spell out first to ninth. After that use 10th, 11th and so on.
Do not abbreviate the name. For example, do not use ‘WM Metro’, ‘NX West Midlands’ or ‘West Mids Railway’.
You can use an acronym for timetables and passenger information. For example, ‘West Midlands Metro (WMM)’, ‘National Express West Midlands (NXWM)’ or ‘West Midlands Railway (WMR)’.
Do not use the NXWM acronym without explaining it first. It is not a well known acronym.
"
+ },
+ {
+ "title": "or",
+ "content": "
Do not use slashes instead of \"or\". For example, do not say \"Do this 3/4 times\".
"
+ },
+ {
+ "title": "pay as you go",
+ "content": "
Do not hyphenate and always use lower case.
"
+ },
+ {
+ "title": "pay as you go credit",
+ "content": "
Use to describe Swift cards with a stored cash value
Note: Do not use 'pay as you go travel value (cash)' or 'pay as you go cash value'.
"
+ },
+ {
+ "title": "PDF",
+ "content": "Upper case. No need to explain the acronym."
+ },
+ {
+ "title": "plain English",
+ "content": "
Lower case plain and upper case English unless in a title: the Plain English Campaign.
All content should be written in plain English. You should also make sure you use language your audience will understand. Use the Plain English Campaign’s A to Z of alternative words to avoid complex language.
Phone numbers should be split into at least three groups of digits for readability, ideally with no more than four digits in any single group. For example: 020 7378 1705; 0343 222 6666; 0762 480 4299. See also the design pattern for contact details.
Use double quotation marks if using a quote within a quote.
If a quote runs on longer than one paragraph, include quotation marks at the beginning of each subsequent paragraph but only at the end of the final paragraph.
Place full stops and commas inside quotes when they are complete sentences, otherwise place them outside: 'I want to buy a ticket,' said Mr Smith; When he said 'I promise', he didn't really mean it.
use 'to' in time ranges, not hyphens, en rules or em dashes: 10am to 11am (not 10-11am) 5:30pm (not 1730hrs) midnight (not 00:00) midday (not 12 noon, noon or 12pm) 6 hours 30 minutes Midnight is the first minute of the day, not the last. You should consider using \"11:59pm\" to avoid confusion about a single, specific time.
For example, \"You must register by 11:59pm on Tuesday 14 June.\" can only be read one way, but \"You must register by midnight on Tuesday 14 June\" can be read in two ways (the end of Monday 13, or end of Tuesday 14).
Timetables and printed passenger information use the 24-hour clock in HHMM format.
"
+ },
+ {
+ "title": "tram",
+ "content": "
Not Metro.
"
+ },
+ {
+ "title": "tram stop",
+ "content": "
Not station.
"
+ },
+ {
+ "title": "Transport for West Midlands",
+ "content": "
Avoid referring to Transport for West Midlands (TfWM). Users don't need to know about it while getting travel advice.
Explaining the relationship between West Midlands Combined Authority, TfWM and West Midlands Combined Authority (WMCA) is complicated. Use \"we\" instead. For example, \"we manage the Key Route Network (KRN)\" with a link to the TfWM policy page.
Not \"zero-hour contract\" or \"zero hours contract\"
"
+ }
+ ]
+ }
+ ]
+}
diff --git a/src/www/pages/mc/styles/a-to-z-content-style-guide/index.njk b/src/www/pages/mc/styles/a-to-z-content-style-guide/index.njk
new file mode 100644
index 00000000..d1434b5c
--- /dev/null
+++ b/src/www/pages/mc/styles/a-to-z-content-style-guide/index.njk
@@ -0,0 +1,131 @@
+{% extends "www/_layouts/layout-fullwidth.njk" %}
+{% set pageTitle="A to Z content style guide" %} {% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{# Set array of tiles #}
+{% block content %}
+
+{# About the style guide #}
+
+
+
Writing content for West Midlands Combined Authority
+
+ You should create all content with user-focused content design principles. This means content has an identified
+ user need and is written in plain English.
+
+
+ Do not use marketing speak - users will be visiting your website to perform a task (for example, buy a train ticket or find out about Swift cards). Your content shouldn’t try to sell them anything - instead, tell them the information they need to know in the simplest way possible.
+
+
+ Research has shown that both high literacy and low literacy users prefer plain English because it takes less time to read. Users won’t be on your website for fun - so make the experience quick and easy.
+
+
+ To find out more about why plain language is important, read:
+
+
+ {{
+ wmcadsLink({
+ link: 'https://readabilityguidelines.co.uk/clear-language/',
+ linkTitle: 'advice about clear language',
+ contentText: 'advice about clear language'
+ })
+ }}
+ from the Readability Guidelines project
+
+
+ the
+ {{
+ wmcadsLink({
+ link: 'http://www.plainenglish.co.uk/the-a-z-of-alternative-words.html',
+ linkTitle: 'plain English Campaign’s A to Z of alternative words',
+ contentText: 'plain English Campaign’s A to Z of alternative words'
+ })
+ }}
+ - this helps you find a simple replacement for a complicated word
+
+
+
+
+ Read the
+ {{
+ wmcadsLink({
+ link: 'https://www.gov.uk/guidance/content-design/what-is-content-design',
+ linkTitle: 'GOV.UK introduction to content design',
+ contentText: 'GOV.UK introduction to content design'
+ })
+ }}
+ to find out more about content design principles.
+
+
Design Team can help you to test your content with user research.
+
+
About the A-Z of style guide
+
This style guide will help you to use consistent words across West Midlands Combined Authority services.
+
+ If something is not covered by this style guide, check the
+ {{
+ wmcadsLink({
+ link: 'https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style',
+ linkTitle: 'GOV.UK Style Guide',
+ contentText: 'GOV.UK style guide'
+ })
+ }}
+ . You can also email Samresha Purewal if you think something is missing from this guidance.
+
+
Introducing West Midlands Combined Authority
+
If you’re talking about day-to-day services (bus, train or tram), you
+ may need to make it clear that West Midlands Combined Authority does not run these.
For example, you could say: "We don’t run the buses, trains or trams. We can point you in the right direction if you need help."
+
Below are the list of West Midlands Combined Authority colour palettes.
+
+ We have tested our colours against the three most prevalent colour blind anomalies: protanopia, deuteranopia and tritanopia. While in some circumstances, particularly protanopia, colours can appear to be relatively similar.
+
+
+ These issues can be circumvented by not referring to specific colours. For instance, when referring to a green button with the word 'start' in, the phrase 'click the green button to start' would not be helpful. Instead, use 'click the start button', without a colour reference.
+
+
+ W3C AA Accessibility criteria requires the contrast of test to be enhanced, with a contrast ratio upwards of 3:1.
+
+
+ All brand/web colours meet this criteria, though the modal colour 'WM Railway' must only be used for iconography and graphical devices.
+
+
The background only colours can only be used as a background colour and they are not intended for any other use.
+
+
+{# Using in development #}
+
Using in development
+
wmcads SCSS
+
If you are using WMCA Design System's SCSS in development, you shouldn't use the HEX values! Instead you should always use the scss variables instead, for example use get-color(primary) instead of #3c1053. This ensures you are always using the most up-to-date colour. To find out more on how to use the get-color() function in SCSS, please refer to the notes for @function get-color() in _mixins.scss.
+
+
Without wmcads SCSS
+
If you are not using WMCA Design System's SCSS then it is recommended to use the hex values below. It is highly adviseable to set these up as variables in your development enviornment, this ensures that you can easily change them to keep up-to-date with our colour palettes.
+
If you'd like to see how we have set the variables up, you can check out $palettes in _vars.scss and @function get-color() in _mixins.scss.
+
+{# Brand colours #}
+
+
Brand colours
+
+ {% for color in colors.brand %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+
+{# Web colours #}
+
+
Web colours
+
+ {% for color in colors.web %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+
+{# Background Only colours #}
+
+
Background only colours
+
+ {% for color in colors.backgroundOnly %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+ Spacing can be applied in between .ds-col-* elements by adding a class to the parent .ds-grid.
+
+
+ The classes are named using the format .ds-grid--spacing-{col-count}-{size}.
+
+
+ Where {col-count} is the number of columns per row and {size} is the same as in the spacing utility classes above.
+
+
+ Spacing can also be applied responsively using the format .ds-grid--spacing-{breakpoint}-{col-count}-{size}.
+
+
+ Where {breakpoint} is one of breakpoint sizes described in the grid section.
+
+
+
When to use Grid column spacing
+
+
Use when you require more control over child item spacing
+
Use only when the number of child items do not change
+
+
+
Examples
+
+
Example 1
+
This example shows the use of the ds-content-card component displayed in a grid of thirds with spacing of 1rem.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+
Contact us
+
Get in touch if you want to know more about the budget.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+
Contact us
+
Get in touch if you want to know more about the budget.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
Example 2
+
This example shows the use of the ds-content-card component displayed in a half grid with spacing of 2rem.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
Example 3
+
This example shows the use of the ds-content-card component displayed in a half grid with spacing controlled by breakpoints.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
The default spacing is 0.75rem (ds-grid--spacing-2-sm). Once the page width goes over 768px the spacing changes to 1rem (ds-grid--spacing-md-2-md).
+
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/styles/examples/grid-examples.njk b/src/www/pages/mc/styles/examples/grid-examples.njk
new file mode 100644
index 00000000..52ec7236
--- /dev/null
+++ b/src/www/pages/mc/styles/examples/grid-examples.njk
@@ -0,0 +1,335 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Grid Examples" %}
+{% set section = "Styles" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
Introduction to wmcads Grids
+
Grid classes vs. unit classes
+
wmcads Grids consist of two types of classes: the grid class (ds-grid) and unit classes (ds-col-*)
+
The widths of the units are fractions
+
Units have various class names that represent their widths. For example, ds-u-1-2 has a width of 50%, whereas ds-u-1-5 would have a width of 20%.
+
All child elements of a grid must be units
+
Child elements contained within an element with a ds-grid classname must be a grid unit with a ds-col-* classname.
+
Content goes inside grid units
+
All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.
+
+
Examples
+
Let's start with a simple example. Here's a grid with three columns:
+
+
+
Thirds
+
Thirds
+
Thirds
+
+
+
+
+ {%- filter forceescape %}
+
+
Thirds
+
Thirds
+
Thirds
+
+ {%- endfilter %}
+
+
+
+
The above example will keep the columns the same width no matter the page width.
+
+
Adding responsive classes
+
We can control the width by adding responsive classes.
+
+
When using Responsive Grids, you can control how the grid behaves at specific breakpoints by adding class names. wmcads default responsive grids comes with the following class names and media query breakpoints.
+
+
+
Default Media Queries
+
+
+
Key
+
CSS Media Query
+
Applies
+
Classname
+
+
+
+
+
None
+
None
+
Always
+
.ds-col-*
+
+
+
sm
+
@media screen and (min-width: 35.5em)
+
≥ 568px
+
.ds-col-sm-*
+
+
+
md
+
@media screen and (min-width: 48em)
+
≥ 768px
+
.ds-col-md-*
+
+
+
lg
+
@media screen and (min-width: 64em)
+
≥ 1024px
+
.ds-col-lg-*
+
+
+
xl
+
@media screen and (min-width: 80em)
+
≥ 1280px
+
.ds-col-xl-*
+
+
+
+
+
Let's modify the example so the columns become full width on mobile:
+
+
+
Thirds
+
Thirds
+
Thirds
+
+
+
+
+ {%- filter forceescape %}
+
+
Thirds
+
Thirds
+
Thirds
+
+ {%- endfilter %}
+
+
+
+
The above example has a default width of 1 (ds-col-1) so when the page is viewed below 586px the columns will display full width. When the page is viewed over 586px the columns will appear in 3 coloumns (ds-col-sm-1-3).
+
+
+
Justify Content
+
+
You can justify the grid content bby adding these classes:
+
+
ds-grid--justify-between
+
Items will have space between them
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-around
+
Items will have space before, between, and after them
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-end
+
Items are positioned at the end of the container
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-center
+
Items are positioned in the center of the container
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-even
+
Items will have equal space around them
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/styles/icons/_icons.scss b/src/www/pages/mc/styles/icons/_icons.scss
new file mode 100644
index 00000000..d03435ca
--- /dev/null
+++ b/src/www/pages/mc/styles/icons/_icons.scss
@@ -0,0 +1,12 @@
+.website-icons {
+ svg {
+ width: 60px;
+ height: 60px;
+ padding: $size-sm;
+ fill: get-color(primary);
+ }
+
+ .text-center {
+ text-align: center;
+ }
+}
diff --git a/src/www/pages/mc/styles/icons/index.njk b/src/www/pages/mc/styles/icons/index.njk
new file mode 100644
index 00000000..76c42c7f
--- /dev/null
+++ b/src/www/pages/mc/styles/icons/index.njk
@@ -0,0 +1,188 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Icons" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{# The icon vars are an array that match the folders they come from in src/assets/icon/{foldername} #}
+{% set iconGeneral = [
+ "arrow",
+ "caret-down",
+ "caret-up",
+ "checkmark",
+ "chevron-right",
+ "circle-hollow",
+ "circle-solid",
+ "cross",
+ "expand",
+ "favourite",
+ "file",
+ "filter",
+ "id-card",
+ "info",
+ "location-arrow",
+ "minimise",
+ "paperclip",
+ "pdf",
+ "html",
+ "search",
+ "success",
+ "swap",
+ "trash",
+ "warning-circle",
+ "warning-triangle"
+] %}
+
+{% set iconSocial = [
+ "facebook",
+ "facebook-hex",
+ "twitter",
+ "twitter-hex",
+ "instagram",
+ "instagram-hex",
+ "linkedin",
+ "linkedin-hex",
+ "youtube",
+ "youtube-hex",
+ "email"
+] %}
+
+{% set iconPortfolio = [
+ "culture-and-digital",
+ "economy",
+ "environment",
+ "housing-and-land",
+ "inclusive-communities",
+ "skills",
+ "transport",
+ "wellbeing"
+] %}
+
+
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+
+{% block content %}
+{# How to use #}
+
About
+
+
What does it do?
+
+
+ Icons are images used in context to communicate a meaning (a visual representation of an object, action, or idea).
+
+
+
When to use it?
+
+
+ Only use icons and images if there’s a real user need.
+
+
+
When not to use it?
+
+
+ Do not use it for unnecessary decoration.
+
+
+
+
+{# Using Icons #}
+
Using icons
+
WMCA Design System icons are available as an SVG sprite to include in your HTML page.
+
How to use
+
Recommended
+
The Recommended method of using the icon sprite sheet is to refer directly to the one used in the design system. This ensures that your icons will always be up to date.
+
To get started, include the below snippet of javascript somewhere in your codebase. This will:
+
+
Pull the latest SVG icon spritesheet to be used within your web app or service
+
Will ensure the icons work with older browsers such as Internet Explorer 11
+
Keep the icon set consistent with other West Midlands Combined Authority Services
To display an icon or glyph, use an icon tag (from the icon section at the bottom of the page) with a href attribute and xlink:href (as a fallback). Make sure that the xlink and href tags are pointing to the location of your downloaded icon sprite sheet.
+
The ICON-TAG-NAME should be replaced with the icon tag name of the icon you want to show from the Icons section below, for example #ds-general-arrow should be in the xlink:href and href attributes of the svg's <use> element.
+
+{% endblock %}
diff --git a/src/www/pages/mc/styles/images/index.njk b/src/www/pages/mc/styles/images/index.njk
new file mode 100644
index 00000000..e9dea0aa
--- /dev/null
+++ b/src/www/pages/mc/styles/images/index.njk
@@ -0,0 +1,29 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Images" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
An image tells a story, communicates a complex idea or supports page content by providing further details.
+
+{# When to #}
+
When to use it?
+
+
When there is a clear user need.
+
When an image serves a clear functional purpose.
+
All images, except decorative, must have alt text that describes the content and function of the image. This tells users using screen readers what information the image provides.
+
+{# When not to #}
+
When not to use it?
+
+
When an image is an unnecessary decoration.
+
When an image would create visual noise, which detracts attention away from the page content. This can distract the user from completing their task.
+
+{% endblock %}
diff --git a/src/www/pages/mc/styles/index.njk b/src/www/pages/mc/styles/index.njk
new file mode 100644
index 00000000..9b5b722d
--- /dev/null
+++ b/src/www/pages/mc/styles/index.njk
@@ -0,0 +1,15 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Styles" %}
+{% set section = "Styles" %}
+{% set ds = 'mc' %}
+
+{% block content %}
+
Make your service look and feel like WMCA Design System.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples in the
+ Design System will not need any additional styling.
+
If you need to apply styles manually, you should still follow existing WMCA Design System conventions. For
+ example, do not assign
+ new meanings to colours, do not change the style of buttons or adjust the thickness of borders on
+ form inputs.
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/mc/styles/layout/index.njk b/src/www/pages/mc/styles/layout/index.njk
new file mode 100644
index 00000000..219dae2d
--- /dev/null
+++ b/src/www/pages/mc/styles/layout/index.njk
@@ -0,0 +1,84 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Layout" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+{# Standard content template #}
+
Standard content template
+{# What #}
+
What does it do?
+
+
A template is based on 2/3 column for content and a 1/3 column right-hand side for widgets to publish functional content.
+
Content editors will be able to use the design system components in Umbraco to structure content effectively and create visual hierarchy.
+
+{# When #}
+
When to use it?
+
+
When you need to publish functional content based on a clear user task.
+
When your content enables users to complete a specific task. For example, Get a refund, Update a Direct Debit, Find discount vouchers etc.
+
+{# When not to #}
+
When not to use it?
+
+
When you need to create a page for a marketing campaign and you need to use promotional images.
+
+{# Guidance #}
+
Guidance for content editors
+
+
Only use a header image when there is a clear user need for the image and it serves a purpose. For example, on a 'Travel by tram' page, you may want to use a header image of a tram so users unfamiliar with the West Midlands Combined Authority will instantly know what our trams look like throughout the region.
+
Use the Link component in your body content if you want to direct the user to additional content. Do not use buttons for any links. Do not use the same link twice as this confuses users.
+
Only use buttons in your body content when a user needs to complete an action as part of a process, or if a user is confirming their details e.g. newsletter sign-up.
+
+
Warning text with exclamation mark icon component: Please read the Creating effective content section below before writing content or placing content into your page.
+
+
+
+{# Publicity campaign template #}
+
Publicity campaign template
+{# What #}
+
What does it do?
+
+
A template based on a flexible grid provides content editors with an option to create a marketing campaign page.
+
Content editors will be able to use the design system components in Umbraco to structure content effectively and create visual hierarchy.
+
+{# When to #}
+
When to use it?
+
+
When you want to create a marketing campaign to promote and introduce a new service or a product.
+
+{# When not to #}
+
When not to use it?
+
+
When you need to publish functional content based on a clear user task. For example, Get a refund, Update a Direct Debit, Find discount vouchers etc. For this, you will need to use the Standard content template.
+
+{# Guidance #}
+
Guidance for content editors
+
+
Use a header image to draw attention and to increase the visual appeal of the page. Our User research found that 78% of users prefer pages with header images, with the most popular reason being that they make the page look more attractive. Remember to keep your header image relevant to your content.
+
If you are creating a hub page, use Content cards to direct users to the other pages. For marketing campaign pages, please use Content cards with images as this helps users to locate information faster. We recommend using a total of four content cards on one page. However, you can use up to six content cards on a page if absolutely necessary.
+
Restrict the body copy to a maximum of three paragraphs. The body copy introduces the page and should be brief and to the point. The main content your users require needs to be as higher up the page as possible, to reduce scrolling time.
+
Marketing campaign pages should be user tested prior to going live. This is to identify if users can locate the content that they need. Generating heatmaps through Hotjar will help track how the pages are used.
+
+
+
+
+{# Creating effective content #}
+
Creating effective content
+
There is no minimum or maximum page length, however:
Always place content with higher importance at the top of the page, with less important content following after.
+
If you have to use long content, break it down into smaller sections to make it easier for user to understand information. You can:
+
+
Use Content cards for important content which you want to draw attention to. You can use a maximum of six content cards on a page. Do not use more than six because user research shows that users prefer less information, especially on the mobile. Our user research showed that content tiles with images help users locate relevant content faster.
+
Use the Accordion component to organise and group related information at the bottom of the page, below body copy and content tiles. Accordions can shorten pages and reduce scrolling when your content does not need to be read in full. We also recommend using accordions when space is at a premium and you are placing long content on a mobile interface or in a side panel.
Place the In-line navigation component on the left side of a desktop page so users can skip to the relevant section without scrolling. This is especially useful for users on mobile, as the page content component will be placed after the page title.
+ When creating a map use the
+ {{
+ wmcadsLink({
+ link: "https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e",
+ linkTitle: "WMCA Basemap",
+ linkTarget: "_blank",
+ contentText: "WMCA Basemap"
+ })
+ }} as your basemap layer. This is to ensure maps are consistent across West Midlands Combined Authority services.
+
+
The WMCA Basemap is a portal item, you can use the
+{{
+ wmcadsLink({
+ link: "https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html",
+ linkTitle: "ArcGIS Basemap documentation",
+ linkTarget: "_blank",
+ contentText: "ArcGIS Basemap documentation"
+ })
+ }} with the WMCA Basemap ID to include the basemap in your application.
+
+
+{# Example of code #}
+
Example of the ESRI ArcGIS JavaScript API
+
+
+ // ESRI ArcGIS JS code...
+ const basemap = new Basemap({
+ baseLayers: [
+ new VectorTileLayer({
+ portalItem: {
+ // set the baselayer to WMCA Basemap:
+ // https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e
+ id: '53f165a8863c4d40ba017042e248355e',
+ },
+ }),
+ ],
+ });
+
+ // Create a new map with the basemap set above
+ const map = new Map({
+ basemap,
+ });
+
+
+
+{# Can't use Esri ArcGIS #}
+
Can't use ESRI ArcGIS?
+
+ We understand that you may not always be able to use
+ {{
+ wmcadsLink({
+ link: "https://developers.arcgis.com/documentation/core-concepts/apis-sdks-apps/#choosing-an-arcgis-api-or-sdk",
+ linkTitle: "ArcGIS APIs and SDKs",
+ linkTarget: "_blank",
+ contentText: "ArcGIS APIs and SDKs"
+ })
+ }}.
+ In these situations, style your map as closely to the
+ {{
+ wmcadsLink({
+ link: "https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e",
+ linkTitle: "WMCA Basemap",
+ linkTarget: "_blank",
+ contentText: "WMCA Basemap"
+ })
+ }} as possible.
+
+
+
+
+{# User interface #}
+
User interface
+
+ User interface elements on a map such as zoom, pan and location buttons follow particular pattern rules when being used.
+
+
These pattern rules are:
+
+
Accessible for screen readers and keyboard navigation
+
User interface buttons must have 35px height and 35px width
+
User interface buttons must display in the top right of the map
+
The border radius must be 5px (slight curve on the corners)
+
The icon colour must be white
+
+ The background/fill colour of the buttons must use the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Information colour",
+ linkTarget: "_blank",
+ contentText: "Information colour"
+ })
+ }}
+
+
+ If it is the location button, the background/fill colour must be transparent and the border/icon colour must use the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Primary Purple colour",
+ linkTarget: "_blank",
+ contentText: "Primary Purple colour"
+ })
+ }}
+
+
+
+
+ When hovered, the background/fill colour must be 30% darker (mixed with black) of the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Information colour",
+ linkTarget: "_blank",
+ contentText: "Information colour"
+ })
+ }}
+ (#5c236d)
+
+
+ If it is the location button, the background/fill colour must be 70% lighter (mixed with white) of the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Secondary Purple colour",
+ linkTarget: "_blank",
+ contentText: "Secondary Purple colour"
+ })
+ }}
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/src/www/pages/mc/styles/typography/index.njk b/src/www/pages/mc/styles/typography/index.njk
new file mode 100644
index 00000000..ca9dff7e
--- /dev/null
+++ b/src/www/pages/mc/styles/typography/index.njk
@@ -0,0 +1,75 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Typography" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+{# About #}
+
About
+
+ We have tested our typography with users, including those with dyslexia and those with low vision. The questionnaire presented respondents with two body fonts, set out in different sizes, line spacing and kerning. The options were shown randomly for each participant.
+
+ Our findings were as such:
+
+
55.2% of respondents found Noto Sans easiest to read, with a further 24.1% of respondents having no preference
+
69% of respondents found a larger font size easiest to read, with a further 5.2% having no preference
+
55.2% of respondents preferred increased line spacing, with a further 12.1% having no preference
+
+
+
+ As a public sector organisation, in addition to testing the above we are required to meet WCAG 2.1 guidelines at AA standard.
+ Therefore, features will be useable when text size is increased up to 200% and content reflowed for 400%.
+
+
+{# Fonts #}
+
Fonts
+
+ We utilise Google Fonts in our typography and all fonts used are pre-bundled in our design system CSS, so you won't need to include them seperately.
+
+
+ Find below, various examples of our typography in use.
+
+
+{# DM Sans / Headings #}
+
DM Sans / headings
+
+ The font DM Sans is used with font weight of 700 (bold) for heading elements only.
+ DM Sans font reference
+
+
Things to note:
+
+
+ On mobile devices (less than 768px wide), the H1 and H2 elements are reduced in size by 15%.
+
+
+
+
46px - Heading 1
+
32px - Heading 2
+
23px - Heading 3
+
18px - Heading 4
+
+
+{# Noto sans / body copy #}
+
Noto Sans / body copy
+
+ The font Noto Sans is used with the font weight of 400 (regular) and 700 (bold) for all elements other than headings. The default font size used is 16px.
+ Noto Sans font reference
+
+
+{% endblock %}
diff --git a/src/www/pages/mc/styles/utility-classes/index.njk b/src/www/pages/mc/styles/utility-classes/index.njk
new file mode 100644
index 00000000..ffe19480
--- /dev/null
+++ b/src/www/pages/mc/styles/utility-classes/index.njk
@@ -0,0 +1,276 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Utility classes" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+
+{% block content %}
+{# About #}
+
About
+
+ There are a variety of utility classes that can be used with the existing components and styles on.
+
+
+
+
+{# Containers #}
+
Containers
+
+ Containers are used to wrap content in a 'container'. The container will have a fixed max size and be centered on the page, it will adjust to 100% width when the page width is less than the container size.
+
+
+
+
+ .ds-container /* Container with max-width of 1280px */
+
+ /* This should be used on your main content section and will
+ add a margin top to seperate from header/breadcrumb section */
+ .ds-container.ds-container--main
+
+
+
+
+
+{# Grid #}
+
Grid
+
+ The WMCA Design System uses its own custom syntax grid system adopted from Pure CSS Grid. The grid system is already included in the bundled ds-components.min.css file so you don't need to include it seperately.
+
+
+
+ You can Refer to the Pure CSS Grid documentation for reference on how to use our grid system, but bear in mind that:
+
+
+
.pure-g becomes .ds-grid in our design system
+
.pure-u-* becomes .ds-col-* in our design system
+
+
+
+
You can also use modifier classes on the same element where the class .ds-grid is being used.
+ When you want to hide an element based on if the device width is a desktop or mobile device.
+
+
+
+
+ .ds-hide-mobile /* Hide only on mobile devices or smaller (less than 48em) */
+ .ds-hide-desktop /* Hide only on desktop devices or larger (greater than 48em) */
+ .ds-hide /* Hide on all devices */
+
+
+
+
+
Spacing
+
+ The spacing utility classes are used to adjust whitespace for an element via padding and margins.
+
+
Before using the spacing utility classes, please consider:
+
+
Most components already come with defined spacing. This spacing shouldn't be overwritten.
+
Spacing should be used as a last resort to help layout components on a page.
+
You can use none as a size to enforce zero margin or padding.
+
+
+
+ The classes are named using the format .ds-{type}-{side}-{size}.
+
+{# type #}
+
+ Where {type} is one of:
+
+
+
+ m - for classes that set margin
+
+
+ p - for classes that set padding
+
+
+{# side #}
+
+ Where {side} is one of:
+
+
+
+ t - for classes that set margin-top or padding-top
+
+
+ r - for classes that set margin-right or padding-right
+
+
+ b - for classes that set margin-bottom or padding-bottom
+
+
+ l - for classes that set margin-left or padding-left
+
+
+ blank - for classes that set a margin or padding on all 4 sides of the element
+
+
+{# size #}
+
+Where {size} is one of:
+
+
+
+ xs - set size to 0.25rem
+
+
+ xsm - set size to 0.5rem
+
+
+ sm - set size to 0.75rem
+
+
+ md - set size to 1rem
+
+
+ lg - set size to 2rem
+
+
+ xl - set size to 3rem
+
+
+
+
Some examples of using these utility classes...
+
+
+ .ds-m-xs // applies a margin of 0.25rem to all sides
+ .ds-p-b-lg // applies a padding-bottom of 2rem
+ .ds-m-l-none // sets left margin to 0
+
+
+
+{# Grid columns spacing #}
+
Grid column spacing
+
+
+ Spacing can be applied in between .ds-col-* elements by adding a class to the parent .ds-grid.
+
+
+ The classes are named using the format .ds-grid--spacing-{col-count}-{size}.
+
+
+ Where {col-count} is the number of columns per row and {size} is the same as in the spacing utility classes above.
+
+
+ Spacing can also be applied responsively using the format .ds-grid--spacing-{breakpoint}-{col-count}-{size}.
+
+
+ Where {breakpoint} is one of breakpoint sizes described in the grid section.
+
+
+
Some examples of using these utility classes...
+
+
+ .ds-grid--spacing-2-md // applies a 1rem spacing between 2 columns
+ .ds-grid--spacing-lg-4-lg // applies a 2rem spacing between 4 columns above a screen width of 1024px
+
+
Patterns are reusable parts of the user interface that have been made to support a variety of
- applications.
-
-
Individual patterns can be used in multiple different patterns and contexts. For example, the
- text input component
- can be used to ask for an email address, a National Insurance number or someone’s name.
-
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
- coded examples provided
- will render exactly as they do inside the Design System.
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Patterns" %}
+{% set section = "Patterns" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+
Patterns are reusable parts of the user interface that have been made to support a variety of
+ applications.
+
+
Individual patterns can be used in multiple different patterns and contexts. For example, the
+ text input component
+ can be used to ask for an email address, a National Insurance number or someone’s name.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples provided
+ will render exactly as they do inside the Design System.
{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/components/accordion/index.njk b/src/www/pages/st/components/accordion/index.njk
new file mode 100644
index 00000000..891726e8
--- /dev/null
+++ b/src/www/pages/st/components/accordion/index.njk
@@ -0,0 +1,13 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Accordion" %}
+{% set ds = 'st' %}
+
+{% block content %}
+
+{% from "www/pages/shared/components/accordion/index.njk" import dsAccordionContent %}
+
+{{
+ dsAccordionContent({})
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/components/breadcrumb/index.njk b/src/www/pages/st/components/breadcrumb/index.njk
new file mode 100644
index 00000000..de32b727
--- /dev/null
+++ b/src/www/pages/st/components/breadcrumb/index.njk
@@ -0,0 +1,13 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Breadcrumb" %}
+{% set ds = 'st' %}
+
+{% block content %}
+
+{% from "www/pages/shared/components/breadcrumb/index.njk" import dsBreadcrumbContent %}
+
+{{
+ dsBreadcrumbContent({})
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/components/buttons/index.njk b/src/www/pages/st/components/buttons/index.njk
new file mode 100644
index 00000000..101c8372
--- /dev/null
+++ b/src/www/pages/st/components/buttons/index.njk
@@ -0,0 +1,13 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Buttons" %}
+{% set ds = 'st' %}
+
+{% block content %}
+
+{% from "www/pages/shared/components/buttons/index.njk" import dsButtonsContent %}
+
+{{
+ dsButtonsContent({})
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/components/content-card/index.njk b/src/www/pages/st/components/content-card/index.njk
new file mode 100644
index 00000000..7573cd65
--- /dev/null
+++ b/src/www/pages/st/components/content-card/index.njk
@@ -0,0 +1,137 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Content card" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{# Imports #}
+{% from "wmcads/components/content-card/_content-card.njk" import wmcadsContentCard %}
+{% set ds = 'st' %}
+
+{% block content %}
+{# About #}
+
About
+
Content cards contain components and text. Against the page background, they help to draw the users attention to important information and help users to navigate content.
+
The cards have many common use cases and applications, all of which can be found on the content cards pattern page.
+
+
+
+{# Content card #}
+
Content card
+{# What #}
+
What is it?
+
+
A container with a white background and purple underline.
+
Any components and text can be used within a card.
+
+{# When not to #}
+
When not to use it?
+
+
When it is used in a set of cards for navigation purposes. Instead, use a Navigation card.
+{# Medium - Narrow #}
+{% from "wmcads/components/disruption-indicator/medium/_medium.njk" import wmcadsDisruptionIndicatorMedium as wmcadsDisruptionIndicatorNarrow %}
+
Medium - Narrow
+{# What #}
+
What does it do?
+
+
Shows the route number
+
Shows the modal icon
+
Shows the disruption severity with the background
+
+{# When #}
+
When to use it?
+
+
When showing a specific bus route's disruption status
+
Example: homepage travel updates widget or major roadworks sidebar
Shows the disruption severity with the background colour, icon and text
+
+{# When #}
+
When to use it?
+
+
Showing a specific train, tram or road's disruption status
+
Example: homepage travel updates widget or major roadworks sidebar
+
+{# Research #}
+
Research
+
+
During user testing for the home page travel update widget, users preferred having a text description of the mode in addition to the modal icons, as the train and tram brand icons are very similar when small
Sometimes it makes sense to group a few questions on the same page
+
Make sure users know why you're asking the question and only ask users for information you really need
+
Add (optional) to the end of each question that is optional
+
+ {% from "wmcads/components/form-elements/question/_question.njk" import wmcadsQuestion %}
+ {{
+ compExample([wmcadsQuestion()])
+ }}
+ {# End question #}
+
+
+ {# Progress Indicator #}
+
Progress Indicator
+
What does it do?
+
+
It is visual representation of progress through a set of steps that guides user in order to complete a specified process. Knowing where the user is in their progress can help improve their orientation within the system. It sets expectations and gives and impression of activity and progress.
+
+
When to use it?
+
+
When you want to tell users where they are in the process.
+
When you want to reassure users that the system is working and reduce user’s uncertainty.
+
+
When not to use it?
+
+
When progress cannot be measured and therefore does not have a percentage that indicates the amount of progress.
Navigation expands when user hovers or clicks on it revealing options to select.
+
+
When to use it?
+
+
When there is limited space and you need to reduce the space taken on the page
+
When an input is nonessential, e.g. sorting list
+
When you need flexibility because you do not know how many options there will be. All options are contained within the drop down component.
+
+
When not to use it?
+
+
Drop down creates more work for your user because it is a multi-step process, they hide available options and they slow users down by defaults therefore if possible use another component to display options e.g. radio buttons, text field, input selector
+
Do not use when drop down option has more than 36 characters because users will not be able to read them on some mobile devices
+
+ {% from "wmcads/components/form-elements/dropdown/_dropdown.njk" import wmcadsDropdown %}
+ {{
+ compExample([wmcadsDropdown()])
+ }}
+ {# End Dropdown #}
+
+
+ {# Input #}
+
Text Input / Text Field
+
What does it do?
+
+
Allows users to enter text.
+
+
When to use it?
+
+
When user needs to enter short amount of text, e.g. name, email.
+
+
When not to use it?
+
+
When user needs to add a lot of text that might go over multiple lines
+
Use fixed width inputs for content that has known length, e.g. postcode.
Allows users to write whatever they like, also called free text.
+
+
+ When to use it?
+
+
+
When the user needs to enter lots of text. For example, a paragraph.
+
+
+ When not to use it?
+
+
+
When the user needs to enter one line of text. Use the input component instead.
+
Use fixed-width inputs for content that has a known length, e.g. postcode.
+
When there are limited options. Use a different form element that limits the options.
+
+ {% from "wmcads/components/form-elements/textarea/_textarea.njk" import wmcadsTextarea %}
+ {{
+ compExample([wmcadsTextarea()])
+ }}
+ {# End Textarea #}
+
+
+ {# Date input #}
+ {% from "wmcads/components/form-elements/date-input/_date-input.njk" import wmcadsDateInput %}
+
Date Input
+
What does it do?
+
+
Help users enter a memorable date or one they can easily look up.
+
+
When to use it?
+
+
Use the date input component when you’re asking users for a date they’ll already know, or can look up without using a calendar.
+
+
When not to use it?
+
+
Do not use the date input component if users are unlikely to know the exact date of the event you’re asking about.
+
+ {{
+ wmcadsInsetText ({
+ contentHTML: "If you are looking for how to format the date within content i.e. \"4 June 2017\", check the dates section within the A to Z content style guide."
+ })
+ }}
+
+ {{
+ compExample([
+ wmcadsDateInput({
+
+ })
+ ])
+ }}
+{# End Date input #}
+
+
+
+ {# Handling error #}
+
Handling errors
+
What does it do?
+
+
Lets the user know what is wrong with their answer.
+
Tells the user how to correct their answer.
+
Tells the user what format or characters it is expecting.
+
Prevents the user from trying to submit information that will be rejected by the API.
+
+
+ When to use it?
+
+
+
A handling error is used in addition to an error summary, which shows all errors on a page.
+
When there has been an error with validating the user's answer after they try to continue to the next step.
+
When the error is a validation error that is fixable.
+
Use a separate error for each group of answer fields. For example, one error for date fields.
+
The corrective action should be read by a screen reader before data entry components.
+
+
+ When not to use it?
+
+
+
Do not show the error until the user tries to move to the next step. Immediate validation can distract a user from progressing, especially if it validates as the user is typing.
+
Hint text should help the user to understand how the field will be validated.
+
If the service is down the user should be shown a service unavailable page.
+
+
+ How to use it
+
+
+
Make sure questions and help text are well designed and tested with users to avoid errors in the first place.
+ Show a series of steps in an order within a piece of content
+
+
+
+ When to use it?
+
+
+
+ When there are multiple steps to a process
+
+
+ When you are explaining this within a piece of content
+
+
+
+ When not to use it?
+
+
+
Numbered (ordered) lists are better to show a list
+
+ When you are not displaying a process
+
+
+ {% from "wmcads/components/in-text-step/_in-text-step.njk" import wmcadsInTextStep %}
+ {{
+ compExample([wmcadsInTextStep({
+ steps: [
+ "Step text must end with a full stop.",
+ "Step text must end with a full stop.",
+ "Step text must end with a full stop."
+ ]
+ })])
+ }}
+
+ {# End label #}
+
+{% endblock %}
diff --git a/src/www/pages/st/components/inclusive-growth-doughnut/index.njk b/src/www/pages/st/components/inclusive-growth-doughnut/index.njk
new file mode 100644
index 00000000..50d4b130
--- /dev/null
+++ b/src/www/pages/st/components/inclusive-growth-doughnut/index.njk
@@ -0,0 +1,13 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Incusive Growth Doughnut" %}
+{% from "wmcads/components/inclusive-growth-doughnut/_inclusive-growth-doughnut.njk" import wmcadsIncusiveGrowthDoughnut %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% set ds = 'st' %}
+
+{% block content %}
+{{
+ compExample([
+ wmcadsIncusiveGrowthDoughnut()
+ ])
+}}
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/components/index.njk b/src/www/pages/st/components/index.njk
new file mode 100644
index 00000000..5a52ba0e
--- /dev/null
+++ b/src/www/pages/st/components/index.njk
@@ -0,0 +1,13 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Components" %}
+{% set ds = 'st' %}
+
+{% block content %}
+
Components are reusable parts of the user interface that have been made to support a variety of
+ applications.
+
+
Individual components can be used in multiple different patterns and contexts. For example, the
+ text input component can be used to ask for an email address, a National Insurance number or someone’s name.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples provided will render exactly as they do inside the Design System.
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/components/inset-text/index.njk b/src/www/pages/st/components/inset-text/index.njk
new file mode 100644
index 00000000..0c2c9987
--- /dev/null
+++ b/src/www/pages/st/components/inset-text/index.njk
@@ -0,0 +1,104 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Inset Text" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% set ds = 'st' %}
+
+{% block content %}
+{# About #}
+
Inset Text
+
What does it do?
+
+
+ Allows users to identify important content on the page as they scan the page.
+
+
+
+
When to use it?
+
+
+ When you have content that needs to standout from what's around it, such as a quote, example or additional information.
+
+
+
+
When not to use it?
+
+
+ In close proximity to visually prominent elements. Users don't notice it.
+
+
+ To highlight important information that is key to the transaction/service or time critical. Use Warning Text instead.
+
+
+
+
How to use it?
+
+
+ Use inset text sparingly. They're less effective if overused.
+
+
+ Users with visual disabilities may not be able to see the colour that helps it stand out. Instead, they may rely on a hidden label to recognise it. Hide Information: inside the Inset Text div so that users with screen readers understand this information is different to body text.
+
+
+
+ {% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+ {{
+ compExample([
+ wmcadsInsetText({
+ html: "Example of inset text"
+ })
+ ])
+ }}
+ {# End inset text #}
+
+
+
+ {# Question #}
+
Example Callout
+
+
What does it do?
+
+
+ Highlight a contextual example to provide help users understand the broader page content.
+
+
+
+
When to use it?
+
+
+ When a contextual example might help the user understand the information.
+
+
+
+
When not to use it?
+
+
+ When the information is simple enough for our user's to understand. Don't give an example for the sake of it.
+
+
+
+
How to use it?
+
+
+ Use a concise heading that a user can easily scan and understand.
+
+
+ Make sure the heading is relevant to both the content it's supporting and the context it is providing in the main body text.
+
+
+ Add an aria-label to the parent Example Callout div so that users with screen readers understand that the information is important.
+
+
+
+
+ {% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+ {{
+ compExample([
+ wmcadsInsetText({
+ html: "Example Callout title Example callout description.",
+ label: "Example Callout"
+ })
+ ])
+ }}
+ {# End inset text #}
+
+{% endblock %}
diff --git a/src/www/pages/st/components/links/index.njk b/src/www/pages/st/components/links/index.njk
new file mode 100644
index 00000000..a790cc46
--- /dev/null
+++ b/src/www/pages/st/components/links/index.njk
@@ -0,0 +1,354 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Links" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% set ds = 'st' %}
+
+{% block content %}
+{# About #}
+
About
+
+ Buttons and links are items used to perform an action on a
+ page
+
+
+ It's important to know when to use a link or a
+ button
+
+
+ Links should be used when a users action won’t affect the website at all,
+ examples of these
+ are:
+
+
+
Certain call to actions
+
Links to internal or external pages
+
+
+
What do the link attritubes mean?
+
The href attritube is used to define the link address
+
The target attritube is used to define where to open the linked document.
+ See below to find
+ out more about the target attritube
+
The title attritube is used to define additional information about the
+ link. It's useful for
+ your users and accessibility. Try not to duplicate your link text- this hurts usability as
+ hard of sight users
+ using screen readers will here the same text twice.
+
+
Target attritube values:
+
+
_blank: Will load clicked link in a new window
+
_self: Will load clicked link in the same frame as it was clicked in
+
+
_parent: Will load clicked link in the parent frameset
+
_top: Will load clicked link in the full body of the window
+
framename: Will load clicked link in a named frame
+
+
+
+
+
+{# Default link #}
+
Default link
+{# What #}
+
What does it do?
+
+
Highlight that the word or phrase is different from other body text
+ Helps users to understand they need to wait for something to finish happening
+
+
+ Continues to play the animation until the action is complete
+
+
+{# When #}
+
When to use it?
+
+
+ When you are calling an API
+
+
+ In there area of the page that the action is occurring
+
+
+ Example: within a search box
+
+
+{# When not #}
+
When not to use it?
+
+
+ A service should not go live if there is a whole-page loading spinner
+
+
+ Try to avoid using a loading spinner, our services should respond quickly
+
+
+ If an action takes a long time, users will lose trust in the service
+
+
+
+
+ By default you should aim to use the 'normal sized loader'.
+ Only when the normal sized loader is not fit for purpose should you use the large or small sized loader.
+
+
+
Change the text within .ds-loader__content from 'Content is loading...' to something that describes what it is you are loading, this will help with accessibility.
+ Gives user feedback during the interaction with a website (informs about error, warning, success). Messages are
+ colour coded and use symbols to reinforce the message. The structure of the message: what happened? what does it
+ mean? what can user do about it?)
+
+
+
+
When to use it?
+
+
+ When user needs explicit indication that something has gone wrong (user error or website/app error)
+
+
+ When user is about to do something that is destructive or when the result of an action is unexpected but it is not
+ an error (Warning Message)
+
+
+ When user needs confirmation of success (Success message)
+
+
+ When user needs key information about upcoming change (Information message).
+
+
+ Real time inline validation to inform users about the correctness of provided data.
+
+
+
+
+{# Info message #}
+
Information
+{{
+ compExample([
+ wmcadsMsgSummary({
+ type: 'info',
+ title: 'Information about XXXXXXXXX was successfully updated!',
+ message: 'Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.'
+ })
+ ])
+}}
+{# End info message #}
+
+
+{{
+ compExample([
+ wmcadsPageHeader({
+ title: true,
+ text: "Building a healthier, happier, better connected and more prosperous West Midlands",
+ home: true
+ })
+ ])
+}}
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/components/phase-indicator/index.njk b/src/www/pages/st/components/phase-indicator/index.njk
new file mode 100644
index 00000000..710fadbc
--- /dev/null
+++ b/src/www/pages/st/components/phase-indicator/index.njk
@@ -0,0 +1,40 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Phase indicators" %}
+{% set ds = 'st' %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
+ Helps users to identify when a service is in a development phase
+
+
+
+{# When #}
+
When to use it?
+
+
+ Every service that has not passed its public beta service assessment must have a phase indicator
+
+ Within the header pattern
+
+
+ Within the phase banner pattern
+
+
+
+
+ A service can either be in Alpha (prototype stage) or Beta (when it is on a publicly accessible website).
+
+
+ {% from "wmcads/components/phase-indicator/_phase-indicator.njk" import wmcadsPhaseIndicator %}
+ {% from "wmcads/components/phase-indicator/_phase-indicator-link.njk" import wmcadsPhaseIndicatorLink %}
+ {% from "www/_partials/component-example/component-example.njk" import compExample %}
+ {{
+ compExample([wmcadsPhaseIndicator()])
+
+ }}
+{% endblock %}
diff --git a/src/www/pages/st/components/portfolio-leads/index.njk b/src/www/pages/st/components/portfolio-leads/index.njk
new file mode 100644
index 00000000..23493ca1
--- /dev/null
+++ b/src/www/pages/st/components/portfolio-leads/index.njk
@@ -0,0 +1,13 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Portfolio leads" %}
+{% from "wmcads/components/portfolio-leads/_portfolio-leads.njk" import wmcadsPortfolioLeads %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% set ds = 'st' %}
+
+{% block content %}
+{{
+ compExample([
+ wmcadsPortfolioLeads()
+ ])
+}}
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/components/share/index.njk b/src/www/pages/st/components/share/index.njk
new file mode 100644
index 00000000..a753c8bb
--- /dev/null
+++ b/src/www/pages/st/components/share/index.njk
@@ -0,0 +1,13 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Share" %}
+{% from "wmcads/components/share/_share.njk" import wmcadsShare %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% set ds = 'st' %}
+
+{% block content %}
+{{
+ compExample([
+ wmcadsShare()
+ ])
+}}
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/components/table/index.njk b/src/www/pages/st/components/table/index.njk
new file mode 100644
index 00000000..91d3d6df
--- /dev/null
+++ b/src/www/pages/st/components/table/index.njk
@@ -0,0 +1,80 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Table" %}
+{% from "wmcads/components/table/_table.njk" import wmcadsTable %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% set ds = 'st' %}
+
+{% block content %}
+{# About #}
+
About
+
What does it do?
+
+
+ A table is used to make information easier for users to compare and scan
+
+
+
+ When to use it?
+
+
+
+ Use the table component to let users compare information in rows and columns.
+
+
+
+ When not to use it?
+
+
+
+ Never use the table component to layout content on a page. Instead, use the grid system.
+
+
+
+ How it works
+
+
+
+ You need to create a heading (title) for the table using <caption> tags. A caption helps users find, navigate and understand tables.
+
+
+ Use table headers to tell users what the rows and columns represent. Use the scope attribute to help users of assistive technology distinguish between row and column headers.
+
+
+ When comparing columns of numbers, align the numbers to the right in table cells.
+
+
+ If you are trying to display lots of columns, contact Design Team to discuss how best to achieve this.
+
",
smallTitle: true,
readMore: true,
- link: '/templates/',
+ link: '/st/templates/',
linkText: 'Read more about templates',
linkTitle: 'Templates'
})
diff --git a/src/www/pages/st/patterns/autocomplete/index.njk b/src/www/pages/st/patterns/autocomplete/index.njk
new file mode 100644
index 00000000..4bb89301
--- /dev/null
+++ b/src/www/pages/st/patterns/autocomplete/index.njk
@@ -0,0 +1,135 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Autocomplete" %}
+{% set section="Patterns" %}
+{% set ds = 'st' %}
+
+{# Imports #}
+{% from "wmcads/patterns/autocomplete/_autocomplete.njk" import wmcadsAutocomplete %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+ The autocomplete component is an input field that offers the user text suggestions as they type.
+ This is often done by hitting an API endpoint with the users query when the user has finished typing.
+
+
+ The autocomplete pattern is a combination of the input and loader components.
+
+{# When #}
+
When to use it?
+
+
As a progressive enhancement to make a users journey shorter/easier when searching
+
When you have a smaller data set/list that is quick to query
+
When you want to ensure the user submits a relevant query/value
+
+{# When not #}
+
When not to use it?
+
+
When you have a massive set of data, instead you should have an input/search that shows results after submission.
+
Don't use this component as if it is a search box. Autocomplete is to suggest a value to a user via it's results not act as a results page for a search.
+
+
+
+{# Default #}
+
Default state
+
In its default state, the autcomplete component is made up of a text input with a search icon.
+
For best practice, ensure that the placeholder and aria-label describes what the autocompletes intended purpose is.
+
Notice that there is also a ds-loader component nested within the autocomplete, more on that in the next section.
+ When a user types in a query, you may want to have some code that hits an API or gets the data/suggestions for the autocomplete from somewhere. To help users understand that they need to wait for something we can change the autocomplete to a loading state.
+ We do this by adding the class ds--is-loading to the top level of the autocomplete (this is the only difference between the loading state and default state code snippets).
+
+
As mentioned in the previous section, there is a ds-loader component nested in the autocomplete. When adding the ds--is-loading class, it will hide the search icon and show the loading spinner in it's place.
+
Below is an example of how the autocomplete looks when a user has typed in 'My query' and is waiting for autocomplete suggestions to load.
+
+
It is good practice to:
+
+
Show loading state when waiting for data to load
+
Let the user finish typing before you fetch autocomplete suggestions (add a debounce)
+
Add the ds-is--loading class as soon as you are fetching data
The final state of the autocomplete is showing the suggestions.
+
You'll notice there is a new section in the code snippet called ds-autocomplete-suggestions, this should be shown/visible when your API/data has loaded the suggestions.
+
It's good practice to:
+
+
Show the suggestions in an unordered list
+
Ensure there is a title tag on the .ds-autocomplete-suggestions__li describing further information about the suggestion
+
Ensure there is a tabindex="0" attribute on the .ds-autocomplete-suggestions__li to allow users to tab through the results with a keyboard
+
+
+
Default (text)
+
The most commonly used suggestions will be displayed as text only.
You will notice that the suggestions are much bigger than text only results, and have an overflow scrollbar. This scrollbar will appear if the height of the suggestion container goes over a certain height.
+
+ As you can see from the code snippet, the main ds-autocomplete-suggestions and ds-autocomplete-suggestions__li classes are prevelant on the ul and li elements. Within the li element we have nested the disruption indicator component whilst also using the wmcads grid. This gives enough flexibility to style the suggestions to how we want, find out more in the next section.
+
There are many ways in which you can show the suggestions, as the autocomplete component has been built in a way that the suggestion results can be custom styled to how you like.
+
+ As long as you have the ul element with the class ds-autocomplete-suggestions which contains a direct child li element that has the class ds-autocomplete-suggestions__li then you can fully customise how you want the suggestions to look.
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/patterns/banner/index.njk b/src/www/pages/st/patterns/banner/index.njk
new file mode 100644
index 00000000..6f2df8a8
--- /dev/null
+++ b/src/www/pages/st/patterns/banner/index.njk
@@ -0,0 +1,273 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Banner" %}
+{% set section="Patterns" %}
+{% set ds = 'st' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/banner/_banner.njk" import wmcadsBanner %}
+
+{% block content %}
+
+{% markdown %}
+
+## Normal
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentHTML: "This is a new service - your feedback will help us to improve it."
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+
+{% markdown %}
+
+{# Banner with phase indicator #}
+
+## With phase indicator
+
+{# What #}
+
+### 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 #}
+
+### When to use it?
+
+- When a service is new
+
+{# When not to #}
+
+### When not to use it?
+
+- On a service that has matured and has a steadily positive rate of satisfaction
+
+{# How #}
+
+### 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).
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ phase: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+
+{% markdown %}
+
+{# Emergency banner #}
+
+## Emergency banner
+
+{# What #}
+
+
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 #}
+
+
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 #}
+
+
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 #}
+
+
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 #}
+
+### Sitewide
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentText: "Emergency notification title",
+ emergency: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{% markdown %}
+{# On-page #}
+
+### On-page variant
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentText: "Emergency notification title",
+ emergency: true,
+ onPage: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+{% markdown %}
+
+{# Hub page banner #}
+
+## Hub page banner
+
+{# What #}
+
+
What does it do?
+
+- Helps users to identify they have eventered a Hub section of the website
+- Provides users with a short description of the chosen hub of the WMCA
+
+{# When #}
+
+
When to use it?
+
+- Only on Hub Landing Pages
+
+
When not to use it?
+
+- On pages where the content is not related to a hub overview
+
+
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, optional logo or icon will change for each hub landing page.
+
+{% endmarkdown %}
+
+{% from "wmcads/patterns/hub-page-banner/_hub-page-banner.njk" import wmcadsHubPageBanner %}
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ contentHTML: "Example using a short description"
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ contentHTML: "Example using an example brand logo with a longer text description",
+ logo: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ title: "Hub Header with a longer example title"
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{% markdown %}
+
+{# Homepage banner #}
+
+## Homepage
+
+{# What #}
+
+
What does it do?
+
+- Provides a complementary image associated with the West Midlands
+- Highlights a welcome message for visitors of the West Midlands Combined Authority site
+
+{# When #}
+
+
A card with disruption indicator components in, which show the live status of a bus, train or tram route and roads.
+
+{# When to #}
+
When to use it?
+
+
When the live status of a mode of transport is useful to the content. For example, showing the live status of train lines next to content about trains.
+
+{# When not to #}
+
When not to use it?
+
+
When the live status is irrelevant to the content. Users can find this information on the homepage.
+
+
+{# Set up travel updates #}
+{% from "wmcads/patterns/content-cards/travel-updates/_travel-updates.njk" import wmcadsContentCardTravelUpdates %}
+
+{{
+ compExample([
+ wmcadsContentCardTravelUpdates()
+ ])
+}}
+
+
+{# Button card #}
+
Button card
+{# What #}
+
What is it?
+
+
A card with several buttons in.
+
+{# When to #}
+
When to use it?
+
+
To direct users to different content relevant to their needs.
+
At the end of the main page content. We found that users preferred to split lots of content into smaller, specific pages and that this was the best way to continue the journey after reading the main overview content.
+
+{# When not to #}
+
When not to use it?
+
+
To attract the user's attention if there is no benefit to them reading the content.
+
To list links within a section or related content. Use the in-line navigation card instead.
+
+
+{# Set up buttons #}
+{% from "wmcads/patterns/content-cards/buttons/_buttons.njk" import wmcadsContentCardButtons %}
+
+{{
+ compExample([
+ wmcadsContentCardButtons()
+ ])
+}}
+
+
+{# Image card #}
+
Image card
+{# What #}
+
What is it?
+
+
A card with an image in.
+
+{# When to #}
+
When to use it?
+
+
To display an image within a tile.
+
When the image complements the text.
+
+{# When to to #}
+
When not to use it?
+
+
When the image has text in. This distracts the user and usually fails accessibility criteria.
+
When the image is a cartoon or illustration. These are called vector images. Vector images display as poor quality for many users.
+
+
+{# Set up image #}
+{% from "wmcads/patterns/content-cards/image/_image.njk" import wmcadsContentCardImage %}
+
+{{
+ compExample([
+ wmcadsContentCardImage()
+ ])
+}}
+
+
+{# In-line navigation card #}
+
In-line navigation card
+{# What #}
+
What is it?
+
+
A card with in-text links for navigation of sections and displaying related content.
+
+{# When to #}
+
When to use it?
+
+
To help the user navigate a collection of pages. This is called a section.
+
To show related content which meets user needs.
+
To help the user navigate a long page using in-text anchors.
+
Only use this pattern in a sidebar.
+
+{# When not to #}
+
When not to use it?
+
+
When the page links you are listing to form part of a journey or process. The journey should be linear.
+
When you are trying to attract the user's attention. This is called a call-to-action.
+
+{# How to #}
+
How to use it
+
+
The group of links must have a title to help users understand what the links are for. For example, 'Related content', 'On this page' or the section name.
+
If the card is used to navigate a long page of content, it should be displayed on the left-hand side.
+
If the card is used to navigate a set of pages, like a section or related content, it should be displayed on the right-hand side.
+
The current page or section being viewed must be inset.
+
+
+{# Set up inline navigation #}
+{% from "wmcads/patterns/content-cards/inline-navigation/_inline-navigation.njk" import wmcadsContentCardInlineNavigation %}
+
+{{
+ compExample([
+ wmcadsContentCardInlineNavigation()
+ ])
+}}
+
+{# With current page #}
+
Allows the user to sign up for updates when information changes on a page.
+
Sends personalised updates to users based on their location.
+
+{# When to #}
+
When to use it?
+
+
Use these content tiles on pages where users can sign-up for newsletter updates.
+
For a standard newsletter sign up, use the content tile where the text fields expand.
+
If you want to capture additional user data, then use the content block which links to an external form, e.g. Campaign Monitor.
+
+
When adding a sign up form from Campaign Monitor, you are provided with HTML markup, but make sure not to change any of the generated attributes except for classes.
+
They have been changed in the following examples to avoid accessibility errors.
+
+
+{# Set up email sign up #}
+{% from "wmcads/patterns/content-cards/email-sign-up/_email-sign-up.njk" import wmcadsContentCardEmailSignUp %}
+
+{# Collapsed #}
+
Collapsed
+
This is the default state for the email sign up card.
Use this content card when you want to send users to an external Campaign Monitor form if you want to capture more user data such as demographics, travel habits etc.
Allows users to accept or amend our website's cookie settings.
+
Our cookie preferences should be confirmed before a user can use our website.
+
The Manage cookies pattern allows users to change their cookie preferences.
+
+
+
+
Cookie banner
+{# When to #}
+
When to use it?
+
+
+ When a user first visits the West Midlands Combined Authority website and has not accepted or amended the cookie preferences.
+
+
+ The banner should be above the header on every page and only disappear when a user has accepted or amended their
+ cookie preferences.
+
+
+{# When not to #}
+
When not to use it?
+
+
When a user has accepted or amended the website's cookies.
+
+ When a returning user visits the West Midlands Combined Authority website and has already accepted or amended their cookies in
+ a previous session.
+
+
+{# How #}
+
How it works
+
+
When a user has accepted or amended the website's cookies.
+
+ When a returning user visits the West Midlands Combined Authority website and has already accepted or amended their cookies in
+ a previous session.
+
+
+
The Cookies banner should be placed above the main header and be on every page
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 Transport for West Midlands 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 ds-footer--mobile-app to the ds-footer element
+
+
+
+ You will most likely want to use this with the mobile variants of the
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'header pattern',
+ link: '#mobile-app-header'
+ })
+ }} .
+
+
+{{
+ compExample([
+ wmcadsFooter({
+ app: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/footer/",
+ njk: false,
+ js: true
+ })
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/patterns/header-and-footer/index.njk b/src/www/pages/st/patterns/header-and-footer/index.njk
new file mode 100644
index 00000000..d1e6d85a
--- /dev/null
+++ b/src/www/pages/st/patterns/header-and-footer/index.njk
@@ -0,0 +1,213 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Header and footer" %}
+{% set section="Patterns" %}
+{% set ds = 'st' %}
+{# Imports #}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+{% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+{%- from "wmcads/components/link/link/_link.njk" import wmcadsLink -%}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
The primary way of navigating the website
+
Standardised pattern
+
+{# When #}
+
When to use it?
+
+
Every page must have a header and a footer
+
+
+
+
+
+
+{# Header #}
+
Header
+{# Skip Link #}
+
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 ds-main-content so the user can skip to this section.
+{# Logo #}
+
Logo
+
This must always be the West Midlands Combined Authority logo.
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 #}
+
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 #}
+
Search
+
This functionality only shows for desktop and tablet users. When clicked, search expands and takes over the whole page.
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 .ds-header__title .ds-col-1 .ds-col-sm-auto on the element
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 Combined Authority header.
+
+
To use the mobile app variant:
+
+
Add the modifier class ds-header--mobile-app to the ds-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
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'footer pattern',
+ link: '#mobile-app-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 Combined Authority 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 ds-footer--mobile-app to the ds-footer element
+
+
+
+ You will most likely want to use this with the mobile variants of the
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'header pattern',
+ link: '#mobile-app-header'
+ })
+ }} .
+
+
+{{
+ compExample([
+ wmcadsFooter({
+ app: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/footer/",
+ njk: false,
+ js: true
+ })
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/patterns/header-demo/index.njk b/src/www/pages/st/patterns/header-demo/index.njk
new file mode 100644
index 00000000..c32de977
--- /dev/null
+++ b/src/www/pages/st/patterns/header-demo/index.njk
@@ -0,0 +1,220 @@
+
+
+
+ {% include "www/_partials/_head.njk" %}
+
+
+
+
+
+ {# header #}
+ {% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+ {{
+ wmcadsHeader({
+ id: "mega-menu-example",
+ search: true,
+ searchSuggestions: ["See live departures", "Find a timetable", "Check for disruptions", "Manage my Swift card", "Find ticket prices", "Get a refund", "Update Direct Debit", "Apply for a 16-18 photocard"],
+ navItems: [{
+ name: "Plan a journey",
+ subnavItems: [{
+ name: "Plan your journey",
+ icon: "general-route",
+ subnavItems: [{
+ name: "Journey planner"
+ },
+ {
+ name: "Find a timetable"
+ },
+ {
+ name: "Live and planned disruptions"
+ },
+ {
+ name: "Major roadworks and events"
+ }]
+ },
+ {
+ name: "Ways to travel",
+ icon: "general-location-arrow",
+ subnavItems: [{
+ name: "Walking"
+ },
+ {
+ name: "Cycling"
+ },
+ {
+ name: "Buses"
+ },
+ {
+ name: "Trains"
+ },
+ {
+ name: "Trams"
+ },
+ {
+ name: "Park and ride"
+ },
+ {
+ name: "Driving"
+ }]
+ },
+ {
+ name: "Travel information",
+ icon: "general-info",
+ subnavItems: [{
+ name: "How to travel with accessibility needs"
+ },
+ {
+ name: "How to travel safely"
+ },
+ {
+ name: "How to get to hospital"
+ }]
+ },
+ {
+ name: "Discover our region",
+ icon: "general-star",
+ subnavItems: [{
+ name: "Places and attractions to visit"
+ },
+ {
+ name: "Find discount vouchers"
+ }]
+ }]
+ }, {
+ name: "Swift and tickets",
+ subnavItems: [{
+ name: "Find a ticket",
+ icon: "general-search",
+ subnavItems: [{
+ name: "Ticket finder"
+ },
+ {
+ name: "Types of ticket"
+ }]
+ },
+ {
+ name: "Discounts and free travel passes",
+ icon: "general-wallet",
+ subnavItems: [{
+ name: "Under 18s"
+ },
+ {
+ name: "Students"
+ },
+ {
+ name: "Families and groups"
+ },
+ {
+ name: "Finding or starting a new job"
+ },
+ {
+ name: "Disabled person's pass"
+ },
+ {
+ name: "Older person's pass"
+ },
+ {
+ name: "WASPI women's pass"
+ }]
+ },{
+ name: "Manage your Swift card",
+ icon: "swift-bird-icon",
+ subnavItems: [{
+ name: "How to use your Swift card"
+ },
+ {
+ name: "Update your personal details"
+ },
+ {
+ name: "Top up your Swift card"
+ },
+ {
+ name: "View your payment history"
+ },
+ {
+ name: "View your travel history"
+ },
+ {
+ name: "Replace your lost Swift card"
+ }]
+ },{
+ name: "Manage your ticket",
+ icon: "general-ticket",
+ subnavItems: [
+ {
+ name: "Update your Direct Debit"
+ },
+ {
+ name: "Get a refund"
+ },
+ {
+ name: "Make a payment"
+ },
+ {
+ name: "Replace your lost ticket or pass"
+ }
+ ]
+ }]
+ },{
+ name: "Get help",
+ subnavItems: [{
+ name: "Contact an operator"
+ },
+ {
+ name: "Find a travel centre"
+ },
+ {
+ name: "Find lost property"
+ },
+ {
+ name: "Give feedback"
+ },
+ {
+ name: "Contact us"
+ },
+ {
+ name: "Report anti-social behaviour"
+ },
+ {
+ name: "Request a new bus shelter or stop pole"
+ },
+ {
+ name: "Report a problem with a shelter or stop"
+ }]
+ }],
+ megaMenu: true
+ })
+ }}
+ {# header #}
+
+
+ {# main #}
+
+ Close window
+
+ {# main #}
+
+
+ {% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+ {{
+ wmcadsFooter({
+ bottomMenu: [{
+ name: "Privacy & Cookies Policy",
+ link: "https://www.wmca.org.uk/privacy-cookies-policy/"
+ }]
+ })
+ }}
+
+
+
+ {% include "www/_partials/_scripts.njk" %}
+
+
+
+
diff --git a/src/www/pages/st/patterns/header/index.njk b/src/www/pages/st/patterns/header/index.njk
new file mode 100644
index 00000000..9cd9075a
--- /dev/null
+++ b/src/www/pages/st/patterns/header/index.njk
@@ -0,0 +1,305 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Header" %}
+{% set section="Patterns" %}
+{% set ds = 'st' %}
+
+{# Imports #}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+{% from "wmcads/patterns/header-v2/_header-v2.njk" import wmcadsHeaderV2 %}
+{% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/warning-text/_warning-text.njk" import wmcadsWarningText %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
The primary way of navigating the website
+
Standardised pattern
+
+{# When #}
+
When to use it?
+
+
Every page must have a header and a footer
+
+
+
+{# Header #}
+
Header
+{# Skip Link #}
+
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 ds-main-content so the user can skip to this section.
+{# Logo #}
+
Logo
+
This must always be the Transport for West Midlands logo.
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 #}
+
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 #}
+
Search
+
This function expands the mega menu and reveals the search bar along with the ‘I want to…’ feature.
+
The ‘I want to...’ feature shows a list of the top page links which users access through search. This is to help users find the information they are searching for faster. These links are regularly updated using search data to maintain their relevance.
+
On mobile, the mega menu search function uses a primary purple background instead of the standard white background. Our user testing found users preferred the white link text on the primary purple background as it is clearer to read.
+
+{{
+ compExample([
+ wmcadsHeaderV2({
+ id: "mega-menu-example",
+ search: true,
+ placeholder: "fg",
+ brand: "wmca",
+ navItems: [{
+ name: "The Mayor",
+ subnavItems: [{
+ name: "Plan your journey",
+ icon: "general-route",
+ subnavItems: [{
+ name: "Journey planner"
+ },
+ {
+ name: "Find a timetable"
+ },
+ {
+ name: "Live and planned disruptions"
+ },
+ {
+ name: "Major roadworks and events"
+ }]
+ },
+ {
+ name: "Ways to travel",
+ icon: "general-location-arrow",
+ subnavItems: [{
+ name: "Walking"
+ },
+ {
+ name: "Cycling"
+ },
+ {
+ name: "Buses"
+ },
+ {
+ name: "Trains"
+ },
+ {
+ name: "Trams"
+ },
+ {
+ name: "Park and ride"
+ },
+ {
+ name: "Driving"
+ }]
+ },
+ {
+ name: "Travel information",
+ icon: "general-info",
+ subnavItems: [{
+ name: "How to travel with accessibility needs"
+ },
+ {
+ name: "How to travel safely"
+ },
+ {
+ name: "How to get to hospital"
+ }]
+ },
+ {
+ name: "Discover our region",
+ icon: "general-star",
+ subnavItems: [{
+ name: "Places and attractions to visit"
+ },
+ {
+ name: "Find discount vouchers"
+ }]
+ }]
+ }, {
+ name: "Who we are",
+ subnavItems: [{
+ name: "Find a ticket",
+ icon: "general-search",
+ subnavItems: [{
+ name: "Ticket finder"
+ },
+ {
+ name: "Types of ticket"
+ }]
+ },
+ {
+ name: "Discounts and free travel passes",
+ icon: "general-wallet",
+ subnavItems: [{
+ name: "Under 18s"
+ },
+ {
+ name: "Students"
+ },
+ {
+ name: "Families and groups"
+ },
+ {
+ name: "Finding or starting a new job"
+ },
+ {
+ name: "Disabled person's pass"
+ },
+ {
+ name: "Older person's pass"
+ },
+ {
+ name: "WASPI women's pass"
+ }]
+ },{
+ name: "Manage your Swift card",
+ icon: "swift-bird-icon",
+ subnavItems: [{
+ name: "How to use your Swift card"
+ },
+ {
+ name: "Update your personal details"
+ },
+ {
+ name: "Top up your Swift card"
+ },
+ {
+ name: "View your payment history"
+ },
+ {
+ name: "View your travel history"
+ },
+ {
+ name: "Replace your lost Swift card"
+ }]
+ },{
+ name: "Manage your ticket",
+ icon: "general-ticket",
+ subnavItems: [
+ {
+ name: "Update your Direct Debit"
+ },
+ {
+ name: "Get a refund"
+ },
+ {
+ name: "Make a payment"
+ },
+ {
+ name: "Replace your lost ticket or pass"
+ }
+ ]
+ }]
+ },{
+ name: "What we do",
+ subnavItems: [{
+ name: "Contact an operator"
+ },
+ {
+ name: "Find a travel centre"
+ },
+ {
+ name: "Find lost property"
+ },
+ {
+ name: "Give feedback"
+ },
+ {
+ name: "Contact us"
+ },
+ {
+ name: "Report anti-social behaviour"
+ },
+ {
+ name: "Request a new bus shelter or stop pole"
+ },
+ {
+ name: "Report a problem with a shelter or stop"
+ }]
+ },{
+ name: "In my area"
+ },{
+ name: "Contact us"
+ }],
+ megaMenu: true,
+ megaMenuDemo: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/header-v2/",
+ njk: false,
+ js: true,
+ iframe: true
+ })
+}}
+
+{# With title variant #}
+
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 .ds-header__title .ds-col-1 .ds-col-sm-auto on the element
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/patterns/index.njk b/src/www/pages/st/patterns/index.njk
new file mode 100644
index 00000000..c2a26ac6
--- /dev/null
+++ b/src/www/pages/st/patterns/index.njk
@@ -0,0 +1,16 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Patterns" %}
+{% set section = "Patterns" %}
+{% set ds = 'st' %}
+
+{% block content %}
+
Patterns are reusable parts of the user interface that have been made to support a variety of
+ applications.
+
+
Individual patterns can be used in multiple different patterns and contexts. For example, the
+ text input component
+ can be used to ask for an email address, a National Insurance number or someone’s name.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples provided
+ will render exactly as they do inside the Design System.
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/patterns/question-form/index.njk b/src/www/pages/st/patterns/question-form/index.njk
new file mode 100644
index 00000000..6a51dd62
--- /dev/null
+++ b/src/www/pages/st/patterns/question-form/index.njk
@@ -0,0 +1,127 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Question form" %}
+{% set section="Patterns" %}
+{% set ds = 'st' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
What does it do?
+
+
Asks a user questions which a service requires.
+
Helps to break down complex forms by spreading questions across multiple pages.
+
+
When to use it?
+
+
When you are asking users for information as part of a service.
+
When a form is required to be spread across multiple pages.
+
+
When not to use it?
+
+
When there are multiple questions on the same page, unless you have user research that says it makes sense to group the questions.
+
+
How it works?
+
+
Always test questions with users through user research
This shows the user all of the data they have entered before they submit the form. This stage allows the user to change any details before submitting the form.
+ {% from "wmcads/patterns/question/summary/_summary.njk" import wmcadsSummary %}
+ {% from "wmcads/components/table/_table.njk" import wmcadsTable %}
+ {% from "wmcads/components/button/_button.njk" import wmcadsButton %}
+ {{
+ compExample([
+ wmcadsSummary({
+ question: "Check your answers before reinstating your Direct Debit",
+ html:
+"
Now send your request
+
By submitting this request you are confirming that, to the best of your knowledge, the details you are providing are correct.
+ You consent to West Midlands Combined Authority possibly changing your Direct Debit date if it usually would occur in the next 10 days.
+ You also consent to West Midlands Combined Authority reinstating your Direct Debit instruction.
This is a confirmation message to show that the user has successfully submitted the data in the form, along with a reference or any information which the user needs to be made aware of.
+ {% from "wmcads/patterns/question/confirmation-message/_confirmation-message.njk" import wmcadsConfirmationMessage %}
+ {{
+ compExample([
+ wmcadsConfirmationMessage() | indent(4) | trim
+ ])
+ }}
+ {# End Confirmation Message #}
+
+{% endblock %}
diff --git a/src/www/pages/st/patterns/search/index.njk b/src/www/pages/st/patterns/search/index.njk
new file mode 100644
index 00000000..23922220
--- /dev/null
+++ b/src/www/pages/st/patterns/search/index.njk
@@ -0,0 +1,147 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Search" %}
+{% set section="Patterns" %}
+{% set ds = 'st' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
What does it do?
+
+
Allows the user to search for information across the West Midlands Combined Authority website
+
+
When to use it?
+
+
When a user needs to find the information they need, which they cannot find through the main navigation
+
+
How it works
+
+
Users should only be able to access the search function through the header by hovering or selecting the magnifying glass icon
+
The search bar will appear in a dropdown along with the ‘I want to…’ feature, where users can access popular search queries
+
Once a user submits their search query, they will be able to view the search results. They can sort and filter the search results on the search results page
+
+
+
+ {# Search bar #}
+
Search bar
+ {% from "wmcads/patterns/search/search-bar/_search-bar.njk" import wmcadsSearchbar %}
+ {{
+ compExample([
+ wmcadsSearchbar()
+ ])
+ }}
+ {# End Search bar #}
+
+
+
+ {# Sort #}
+
Sort
+
What does it do?
+
+
+ This gives the user the option to sort search results by relevance or when a page was last updated
+
This gives the user the option to filter search results using a predetermined set of filters
+
+
When to use it?
+
+
The filters will narrow down the search results by displaying pages which only match the filter criteria
+
On mobile, the filter options will appear when a user clicks on the ‘Filter your results button’. This will trigger an overlay where users can select and apply filters. This is to reduce page size on smaller devices
This is how a matching page will display in the search results page
+
+
How it works
+
+
Each page result will show the page breadcrumbs on desktop. On mobile, breadcrumbs are not shown. This is to reduce page size on smaller devices
+
The page description will display main body copy which is highest on the page. The description will be a maximum of 150 characters. Any descriptions longer than 150 characters will be truncated.
+
If the user’s search query is in the page description, it will be highlighted in bold. This is to help them understand the context of the page
+
The horizontal rule at the bottom of a search result is to make the results list easier to scan.
+
+ {% from "wmcads/patterns/search/search-result/_search-result.njk" import wmcadsSearchResult %}
+ {{
+ compExample([
+ wmcadsSearchResult(
+ {
+ pageTitle: "Swift: The smarter way to travel",
+ breadcrumbs: ['Home', 'Swift'],
+ excerpt: "Swift is the easy and flexible way to travel around the West Midlands. find the swift card for you. How do you travel? bus…"
+ }
+ )
+ ])
+ }}
+ {# End search result #}
+
+ {# Pagination #}
+
Pagination links
+
What does it do?
+
+
Allows the user to navigate through search results.
+
+{% endblock %}
diff --git a/src/www/pages/st/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js b/src/www/pages/st/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js
new file mode 100644
index 00000000..8371607f
--- /dev/null
+++ b/src/www/pages/st/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js
@@ -0,0 +1,71 @@
+function aToZContentStyleGuide() {
+ // FUNCTIONS
+ // Change accordion state
+ const changeAccordionState = (accordionElem, changeStateToOpen = true) => {
+ const accordionBtn = accordionElem.querySelector('.ds-accordion__summary-wrapper');
+ if (changeStateToOpen) {
+ accordionElem.classList.add('ds-is--open');
+ accordionBtn.setAttribute('aria-expanded', true);
+ } else {
+ accordionElem.classList.remove('ds-is--open');
+ accordionBtn.setAttribute('aria-expanded', false);
+ }
+ };
+
+ // Change all accordion states at once
+ const changeAllAccordionStates = changeStateToOpen => {
+ const accordions = document.querySelectorAll('main .ds-accordion');
+ accordions.forEach(accordion => changeAccordionState(accordion, changeStateToOpen));
+ };
+
+ // Scroll to an anchor within an accordion
+ const scrollToAnchor = idWithHash => {
+ // Check if element is on the page
+ const elem = document.querySelector(idWithHash);
+ if (!elem || elem.classList.contains('ds-accordion__summary-wrapper')) {
+ return;
+ }
+ // Open accordion and scroll to element
+ changeAccordionState(elem.parentElement.parentElement);
+ elem.scrollIntoView();
+ };
+
+ // Check for anchor to scroll to onload
+ const scrollToAnchorOnLoad = () => {
+ if (document.location.hash) {
+ scrollToAnchor(document.location.hash);
+ }
+ };
+
+ // Add event listener to all section links on the page
+ const setupScrollToAnchor = () => {
+ const anchors = document.querySelectorAll('main a[href^="#"]:not([href="#"])');
+ // Loop through an add event listener
+ anchors.forEach(anchor => {
+ anchor.addEventListener('click', e => {
+ e.preventDefault();
+ scrollToAnchor(anchor.hash);
+ });
+ });
+ };
+
+ // Set up controls
+ const setupAccordionControls = () => {
+ const controls = document.querySelectorAll('main .js-accordion-controls button');
+
+ controls.forEach(control => {
+ control.addEventListener('click', () => {
+ changeAllAccordionStates(control.classList.contains('js-accordion-controls-open'));
+ });
+ });
+ };
+
+ // CALL FUNCTIONS
+ if (document.querySelector('#atozofstyle')) {
+ scrollToAnchorOnLoad();
+ setupScrollToAnchor();
+ setupAccordionControls();
+ }
+}
+
+export default aToZContentStyleGuide;
diff --git a/src/www/pages/st/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json b/src/www/pages/st/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json
new file mode 100644
index 00000000..143a4f85
--- /dev/null
+++ b/src/www/pages/st/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json
@@ -0,0 +1,538 @@
+{
+ "aToZOfStyles": [
+ {
+ "letter": "A",
+ "styles": [
+ {
+ "title": "Abbreviations and acronyms",
+ "content": "
The first time you use an abbreviation or acronym explain it in full on each page unless it's well known, like UK or BBC. Then refer to it by initials.
Do not use full stops in abbreviations: BBC, not B.B.C.
If you only use a term once, you don't need to include the abbreviation afterwards.
Use 'm' (for millions) and 'bn' (for billions) for sums of money and measurable quantities: £10bn; 1bn litres of water. However, spell out for people and countable nouns: 3 billion commuters; 10 billion tickets.
Use lower case for standard measurements: kg; km; lb; mph but use upper case for KB; GB; MB.
Exception: Spell out metres to prevent confusion with abbreviation for million.
Note:
Do not include a space between the number and the unit: 20km; 50kph; 100KB
Never add an 's' to measurements: 20km, not 20kms
Use lower case for ie and eg, but avoid using these terms altogether where possible. Use 'that is' or 'for example' instead.
Do not use hyphens in ages unless to avoid confusion, although it's always best to write in a way that avoids ambiguity. For example, 'a class of 15 16-year-old students took the A level course' can be written as '15 students aged 16 took the A level course'.
Write ages like this: XX years old (for example, 66 years old).
Exception - use hyphens when talking about age groups:
under-16s (n): under-16s
under 16 (adj): If you are under 16
over-60s (n): over-60s
over 60 (adj): If you are over 60
"
+ },
+ {
+ "title": "American and UK English",
+ "content": "
Use UK English spelling and grammar. For example, use 'organise' not 'organize', 'modelling' not 'modeling', and 'fill in a form', not 'fill out a form'.
American proper nouns, like 4th Mechanized Brigade or World Health Organization, take American English spelling.
"
+ },
+ {
+ "title": "Ampersand",
+ "content": "
Use and rather than &, unless it's a department's logo image or a company's name as it appears on the Companies House register.
You can use bullet points to make text easier to read. Make sure that:
you always use a lead-in line with a colon
the bullets make sense running on from the lead-in line
you use lower case at the start of the bullet
you do not use more than one sentence per bullet point - use commas or dashes to expand on an item
you do not put 'or' or 'and' after the bullets
you do not make the whole bullet a link if it's a long phrase
you do not put any punctuation at the end of a bullet
there is no full stop after the last bullet point
Bullets should normally form a complete sentence following from the lead text. But it's sometimes necessary to add a short phrase to clarify whether all or some of the points apply. For example, 'You can only register a pension scheme that is (one of the following):'
The number and type of examples in a list may lead the user to believe the list is exhaustive. This can be dealt with by
checking if there are other conditions (or if the list is actually complete)
listing the conditions which apply to the most users and removing the rest
consider broader terms in the list which capture more scenarios (and could make the list exhaustive)
Numbered steps
Use numbered steps instead of bullet points to guide a user through a process. List the things the user needs to do in order. You do not need a lead-in line. Steps end in a full stop because each should be a complete sentence.
If you have a scheme or campaign brand, explain the brand. Don't expect users to understand what you mean. If you say ‘be aware and share’ or ‘get your roll and stroll on’ out of context, it’s not clear what that means.
Don’t capitalise slogans like ‘be aware and share’. If you’re talking about a specific brand or campaign, use capitals. For example, Workwise, PassProtect. Don’t tell people to ‘Be Aware and Share’, but do say ‘the Be Aware and Share’ campaign.
For example:
'get half-price travel when you start a new job with the Workwise scheme'
'find your nearest cycle route on the Starley cycle network'
'hire a bike with West Midlands Cycle Hire'
'If you join the PassProtect scheme, you will get a discount if you need to replace your child's school travel pass.'
"
+ },
+ {
+ "title": "cash fare",
+ "content": "Do not use - it's confusing. Say 'ticket bought on the bus, train or tram on the day' instead."
+ },
+ {
+ "title": "Capitalisation",
+ "content": "
DO NOT USE BLOCK CAPITALS FOR LARGE AMOUNTS OF TEXT AS IT'S QUITE HARD TO READ.
Always use lower case, even in page titles. The exceptions to this are proper nouns.
You can use contractions to help make your text less formal.
Avoid negative contractions like can't and don't. Many users find them harder to read, or misread them as the opposite of what they say. Use cannot instead of can't; do not instead of don’t.
Avoid should've, could've, would've, they've too. These can also be hard to read.
Coronavirus is the virus which causes the illness COVID-19. Coronavirus is lower case.
"
+ },
+ {
+ "title": "council",
+ "content": "
Use lower case when writing about local councils in general. Use capitals for the official name of a local council, for example: Birmingham City Council.
do not use a comma between the month and year: 4 June 2017
when space is an issue - in tables or publication titles, for example - you can use truncated months: Jan, Feb
use 'to' in date ranges - not hyphens, en rules or em dashes. For example: tax year 2011 to 2012
Monday to Friday, 9am to 5pm (put different days on a new line, do not separate with a comma)
10 November to 21 December
do not use quarter for dates, use the months: 'Jan to Mar 2013'
when referring to today (as in a news article) include the date: 'The minister announced today (14 June 2012) that…'
Use 'to' instead of a dash or slash in date ranges. 'To' is quicker to read than a dash, and it's easier for screen readers.
Always explain what your date range represents, for example 'tax year 2013 to 2014' or 'September 2013 to July 2014'. Date ranges can be the academic year, calendar year or tax year. This is why date ranges must be very, very clear.
eg can sometimes be read aloud as 'egg' by screen reading software. Instead use 'for example' or 'such as' or 'like' or 'including' - whichever works best in the specific context.
etc can usually be avoided. Try using 'for example' or 'such as' or 'like' or 'including'. Never use etc at the end of a list starting with these words.
ie - used to clarify a sentence - is not always well understood. Try (re)writing sentences to avoid the need to use it. If that is not possible, use an alternative such as 'meaning' or 'that is'.
If you write content by starting with user needs, you will not need to use FAQs.
FAQs are discouraged because they:
duplicate other content on the site
cannot be front-loaded (putting the most important words people will search for), which makes usability difficult
mean that content is not where people expect to find it; it needs to be in context
can add to search results with duplicate, competing text
"
+ },
+ {
+ "title": "fine",
+ "content": "
Use 'fine' instead of 'financial penalty'.
For example, \"You'll pay a £50 fine.\""
+ },
+ {
+ "title": "first person",
+ "content": "
Use \"we'\" and \"us\" when addressing the user where possible. For example, instead of \"West Midlands Combined Authority has…\" say \"We have\" - it’s more personal.
Lower case unless it's a full title. For example: 'UK government', but 'Her Majesty's Government of the United Kingdom of Great Britain and Northern Ireland'.
Do not use a hyphen unless it's confusing without it, for example, a little used-car is different from a little-used car. You can also refer to The Guardian style guide for advice on hyphenation.
Front-load your link text with the relevant terms and make them active and specific. Do not use ‘click here’. Use text that describes the link instead.
"
+ },
+ {
+ "title": "Lists",
+ "content": "
Lists should be bulleted to make them easier to read. See bullets and steps.
Very long lists can be written as a paragraph with a lead-in sentence if it looks better: 'The following countries are in the EU: Spain, France, Italy...'
Use when talking about network bus tickets - always use a lower case ‘n’, upper case ‘B’.
"
+ },
+ {
+ "title": "nNetwork",
+ "content": "
Use when talking about network tickets for the bus, train and tram - always use a lower case ‘n’, followed by an upper case ‘N’.
"
+ },
+ {
+ "title": "nTrain",
+ "content": "
Use when talking about network train tickets - always use a lower case ‘n’, upper case ‘T’.
"
+ },
+ {
+ "title": "Numbers",
+ "content": "
Use 'one' unless you're talking about a step, a point in a list or another situation where using the numeral makes more sense: 'in point 1 of the design instructions', for example. Or this:
You'll be shown 14 clips that feature everyday road scenes.
There will be:
developing hazard in 13 clips
developing hazards in the other clip
Write all other numbers in numerals (including 2 to 9) except where it's part of a common expression like 'one or two of them' where numerals would look strange.
If a number starts a sentence, write it out in full (Thirty-four, for example) except where it starts a title or subheading.
For numerals over 999 - insert a comma for clarity: 9,000
Spell out common fractions like two-thirds.
Use a % sign for percentages: 50%.
Use a 0 where there's no digit before the decimal point.
Use '500 to 900' and not '500-900' (except in tables and for the 16-18 photocard).
Use MB for anything over 1MB: 4MB not 4096KB.
Use KB for anything under 1MB: 569KB not 0.55MB.
Keep it as accurate as possible and up to 2 decimal places: 4.03MB.
Addresses: use 'to' in address ranges: 49 to 53 Cherry Street.
Ordinal numbers
Spell out first to ninth. After that use 10th, 11th and so on.
Do not abbreviate the name. For example, do not use ‘WM Metro’, ‘NX West Midlands’ or ‘West Mids Railway’.
You can use an acronym for timetables and passenger information. For example, ‘West Midlands Metro (WMM)’, ‘National Express West Midlands (NXWM)’ or ‘West Midlands Railway (WMR)’.
Do not use the NXWM acronym without explaining it first. It is not a well known acronym.
"
+ },
+ {
+ "title": "or",
+ "content": "
Do not use slashes instead of \"or\". For example, do not say \"Do this 3/4 times\".
"
+ },
+ {
+ "title": "pay as you go",
+ "content": "
Do not hyphenate and always use lower case.
"
+ },
+ {
+ "title": "pay as you go credit",
+ "content": "
Use to describe Swift cards with a stored cash value
Note: Do not use 'pay as you go travel value (cash)' or 'pay as you go cash value'.
"
+ },
+ {
+ "title": "PDF",
+ "content": "Upper case. No need to explain the acronym."
+ },
+ {
+ "title": "plain English",
+ "content": "
Lower case plain and upper case English unless in a title: the Plain English Campaign.
All content should be written in plain English. You should also make sure you use language your audience will understand. Use the Plain English Campaign’s A to Z of alternative words to avoid complex language.
Phone numbers should be split into at least three groups of digits for readability, ideally with no more than four digits in any single group. For example: 020 7378 1705; 0343 222 6666; 0762 480 4299. See also the design pattern for contact details.
Use double quotation marks if using a quote within a quote.
If a quote runs on longer than one paragraph, include quotation marks at the beginning of each subsequent paragraph but only at the end of the final paragraph.
Place full stops and commas inside quotes when they are complete sentences, otherwise place them outside: 'I want to buy a ticket,' said Mr Smith; When he said 'I promise', he didn't really mean it.
use 'to' in time ranges, not hyphens, en rules or em dashes: 10am to 11am (not 10-11am) 5:30pm (not 1730hrs) midnight (not 00:00) midday (not 12 noon, noon or 12pm) 6 hours 30 minutes Midnight is the first minute of the day, not the last. You should consider using \"11:59pm\" to avoid confusion about a single, specific time.
For example, \"You must register by 11:59pm on Tuesday 14 June.\" can only be read one way, but \"You must register by midnight on Tuesday 14 June\" can be read in two ways (the end of Monday 13, or end of Tuesday 14).
Timetables and printed passenger information use the 24-hour clock in HHMM format.
"
+ },
+ {
+ "title": "tram",
+ "content": "
Not Metro.
"
+ },
+ {
+ "title": "tram stop",
+ "content": "
Not station.
"
+ },
+ {
+ "title": "Transport for West Midlands",
+ "content": "
Avoid referring to Transport for West Midlands (TfWM). Users don't need to know about it while getting travel advice.
Explaining the relationship between West Midlands Combined Authority, TfWM and West Midlands Combined Authority (WMCA) is complicated. Use \"we\" instead. For example, \"we manage the Key Route Network (KRN)\" with a link to the TfWM policy page.
Not \"zero-hour contract\" or \"zero hours contract\"
"
+ }
+ ]
+ }
+ ]
+}
diff --git a/src/www/pages/st/styles/a-to-z-content-style-guide/index.njk b/src/www/pages/st/styles/a-to-z-content-style-guide/index.njk
new file mode 100644
index 00000000..0fdb3e55
--- /dev/null
+++ b/src/www/pages/st/styles/a-to-z-content-style-guide/index.njk
@@ -0,0 +1,131 @@
+{% extends "www/_layouts/layout-fullwidth.njk" %}
+{% set pageTitle="A to Z content style guide" %} {% set section = "Styles" %}
+{% set ds = 'st' %}
+
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{# Set array of tiles #}
+{% block content %}
+
+{# About the style guide #}
+
+
+
Writing content for West Midlands Combined Authority
+
+ You should create all content with user-focused content design principles. This means content has an identified
+ user need and is written in plain English.
+
+
+ Do not use marketing speak - users will be visiting your website to perform a task (for example, buy a train ticket or find out about Swift cards). Your content shouldn’t try to sell them anything - instead, tell them the information they need to know in the simplest way possible.
+
+
+ Research has shown that both high literacy and low literacy users prefer plain English because it takes less time to read. Users won’t be on your website for fun - so make the experience quick and easy.
+
+
+ To find out more about why plain language is important, read:
+
+
+ {{
+ wmcadsLink({
+ link: 'https://readabilityguidelines.co.uk/clear-language/',
+ linkTitle: 'advice about clear language',
+ contentText: 'advice about clear language'
+ })
+ }}
+ from the Readability Guidelines project
+
+
+ the
+ {{
+ wmcadsLink({
+ link: 'http://www.plainenglish.co.uk/the-a-z-of-alternative-words.html',
+ linkTitle: 'plain English Campaign’s A to Z of alternative words',
+ contentText: 'plain English Campaign’s A to Z of alternative words'
+ })
+ }}
+ - this helps you find a simple replacement for a complicated word
+
+
+
+
+ Read the
+ {{
+ wmcadsLink({
+ link: 'https://www.gov.uk/guidance/content-design/what-is-content-design',
+ linkTitle: 'GOV.UK introduction to content design',
+ contentText: 'GOV.UK introduction to content design'
+ })
+ }}
+ to find out more about content design principles.
+
+
Design Team can help you to test your content with user research.
+
+
About the A-Z of style guide
+
This style guide will help you to use consistent words across West Midlands Combined Authority services.
+
+ If something is not covered by this style guide, check the
+ {{
+ wmcadsLink({
+ link: 'https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style',
+ linkTitle: 'GOV.UK Style Guide',
+ contentText: 'GOV.UK style guide'
+ })
+ }}
+ . You can also email Samresha Purewal if you think something is missing from this guidance.
+
+
Introducing West Midlands Combined Authority
+
If you’re talking about day-to-day services (bus, train or tram), you
+ may need to make it clear that West Midlands Combined Authority does not run these.
For example, you could say: "We don’t run the buses, trains or trams. We can point you in the right direction if you need help."
+
Below are the list of West Midlands Combined Authority colour palettes.
+
+ We have tested our colours against the three most prevalent colour blind anomalies: protanopia, deuteranopia and tritanopia. While in some circumstances, particularly protanopia, colours can appear to be relatively similar.
+
+
+ These issues can be circumvented by not referring to specific colours. For instance, when referring to a green button with the word 'start' in, the phrase 'click the green button to start' would not be helpful. Instead, use 'click the start button', without a colour reference.
+
+
+ W3C AA Accessibility criteria requires the contrast of test to be enhanced, with a contrast ratio upwards of 3:1.
+
+
+ All brand/web colours meet this criteria, though the modal colour 'WM Railway' must only be used for iconography and graphical devices.
+
+
The background only colours can only be used as a background colour and they are not intended for any other use.
+
+
+{# Using in development #}
+
Using in development
+
wmcads SCSS
+
If you are using WMCA Design System's SCSS in development, you shouldn't use the HEX values! Instead you should always use the scss variables instead, for example use get-color(primary) instead of #3c1053. This ensures you are always using the most up-to-date colour. To find out more on how to use the get-color() function in SCSS, please refer to the notes for @function get-color() in _mixins.scss.
+
+
Without wmcads SCSS
+
If you are not using WMCA Design System's SCSS then it is recommended to use the hex values below. It is highly adviseable to set these up as variables in your development enviornment, this ensures that you can easily change them to keep up-to-date with our colour palettes.
+
If you'd like to see how we have set the variables up, you can check out $palettes in _vars.scss and @function get-color() in _mixins.scss.
+
+{# Brand colours #}
+
+
Brand colours
+
+ {% for color in colors.brand %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+
+{# Web colours #}
+
+
Web colours
+
+ {% for color in colors.web %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+
+{# Background Only colours #}
+
+
Background only colours
+
+ {% for color in colors.backgroundOnly %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+ Spacing can be applied in between .ds-col-* elements by adding a class to the parent .ds-grid.
+
+
+ The classes are named using the format .ds-grid--spacing-{col-count}-{size}.
+
+
+ Where {col-count} is the number of columns per row and {size} is the same as in the spacing utility classes above.
+
+
+ Spacing can also be applied responsively using the format .ds-grid--spacing-{breakpoint}-{col-count}-{size}.
+
+
+ Where {breakpoint} is one of breakpoint sizes described in the grid section.
+
+
+
When to use Grid column spacing
+
+
Use when you require more control over child item spacing
+
Use only when the number of child items do not change
+
+
+
Examples
+
+
Example 1
+
This example shows the use of the ds-content-card component displayed in a grid of thirds with spacing of 1rem.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+
Contact us
+
Get in touch if you want to know more about the budget.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+
Contact us
+
Get in touch if you want to know more about the budget.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
Example 2
+
This example shows the use of the ds-content-card component displayed in a half grid with spacing of 2rem.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
Example 3
+
This example shows the use of the ds-content-card component displayed in a half grid with spacing controlled by breakpoints.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
The default spacing is 0.75rem (ds-grid--spacing-2-sm). Once the page width goes over 768px the spacing changes to 1rem (ds-grid--spacing-md-2-md).
+
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/styles/examples/grid-examples.njk b/src/www/pages/st/styles/examples/grid-examples.njk
new file mode 100644
index 00000000..31fdf235
--- /dev/null
+++ b/src/www/pages/st/styles/examples/grid-examples.njk
@@ -0,0 +1,336 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Grid Examples" %}
+{% set section = "Styles" %}
+{% set ds = 'st' %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
Introduction to wmcads Grids
+
Grid classes vs. unit classes
+
wmcads Grids consist of two types of classes: the grid class (ds-grid) and unit classes (ds-col-*)
+
The widths of the units are fractions
+
Units have various class names that represent their widths. For example, ds-u-1-2 has a width of 50%, whereas ds-u-1-5 would have a width of 20%.
+
All child elements of a grid must be units
+
Child elements contained within an element with a ds-grid classname must be a grid unit with a ds-col-* classname.
+
Content goes inside grid units
+
All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.
+
+
Examples
+
Let's start with a simple example. Here's a grid with three columns:
+
+
+
Thirds
+
Thirds
+
Thirds
+
+
+
+
+ {%- filter forceescape %}
+
+
Thirds
+
Thirds
+
Thirds
+
+ {%- endfilter %}
+
+
+
+
The above example will keep the columns the same width no matter the page width.
+
+
Adding responsive classes
+
We can control the width by adding responsive classes.
+
+
When using Responsive Grids, you can control how the grid behaves at specific breakpoints by adding class names. wmcads default responsive grids comes with the following class names and media query breakpoints.
+
+
+
Default Media Queries
+
+
+
Key
+
CSS Media Query
+
Applies
+
Classname
+
+
+
+
+
None
+
None
+
Always
+
.ds-col-*
+
+
+
sm
+
@media screen and (min-width: 35.5em)
+
≥ 568px
+
.ds-col-sm-*
+
+
+
md
+
@media screen and (min-width: 48em)
+
≥ 768px
+
.ds-col-md-*
+
+
+
lg
+
@media screen and (min-width: 64em)
+
≥ 1024px
+
.ds-col-lg-*
+
+
+
xl
+
@media screen and (min-width: 80em)
+
≥ 1280px
+
.ds-col-xl-*
+
+
+
+
+
Let's modify the example so the columns become full width on mobile:
+
+
+
Thirds
+
Thirds
+
Thirds
+
+
+
+
+ {%- filter forceescape %}
+
+
Thirds
+
Thirds
+
Thirds
+
+ {%- endfilter %}
+
+
+
+
The above example has a default width of 1 (ds-col-1) so when the page is viewed below 586px the columns will display full width. When the page is viewed over 586px the columns will appear in 3 coloumns (ds-col-sm-1-3).
+
+
+
Justify Content
+
+
You can justify the grid content bby adding these classes:
+
+
ds-grid--justify-between
+
Items will have space between them
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-around
+
Items will have space before, between, and after them
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-end
+
Items are positioned at the end of the container
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-center
+
Items are positioned in the center of the container
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-even
+
Items will have equal space around them
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/styles/icons/_icons.scss b/src/www/pages/st/styles/icons/_icons.scss
new file mode 100644
index 00000000..d03435ca
--- /dev/null
+++ b/src/www/pages/st/styles/icons/_icons.scss
@@ -0,0 +1,12 @@
+.website-icons {
+ svg {
+ width: 60px;
+ height: 60px;
+ padding: $size-sm;
+ fill: get-color(primary);
+ }
+
+ .text-center {
+ text-align: center;
+ }
+}
diff --git a/src/www/pages/st/styles/icons/index.njk b/src/www/pages/st/styles/icons/index.njk
new file mode 100644
index 00000000..3ab7ec80
--- /dev/null
+++ b/src/www/pages/st/styles/icons/index.njk
@@ -0,0 +1,188 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Icons" %}
+{% set section = "Styles" %}
+{% set ds = 'st' %}
+
+{# The icon vars are an array that match the folders they come from in src/assets/icon/{foldername} #}
+{% set iconGeneral = [
+ "arrow",
+ "caret-down",
+ "caret-up",
+ "checkmark",
+ "chevron-right",
+ "circle-hollow",
+ "circle-solid",
+ "cross",
+ "expand",
+ "favourite",
+ "file",
+ "filter",
+ "id-card",
+ "info",
+ "location-arrow",
+ "minimise",
+ "paperclip",
+ "pdf",
+ "html",
+ "search",
+ "success",
+ "swap",
+ "trash",
+ "warning-circle",
+ "warning-triangle"
+] %}
+
+{% set iconSocial = [
+ "facebook",
+ "facebook-hex",
+ "twitter",
+ "twitter-hex",
+ "instagram",
+ "instagram-hex",
+ "linkedin",
+ "linkedin-hex",
+ "youtube",
+ "youtube-hex",
+ "email"
+] %}
+
+{% set iconPortfolio = [
+ "culture-and-digital",
+ "economy",
+ "environment",
+ "housing-and-land",
+ "inclusive-communities",
+ "skills",
+ "transport",
+ "wellbeing"
+] %}
+
+
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+
+{% block content %}
+{# How to use #}
+
About
+
+
What does it do?
+
+
+ Icons are images used in context to communicate a meaning (a visual representation of an object, action, or idea).
+
+
+
When to use it?
+
+
+ Only use icons and images if there’s a real user need.
+
+
+
When not to use it?
+
+
+ Do not use it for unnecessary decoration.
+
+
+
+
+{# Using Icons #}
+
Using icons
+
WMCA Design System icons are available as an SVG sprite to include in your HTML page.
+
How to use
+
Recommended
+
The Recommended method of using the icon sprite sheet is to refer directly to the one used in the design system. This ensures that your icons will always be up to date.
+
To get started, include the below snippet of javascript somewhere in your codebase. This will:
+
+
Pull the latest SVG icon spritesheet to be used within your web app or service
+
Will ensure the icons work with older browsers such as Internet Explorer 11
+
Keep the icon set consistent with other West Midlands Combined Authority Services
To display an icon or glyph, use an icon tag (from the icon section at the bottom of the page) with a href attribute and xlink:href (as a fallback). Make sure that the xlink and href tags are pointing to the location of your downloaded icon sprite sheet.
+
The ICON-TAG-NAME should be replaced with the icon tag name of the icon you want to show from the Icons section below, for example #ds-general-arrow should be in the xlink:href and href attributes of the svg's <use> element.
+
+{% endblock %}
diff --git a/src/www/pages/st/styles/images/index.njk b/src/www/pages/st/styles/images/index.njk
new file mode 100644
index 00000000..b2ae3c95
--- /dev/null
+++ b/src/www/pages/st/styles/images/index.njk
@@ -0,0 +1,29 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Images" %}
+{% set section = "Styles" %}
+{% set ds = 'st' %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
An image tells a story, communicates a complex idea or supports page content by providing further details.
+
+{# When to #}
+
When to use it?
+
+
When there is a clear user need.
+
When an image serves a clear functional purpose.
+
All images, except decorative, must have alt text that describes the content and function of the image. This tells users using screen readers what information the image provides.
+
+{# When not to #}
+
When not to use it?
+
+
When an image is an unnecessary decoration.
+
When an image would create visual noise, which detracts attention away from the page content. This can distract the user from completing their task.
+
+{% endblock %}
diff --git a/src/www/pages/st/styles/index.njk b/src/www/pages/st/styles/index.njk
new file mode 100644
index 00000000..e6794927
--- /dev/null
+++ b/src/www/pages/st/styles/index.njk
@@ -0,0 +1,15 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Styles" %}
+{% set section = "Styles" %}
+{% set ds = 'st' %}
+
+{% block content %}
+
Make your service look and feel like WMCA Design System.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples in the
+ Design System will not need any additional styling.
+
If you need to apply styles manually, you should still follow existing WMCA Design System conventions. For
+ example, do not assign
+ new meanings to colours, do not change the style of buttons or adjust the thickness of borders on
+ form inputs.
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/st/styles/layout/index.njk b/src/www/pages/st/styles/layout/index.njk
new file mode 100644
index 00000000..110039eb
--- /dev/null
+++ b/src/www/pages/st/styles/layout/index.njk
@@ -0,0 +1,84 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Layout" %}
+{% set section = "Styles" %}
+{% set ds = 'st' %}
+
+{% block content %}
+{# Standard content template #}
+
Standard content template
+{# What #}
+
What does it do?
+
+
A template is based on 2/3 column for content and a 1/3 column right-hand side for widgets to publish functional content.
+
Content editors will be able to use the design system components in Umbraco to structure content effectively and create visual hierarchy.
+
+{# When #}
+
When to use it?
+
+
When you need to publish functional content based on a clear user task.
+
When your content enables users to complete a specific task. For example, Get a refund, Update a Direct Debit, Find discount vouchers etc.
+
+{# When not to #}
+
When not to use it?
+
+
When you need to create a page for a marketing campaign and you need to use promotional images.
+
+{# Guidance #}
+
Guidance for content editors
+
+
Only use a header image when there is a clear user need for the image and it serves a purpose. For example, on a 'Travel by tram' page, you may want to use a header image of a tram so users unfamiliar with the West Midlands Combined Authority will instantly know what our trams look like throughout the region.
+
Use the Link component in your body content if you want to direct the user to additional content. Do not use buttons for any links. Do not use the same link twice as this confuses users.
+
Only use buttons in your body content when a user needs to complete an action as part of a process, or if a user is confirming their details e.g. newsletter sign-up.
+
+
Warning text with exclamation mark icon component: Please read the Creating effective content section below before writing content or placing content into your page.
+
+
+
+{# Publicity campaign template #}
+
Publicity campaign template
+{# What #}
+
What does it do?
+
+
A template based on a flexible grid provides content editors with an option to create a marketing campaign page.
+
Content editors will be able to use the design system components in Umbraco to structure content effectively and create visual hierarchy.
+
+{# When to #}
+
When to use it?
+
+
When you want to create a marketing campaign to promote and introduce a new service or a product.
+
+{# When not to #}
+
When not to use it?
+
+
When you need to publish functional content based on a clear user task. For example, Get a refund, Update a Direct Debit, Find discount vouchers etc. For this, you will need to use the Standard content template.
+
+{# Guidance #}
+
Guidance for content editors
+
+
Use a header image to draw attention and to increase the visual appeal of the page. Our User research found that 78% of users prefer pages with header images, with the most popular reason being that they make the page look more attractive. Remember to keep your header image relevant to your content.
+
If you are creating a hub page, use Content cards to direct users to the other pages. For marketing campaign pages, please use Content cards with images as this helps users to locate information faster. We recommend using a total of four content cards on one page. However, you can use up to six content cards on a page if absolutely necessary.
+
Restrict the body copy to a maximum of three paragraphs. The body copy introduces the page and should be brief and to the point. The main content your users require needs to be as higher up the page as possible, to reduce scrolling time.
+
Marketing campaign pages should be user tested prior to going live. This is to identify if users can locate the content that they need. Generating heatmaps through Hotjar will help track how the pages are used.
+
+
+
+
+{# Creating effective content #}
+
Creating effective content
+
There is no minimum or maximum page length, however:
Always place content with higher importance at the top of the page, with less important content following after.
+
If you have to use long content, break it down into smaller sections to make it easier for user to understand information. You can:
+
+
Use Content cards for important content which you want to draw attention to. You can use a maximum of six content cards on a page. Do not use more than six because user research shows that users prefer less information, especially on the mobile. Our user research showed that content tiles with images help users locate relevant content faster.
+
Use the Accordion component to organise and group related information at the bottom of the page, below body copy and content tiles. Accordions can shorten pages and reduce scrolling when your content does not need to be read in full. We also recommend using accordions when space is at a premium and you are placing long content on a mobile interface or in a side panel.
Place the In-line navigation component on the left side of a desktop page so users can skip to the relevant section without scrolling. This is especially useful for users on mobile, as the page content component will be placed after the page title.
+ When creating a map use the
+ {{
+ wmcadsLink({
+ link: "https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e",
+ linkTitle: "WMCA Basemap",
+ linkTarget: "_blank",
+ contentText: "WMCA Basemap"
+ })
+ }} as your basemap layer. This is to ensure maps are consistent across West Midlands Combined Authority services.
+
+
The WMCA Basemap is a portal item, you can use the
+{{
+ wmcadsLink({
+ link: "https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html",
+ linkTitle: "ArcGIS Basemap documentation",
+ linkTarget: "_blank",
+ contentText: "ArcGIS Basemap documentation"
+ })
+ }} with the WMCA Basemap ID to include the basemap in your application.
+
+
+{# Example of code #}
+
Example of the ESRI ArcGIS JavaScript API
+
+
+ // ESRI ArcGIS JS code...
+ const basemap = new Basemap({
+ baseLayers: [
+ new VectorTileLayer({
+ portalItem: {
+ // set the baselayer to WMCA Basemap:
+ // https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e
+ id: '53f165a8863c4d40ba017042e248355e',
+ },
+ }),
+ ],
+ });
+
+ // Create a new map with the basemap set above
+ const map = new Map({
+ basemap,
+ });
+
+
+
+{# Can't use Esri ArcGIS #}
+
Can't use ESRI ArcGIS?
+
+ We understand that you may not always be able to use
+ {{
+ wmcadsLink({
+ link: "https://developers.arcgis.com/documentation/core-concepts/apis-sdks-apps/#choosing-an-arcgis-api-or-sdk",
+ linkTitle: "ArcGIS APIs and SDKs",
+ linkTarget: "_blank",
+ contentText: "ArcGIS APIs and SDKs"
+ })
+ }}.
+ In these situations, style your map as closely to the
+ {{
+ wmcadsLink({
+ link: "https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e",
+ linkTitle: "WMCA Basemap",
+ linkTarget: "_blank",
+ contentText: "WMCA Basemap"
+ })
+ }} as possible.
+
+
+
+
+{# User interface #}
+
User interface
+
+ User interface elements on a map such as zoom, pan and location buttons follow particular pattern rules when being used.
+
+
These pattern rules are:
+
+
Accessible for screen readers and keyboard navigation
+
User interface buttons must have 35px height and 35px width
+
User interface buttons must display in the top right of the map
+
The border radius must be 5px (slight curve on the corners)
+
The icon colour must be white
+
+ The background/fill colour of the buttons must use the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Information colour",
+ linkTarget: "_blank",
+ contentText: "Information colour"
+ })
+ }}
+
+
+ If it is the location button, the background/fill colour must be transparent and the border/icon colour must use the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Primary Purple colour",
+ linkTarget: "_blank",
+ contentText: "Primary Purple colour"
+ })
+ }}
+
+
+
+
+ When hovered, the background/fill colour must be 30% darker (mixed with black) of the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Information colour",
+ linkTarget: "_blank",
+ contentText: "Information colour"
+ })
+ }}
+ (#5c236d)
+
+
+ If it is the location button, the background/fill colour must be 70% lighter (mixed with white) of the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Secondary Purple colour",
+ linkTarget: "_blank",
+ contentText: "Secondary Purple colour"
+ })
+ }}
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/src/www/pages/st/styles/typography/index.njk b/src/www/pages/st/styles/typography/index.njk
new file mode 100644
index 00000000..aa7e99ff
--- /dev/null
+++ b/src/www/pages/st/styles/typography/index.njk
@@ -0,0 +1,75 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Typography" %}
+{% set section = "Styles" %}
+{% set ds = 'st' %}
+
+{% block content %}
+{# About #}
+
About
+
+ We have tested our typography with users, including those with dyslexia and those with low vision. The questionnaire presented respondents with two body fonts, set out in different sizes, line spacing and kerning. The options were shown randomly for each participant.
+
+ Our findings were as such:
+
+
55.2% of respondents found Noto Sans easiest to read, with a further 24.1% of respondents having no preference
+
69% of respondents found a larger font size easiest to read, with a further 5.2% having no preference
+
55.2% of respondents preferred increased line spacing, with a further 12.1% having no preference
+
+
+
+ As a public sector organisation, in addition to testing the above we are required to meet WCAG 2.1 guidelines at AA standard.
+ Therefore, features will be useable when text size is increased up to 200% and content reflowed for 400%.
+
+
+{# Fonts #}
+
Fonts
+
+ We utilise Google Fonts in our typography and all fonts used are pre-bundled in our design system CSS, so you won't need to include them seperately.
+
+
+ Find below, various examples of our typography in use.
+
+
+{# DM Sans / Headings #}
+
DM Sans / headings
+
+ The font DM Sans is used with font weight of 700 (bold) for heading elements only.
+ DM Sans font reference
+
+
Things to note:
+
+
+ On mobile devices (less than 768px wide), the H1 and H2 elements are reduced in size by 15%.
+
+
+
+
46px - Heading 1
+
32px - Heading 2
+
23px - Heading 3
+
18px - Heading 4
+
+
+{# Noto sans / body copy #}
+
Noto Sans / body copy
+
+ The font Noto Sans is used with the font weight of 400 (regular) and 700 (bold) for all elements other than headings. The default font size used is 16px.
+ Noto Sans font reference
+
+
+{% endblock %}
diff --git a/src/www/pages/st/styles/utility-classes/index.njk b/src/www/pages/st/styles/utility-classes/index.njk
new file mode 100644
index 00000000..bc076bb8
--- /dev/null
+++ b/src/www/pages/st/styles/utility-classes/index.njk
@@ -0,0 +1,276 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Utility classes" %}
+{% set section = "Styles" %}
+{% set ds = 'st' %}
+
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+
+{% block content %}
+{# About #}
+
About
+
+ There are a variety of utility classes that can be used with the existing components and styles on.
+
+
+
+
+{# Containers #}
+
Containers
+
+ Containers are used to wrap content in a 'container'. The container will have a fixed max size and be centered on the page, it will adjust to 100% width when the page width is less than the container size.
+
+
+
+
+ .ds-container /* Container with max-width of 1280px */
+
+ /* This should be used on your main content section and will
+ add a margin top to seperate from header/breadcrumb section */
+ .ds-container.ds-container--main
+
+
+
+
+
+{# Grid #}
+
Grid
+
+ The WMCA Design System uses its own custom syntax grid system adopted from Pure CSS Grid. The grid system is already included in the bundled ds-components.min.css file so you don't need to include it seperately.
+
+
+
+ You can Refer to the Pure CSS Grid documentation for reference on how to use our grid system, but bear in mind that:
+
+
+
.pure-g becomes .ds-grid in our design system
+
.pure-u-* becomes .ds-col-* in our design system
+
+
+
+
You can also use modifier classes on the same element where the class .ds-grid is being used.
+ When you want to hide an element based on if the device width is a desktop or mobile device.
+
+
+
+
+ .ds-hide-mobile /* Hide only on mobile devices or smaller (less than 48em) */
+ .ds-hide-desktop /* Hide only on desktop devices or larger (greater than 48em) */
+ .ds-hide /* Hide on all devices */
+
+
+
+
+
Spacing
+
+ The spacing utility classes are used to adjust whitespace for an element via padding and margins.
+
+
Before using the spacing utility classes, please consider:
+
+
Most components already come with defined spacing. This spacing shouldn't be overwritten.
+
Spacing should be used as a last resort to help layout components on a page.
+
You can use none as a size to enforce zero margin or padding.
+
+
+
+ The classes are named using the format .ds-{type}-{side}-{size}.
+
+{# type #}
+
+ Where {type} is one of:
+
+
+
+ m - for classes that set margin
+
+
+ p - for classes that set padding
+
+
+{# side #}
+
+ Where {side} is one of:
+
+
+
+ t - for classes that set margin-top or padding-top
+
+
+ r - for classes that set margin-right or padding-right
+
+
+ b - for classes that set margin-bottom or padding-bottom
+
+
+ l - for classes that set margin-left or padding-left
+
+
+ blank - for classes that set a margin or padding on all 4 sides of the element
+
+
+{# size #}
+
+Where {size} is one of:
+
+
+
+ xs - set size to 0.25rem
+
+
+ xsm - set size to 0.5rem
+
+
+ sm - set size to 0.75rem
+
+
+ md - set size to 1rem
+
+
+ lg - set size to 2rem
+
+
+ xl - set size to 3rem
+
+
+
+
Some examples of using these utility classes...
+
+
+ .ds-m-xs // applies a margin of 0.25rem to all sides
+ .ds-p-b-lg // applies a padding-bottom of 2rem
+ .ds-m-l-none // sets left margin to 0
+
+
+
+{# Grid columns spacing #}
+
Grid column spacing
+
+
+ Spacing can be applied in between .ds-col-* elements by adding a class to the parent .ds-grid.
+
+
+ The classes are named using the format .ds-grid--spacing-{col-count}-{size}.
+
+
+ Where {col-count} is the number of columns per row and {size} is the same as in the spacing utility classes above.
+
+
+ Spacing can also be applied responsively using the format .ds-grid--spacing-{breakpoint}-{col-count}-{size}.
+
+
+ Where {breakpoint} is one of breakpoint sizes described in the grid section.
+
+
+
Some examples of using these utility classes...
+
+
+ .ds-grid--spacing-2-md // applies a 1rem spacing between 2 columns
+ .ds-grid--spacing-lg-4-lg // applies a 2rem spacing between 4 columns above a screen width of 1024px
+
+
Example templates that make up the main West Midlands Combined Authority Website
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Templates" %}
+{% set section = "Templates" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+
Example templates that make up the main West Midlands Combined Authority Website
{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/accordion/index.njk b/src/www/pages/tfwm/components/accordion/index.njk
new file mode 100644
index 00000000..0f12b9a0
--- /dev/null
+++ b/src/www/pages/tfwm/components/accordion/index.njk
@@ -0,0 +1,13 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Accordion" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+
+{% from "www/pages/shared/components/accordion/index.njk" import dsAccordionContent %}
+
+{{
+ dsAccordionContent({})
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/breadcrumb/index.njk b/src/www/pages/tfwm/components/breadcrumb/index.njk
new file mode 100644
index 00000000..4902faca
--- /dev/null
+++ b/src/www/pages/tfwm/components/breadcrumb/index.njk
@@ -0,0 +1,13 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Breadcrumb" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+
+{% from "www/pages/shared/components/breadcrumb/index.njk" import dsBreadcrumbContent %}
+
+{{
+ dsBreadcrumbContent({})
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/buttons/index.njk b/src/www/pages/tfwm/components/buttons/index.njk
new file mode 100644
index 00000000..ebfc5e98
--- /dev/null
+++ b/src/www/pages/tfwm/components/buttons/index.njk
@@ -0,0 +1,13 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Buttons" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+
+{% from "www/pages/shared/components/buttons/index.njk" import dsButtonsContent %}
+
+{{
+ dsButtonsContent({})
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/content-card/index.njk b/src/www/pages/tfwm/components/content-card/index.njk
new file mode 100644
index 00000000..e02ef179
--- /dev/null
+++ b/src/www/pages/tfwm/components/content-card/index.njk
@@ -0,0 +1,136 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Content card" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{# Imports #}
+{% from "wmcads/components/content-card/_content-card.njk" import wmcadsContentCard %}
+
+{% block content %}
+{# About #}
+
About
+
Content cards contain components and text. Against the page background, they help to draw the users attention to important information and help users to navigate content.
+
The cards have many common use cases and applications, all of which can be found on the content cards pattern page.
+
+
+
+{# Content card #}
+
Content card
+{# What #}
+
What is it?
+
+
A container with a white background and purple underline.
+
Any components and text can be used within a card.
+
+{# When not to #}
+
When not to use it?
+
+
When it is used in a set of cards for navigation purposes. Instead, use a Navigation card.
+{# Medium - Narrow #}
+{% from "wmcads/components/disruption-indicator/medium/_medium.njk" import wmcadsDisruptionIndicatorMedium as wmcadsDisruptionIndicatorNarrow %}
+
Medium - Narrow
+{# What #}
+
What does it do?
+
+
Shows the route number
+
Shows the modal icon
+
Shows the disruption severity with the background
+
+{# When #}
+
When to use it?
+
+
When showing a specific bus route's disruption status
+
Example: homepage travel updates widget or major roadworks sidebar
Shows the disruption severity with the background colour, icon and text
+
+{# When #}
+
When to use it?
+
+
Showing a specific train, tram or road's disruption status
+
Example: homepage travel updates widget or major roadworks sidebar
+
+{# Research #}
+
Research
+
+
During user testing for the home page travel update widget, users preferred having a text description of the mode in addition to the modal icons, as the train and tram brand icons are very similar when small
Sometimes it makes sense to group a few questions on the same page
+
Make sure users know why you're asking the question and only ask users for information you really need
+
Add (optional) to the end of each question that is optional
+
+ {% from "wmcads/components/form-elements/question/_question.njk" import wmcadsQuestion %}
+ {{
+ compExample([wmcadsQuestion()])
+ }}
+ {# End question #}
+
+
+ {# Progress Indicator #}
+
Progress Indicator
+
What does it do?
+
+
It is visual representation of progress through a set of steps that guides user in order to complete a specified process. Knowing where the user is in their progress can help improve their orientation within the system. It sets expectations and gives and impression of activity and progress.
+
+
When to use it?
+
+
When you want to tell users where they are in the process.
+
When you want to reassure users that the system is working and reduce user’s uncertainty.
+
+
When not to use it?
+
+
When progress cannot be measured and therefore does not have a percentage that indicates the amount of progress.
Navigation expands when user hovers or clicks on it revealing options to select.
+
+
When to use it?
+
+
When there is limited space and you need to reduce the space taken on the page
+
When an input is nonessential, e.g. sorting list
+
When you need flexibility because you do not know how many options there will be. All options are contained within the drop down component.
+
+
When not to use it?
+
+
Drop down creates more work for your user because it is a multi-step process, they hide available options and they slow users down by defaults therefore if possible use another component to display options e.g. radio buttons, text field, input selector
+
Do not use when drop down option has more than 36 characters because users will not be able to read them on some mobile devices
+
+ {% from "wmcads/components/form-elements/dropdown/_dropdown.njk" import wmcadsDropdown %}
+ {{
+ compExample([wmcadsDropdown()])
+ }}
+ {# End Dropdown #}
+
+
+ {# Input #}
+
Text Input / Text Field
+
What does it do?
+
+
Allows users to enter text.
+
+
When to use it?
+
+
When user needs to enter short amount of text, e.g. name, email.
+
+
When not to use it?
+
+
When user needs to add a lot of text that might go over multiple lines
+
Use fixed width inputs for content that has known length, e.g. postcode.
Allows users to write whatever they like, also called free text.
+
+
+ When to use it?
+
+
+
When the user needs to enter lots of text. For example, a paragraph.
+
+
+ When not to use it?
+
+
+
When the user needs to enter one line of text. Use the input component instead.
+
Use fixed-width inputs for content that has a known length, e.g. postcode.
+
When there are limited options. Use a different form element that limits the options.
+
+ {% from "wmcads/components/form-elements/textarea/_textarea.njk" import wmcadsTextarea %}
+ {{
+ compExample([wmcadsTextarea()])
+ }}
+ {# End Textarea #}
+
+
+ {# Date input #}
+ {% from "wmcads/components/form-elements/date-input/_date-input.njk" import wmcadsDateInput %}
+
Date Input
+
What does it do?
+
+
Help users enter a memorable date or one they can easily look up.
+
+
When to use it?
+
+
Use the date input component when you’re asking users for a date they’ll already know, or can look up without using a calendar.
+
+
When not to use it?
+
+
Do not use the date input component if users are unlikely to know the exact date of the event you’re asking about.
+
+ {{
+ wmcadsInsetText ({
+ contentHTML: "If you are looking for how to format the date within content i.e. \"4 June 2017\", check the dates section within the A to Z content style guide."
+ })
+ }}
+
+ {{
+ compExample([
+ wmcadsDateInput({
+
+ })
+ ])
+ }}
+{# End Date input #}
+
+
+
+ {# Handling error #}
+
Handling errors
+
What does it do?
+
+
Lets the user know what is wrong with their answer.
+
Tells the user how to correct their answer.
+
Tells the user what format or characters it is expecting.
+
Prevents the user from trying to submit information that will be rejected by the API.
+
+
+ When to use it?
+
+
+
A handling error is used in addition to an error summary, which shows all errors on a page.
+
When there has been an error with validating the user's answer after they try to continue to the next step.
+
When the error is a validation error that is fixable.
+
Use a separate error for each group of answer fields. For example, one error for date fields.
+
The corrective action should be read by a screen reader before data entry components.
+
+
+ When not to use it?
+
+
+
Do not show the error until the user tries to move to the next step. Immediate validation can distract a user from progressing, especially if it validates as the user is typing.
+
Hint text should help the user to understand how the field will be validated.
+
If the service is down the user should be shown a service unavailable page.
+
+
+ How to use it
+
+
+
Make sure questions and help text are well designed and tested with users to avoid errors in the first place.
+ Show a series of steps in an order within a piece of content
+
+
+
+ When to use it?
+
+
+
+ When there are multiple steps to a process
+
+
+ When you are explaining this within a piece of content
+
+
+
+ When not to use it?
+
+
+
Numbered (ordered) lists are better to show a list
+
+ When you are not displaying a process
+
+
+ {% from "wmcads/components/in-text-step/_in-text-step.njk" import wmcadsInTextStep %}
+ {{
+ compExample([wmcadsInTextStep({
+ steps: [
+ "Step text must end with a full stop.",
+ "Step text must end with a full stop.",
+ "Step text must end with a full stop."
+ ]
+ })])
+ }}
+
+ {# End label #}
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/inclusive-growth-doughnut/index.njk b/src/www/pages/tfwm/components/inclusive-growth-doughnut/index.njk
new file mode 100644
index 00000000..6ad7a7c3
--- /dev/null
+++ b/src/www/pages/tfwm/components/inclusive-growth-doughnut/index.njk
@@ -0,0 +1,12 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Incusive Growth Doughnut" %}
+{% from "wmcads/components/inclusive-growth-doughnut/_inclusive-growth-doughnut.njk" import wmcadsIncusiveGrowthDoughnut %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+{{
+ compExample([
+ wmcadsIncusiveGrowthDoughnut()
+ ])
+}}
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/index.njk b/src/www/pages/tfwm/components/index.njk
new file mode 100644
index 00000000..6f21f3e8
--- /dev/null
+++ b/src/www/pages/tfwm/components/index.njk
@@ -0,0 +1,13 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Components" %}
+{% set ds = 'tfwm' %}
+
+{% block content %}
+
Components are reusable parts of the user interface that have been made to support a variety of
+ applications.
+
+
Individual components can be used in multiple different patterns and contexts. For example, the
+ text input component can be used to ask for an email address, a National Insurance number or someone’s name.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples provided will render exactly as they do inside the Design System.
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/inset-text/index.njk b/src/www/pages/tfwm/components/inset-text/index.njk
new file mode 100644
index 00000000..f0164f3a
--- /dev/null
+++ b/src/www/pages/tfwm/components/inset-text/index.njk
@@ -0,0 +1,104 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Inset Text" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+
+{% block content %}
+{# About #}
+
Inset Text
+
What does it do?
+
+
+ Allows users to identify important content on the page as they scan the page.
+
+
+
+
When to use it?
+
+
+ When you have content that needs to standout from what's around it, such as a quote, example or additional information.
+
+
+
+
When not to use it?
+
+
+ In close proximity to visually prominent elements. Users don't notice it.
+
+
+ To highlight important information that is key to the transaction/service or time critical. Use Warning Text instead.
+
+
+
+
How to use it?
+
+
+ Use inset text sparingly. They're less effective if overused.
+
+
+ Users with visual disabilities may not be able to see the colour that helps it stand out. Instead, they may rely on a hidden label to recognise it. Hide Information: inside the Inset Text div so that users with screen readers understand this information is different to body text.
+
+
+
+ {% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+ {{
+ compExample([
+ wmcadsInsetText({
+ html: "Example of inset text"
+ })
+ ])
+ }}
+ {# End inset text #}
+
+
+
+ {# Question #}
+
Example Callout
+
+
What does it do?
+
+
+ Highlight a contextual example to provide help users understand the broader page content.
+
+
+
+
When to use it?
+
+
+ When a contextual example might help the user understand the information.
+
+
+
+
When not to use it?
+
+
+ When the information is simple enough for our user's to understand. Don't give an example for the sake of it.
+
+
+
+
How to use it?
+
+
+ Use a concise heading that a user can easily scan and understand.
+
+
+ Make sure the heading is relevant to both the content it's supporting and the context it is providing in the main body text.
+
+
+ Add an aria-label to the parent Example Callout div so that users with screen readers understand that the information is important.
+
+
+
+
+ {% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+ {{
+ compExample([
+ wmcadsInsetText({
+ html: "Example Callout title Example callout description.",
+ label: "Example Callout"
+ })
+ ])
+ }}
+ {# End inset text #}
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/links/index.njk b/src/www/pages/tfwm/components/links/index.njk
new file mode 100644
index 00000000..ce11a7c8
--- /dev/null
+++ b/src/www/pages/tfwm/components/links/index.njk
@@ -0,0 +1,353 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Links" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+{# About #}
+
About
+
+ Buttons and links are items used to perform an action on a
+ page
+
+
+ It's important to know when to use a link or a
+ button
+
+
+ Links should be used when a users action won’t affect the website at all,
+ examples of these
+ are:
+
+
+
Certain call to actions
+
Links to internal or external pages
+
+
+
What do the link attritubes mean?
+
The href attritube is used to define the link address
+
The target attritube is used to define where to open the linked document.
+ See below to find
+ out more about the target attritube
+
The title attritube is used to define additional information about the
+ link. It's useful for
+ your users and accessibility. Try not to duplicate your link text- this hurts usability as
+ hard of sight users
+ using screen readers will here the same text twice.
+
+
Target attritube values:
+
+
_blank: Will load clicked link in a new window
+
_self: Will load clicked link in the same frame as it was clicked in
+
+
_parent: Will load clicked link in the parent frameset
+
_top: Will load clicked link in the full body of the window
+
framename: Will load clicked link in a named frame
+
+
+
+
+
+{# Default link #}
+
Default link
+{# What #}
+
What does it do?
+
+
Highlight that the word or phrase is different from other body text
+ Helps users to understand they need to wait for something to finish happening
+
+
+ Continues to play the animation until the action is complete
+
+
+{# When #}
+
When to use it?
+
+
+ When you are calling an API
+
+
+ In there area of the page that the action is occurring
+
+
+ Example: within a search box
+
+
+{# When not #}
+
When not to use it?
+
+
+ A service should not go live if there is a whole-page loading spinner
+
+
+ Try to avoid using a loading spinner, our services should respond quickly
+
+
+ If an action takes a long time, users will lose trust in the service
+
+
+
+
+ By default you should aim to use the 'normal sized loader'.
+ Only when the normal sized loader is not fit for purpose should you use the large or small sized loader.
+
+
+
Change the text within .ds-loader__content from 'Content is loading...' to something that describes what it is you are loading, this will help with accessibility.
+ Gives user feedback during the interaction with a website (informs about error, warning, success). Messages are
+ colour coded and use symbols to reinforce the message. The structure of the message: what happened? what does it
+ mean? what can user do about it?)
+
+
+
+
When to use it?
+
+
+ When user needs explicit indication that something has gone wrong (user error or website/app error)
+
+
+ When user is about to do something that is destructive or when the result of an action is unexpected but it is not
+ an error (Warning Message)
+
+
+ When user needs confirmation of success (Success message)
+
+
+ When user needs key information about upcoming change (Information message).
+
+
+ Real time inline validation to inform users about the correctness of provided data.
+
+
+
+
+{# Info message #}
+
Information
+{{
+ compExample([
+ wmcadsMsgSummary({
+ type: 'info',
+ title: 'Information about XXXXXXXXX was successfully updated!',
+ message: 'Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.'
+ })
+ ])
+}}
+{# End info message #}
+
+
+{{
+ compExample([
+ wmcadsPageHeader({
+ title: true,
+ text: "Building a healthier, happier, better connected and more prosperous West Midlands",
+ home: true
+ })
+ ])
+}}
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/patterns/autocomplete/index.njk b/src/www/pages/tfwm/components/patterns/autocomplete/index.njk
new file mode 100644
index 00000000..0f829eb8
--- /dev/null
+++ b/src/www/pages/tfwm/components/patterns/autocomplete/index.njk
@@ -0,0 +1,135 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Autocomplete" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{# Imports #}
+{% from "wmcads/patterns/autocomplete/_autocomplete.njk" import wmcadsAutocomplete %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+ The autocomplete component is an input field that offers the user text suggestions as they type.
+ This is often done by hitting an API endpoint with the users query when the user has finished typing.
+
+
+ The autocomplete pattern is a combination of the input and loader components.
+
+{# When #}
+
When to use it?
+
+
As a progressive enhancement to make a users journey shorter/easier when searching
+
When you have a smaller data set/list that is quick to query
+
When you want to ensure the user submits a relevant query/value
+
+{# When not #}
+
When not to use it?
+
+
When you have a massive set of data, instead you should have an input/search that shows results after submission.
+
Don't use this component as if it is a search box. Autocomplete is to suggest a value to a user via it's results not act as a results page for a search.
+
+
+
+{# Default #}
+
Default state
+
In its default state, the autcomplete component is made up of a text input with a search icon.
+
For best practice, ensure that the placeholder and aria-label describes what the autocompletes intended purpose is.
+
Notice that there is also a ds-loader component nested within the autocomplete, more on that in the next section.
+ When a user types in a query, you may want to have some code that hits an API or gets the data/suggestions for the autocomplete from somewhere. To help users understand that they need to wait for something we can change the autocomplete to a loading state.
+ We do this by adding the class ds--is-loading to the top level of the autocomplete (this is the only difference between the loading state and default state code snippets).
+
+
As mentioned in the previous section, there is a ds-loader component nested in the autocomplete. When adding the ds--is-loading class, it will hide the search icon and show the loading spinner in it's place.
+
Below is an example of how the autocomplete looks when a user has typed in 'My query' and is waiting for autocomplete suggestions to load.
+
+
It is good practice to:
+
+
Show loading state when waiting for data to load
+
Let the user finish typing before you fetch autocomplete suggestions (add a debounce)
+
Add the ds-is--loading class as soon as you are fetching data
The final state of the autocomplete is showing the suggestions.
+
You'll notice there is a new section in the code snippet called ds-autocomplete-suggestions, this should be shown/visible when your API/data has loaded the suggestions.
+
It's good practice to:
+
+
Show the suggestions in an unordered list
+
Ensure there is a title tag on the .ds-autocomplete-suggestions__li describing further information about the suggestion
+
Ensure there is a tabindex="0" attribute on the .ds-autocomplete-suggestions__li to allow users to tab through the results with a keyboard
+
+
+
Default (text)
+
The most commonly used suggestions will be displayed as text only.
You will notice that the suggestions are much bigger than text only results, and have an overflow scrollbar. This scrollbar will appear if the height of the suggestion container goes over a certain height.
+
+ As you can see from the code snippet, the main ds-autocomplete-suggestions and ds-autocomplete-suggestions__li classes are prevelant on the ul and li elements. Within the li element we have nested the disruption indicator component whilst also using the wmcads grid. This gives enough flexibility to style the suggestions to how we want, find out more in the next section.
+
There are many ways in which you can show the suggestions, as the autocomplete component has been built in a way that the suggestion results can be custom styled to how you like.
+
+ As long as you have the ul element with the class ds-autocomplete-suggestions which contains a direct child li element that has the class ds-autocomplete-suggestions__li then you can fully customise how you want the suggestions to look.
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/patterns/banner/index.njk b/src/www/pages/tfwm/components/patterns/banner/index.njk
new file mode 100644
index 00000000..f7eee3ec
--- /dev/null
+++ b/src/www/pages/tfwm/components/patterns/banner/index.njk
@@ -0,0 +1,273 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Banner" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/banner/_banner.njk" import wmcadsBanner %}
+
+{% block content %}
+
+{% markdown %}
+
+## Normal
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentHTML: "This is a new service - your feedback will help us to improve it."
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+
+{% markdown %}
+
+{# Banner with phase indicator #}
+
+## With phase indicator
+
+{# What #}
+
+### 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 #}
+
+### When to use it?
+
+- When a service is new
+
+{# When not to #}
+
+### When not to use it?
+
+- On a service that has matured and has a steadily positive rate of satisfaction
+
+{# How #}
+
+### 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).
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ phase: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+
+{% markdown %}
+
+{# Emergency banner #}
+
+## Emergency banner
+
+{# What #}
+
+
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 #}
+
+
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 #}
+
+
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 #}
+
+
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 #}
+
+### Sitewide
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentText: "Emergency notification title",
+ emergency: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{% markdown %}
+{# On-page #}
+
+### On-page variant
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentText: "Emergency notification title",
+ emergency: true,
+ onPage: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+{% markdown %}
+
+{# Hub page banner #}
+
+## Hub page banner
+
+{# What #}
+
+
What does it do?
+
+- Helps users to identify they have eventered a Hub section of the website
+- Provides users with a short description of the chosen hub of the WMCA
+
+{# When #}
+
+
When to use it?
+
+- Only on Hub Landing Pages
+
+
When not to use it?
+
+- On pages where the content is not related to a hub overview
+
+
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, optional logo or icon will change for each hub landing page.
+
+{% endmarkdown %}
+
+{% from "wmcads/patterns/hub-page-banner/_hub-page-banner.njk" import wmcadsHubPageBanner %}
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ contentHTML: "Example using a short description"
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ contentHTML: "Example using an example brand logo with a longer text description",
+ logo: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ title: "Hub Header with a longer example title"
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{% markdown %}
+
+{# Homepage banner #}
+
+## Homepage
+
+{# What #}
+
+
What does it do?
+
+- Provides a complementary image associated with the West Midlands
+- Highlights a welcome message for visitors of the West Midlands Combined Authority site
+
+{# When #}
+
+
A card with disruption indicator components in, which show the live status of a bus, train or tram route and roads.
+
+{# When to #}
+
When to use it?
+
+
When the live status of a mode of transport is useful to the content. For example, showing the live status of train lines next to content about trains.
+
+{# When not to #}
+
When not to use it?
+
+
When the live status is irrelevant to the content. Users can find this information on the homepage.
+
+
+{# Set up travel updates #}
+{% from "wmcads/patterns/content-cards/travel-updates/_travel-updates.njk" import wmcadsContentCardTravelUpdates %}
+
+{{
+ compExample([
+ wmcadsContentCardTravelUpdates()
+ ])
+}}
+
+
+{# Button card #}
+
Button card
+{# What #}
+
What is it?
+
+
A card with several buttons in.
+
+{# When to #}
+
When to use it?
+
+
To direct users to different content relevant to their needs.
+
At the end of the main page content. We found that users preferred to split lots of content into smaller, specific pages and that this was the best way to continue the journey after reading the main overview content.
+
+{# When not to #}
+
When not to use it?
+
+
To attract the user's attention if there is no benefit to them reading the content.
+
To list links within a section or related content. Use the in-line navigation card instead.
+
+
+{# Set up buttons #}
+{% from "wmcads/patterns/content-cards/buttons/_buttons.njk" import wmcadsContentCardButtons %}
+
+{{
+ compExample([
+ wmcadsContentCardButtons()
+ ])
+}}
+
+
+{# Image card #}
+
Image card
+{# What #}
+
What is it?
+
+
A card with an image in.
+
+{# When to #}
+
When to use it?
+
+
To display an image within a tile.
+
When the image complements the text.
+
+{# When to to #}
+
When not to use it?
+
+
When the image has text in. This distracts the user and usually fails accessibility criteria.
+
When the image is a cartoon or illustration. These are called vector images. Vector images display as poor quality for many users.
+
+
+{# Set up image #}
+{% from "wmcads/patterns/content-cards/image/_image.njk" import wmcadsContentCardImage %}
+
+{{
+ compExample([
+ wmcadsContentCardImage()
+ ])
+}}
+
+
+{# In-line navigation card #}
+
In-line navigation card
+{# What #}
+
What is it?
+
+
A card with in-text links for navigation of sections and displaying related content.
+
+{# When to #}
+
When to use it?
+
+
To help the user navigate a collection of pages. This is called a section.
+
To show related content which meets user needs.
+
To help the user navigate a long page using in-text anchors.
+
Only use this pattern in a sidebar.
+
+{# When not to #}
+
When not to use it?
+
+
When the page links you are listing to form part of a journey or process. The journey should be linear.
+
When you are trying to attract the user's attention. This is called a call-to-action.
+
+{# How to #}
+
How to use it
+
+
The group of links must have a title to help users understand what the links are for. For example, 'Related content', 'On this page' or the section name.
+
If the card is used to navigate a long page of content, it should be displayed on the left-hand side.
+
If the card is used to navigate a set of pages, like a section or related content, it should be displayed on the right-hand side.
+
The current page or section being viewed must be inset.
+
+
+{# Set up inline navigation #}
+{% from "wmcads/patterns/content-cards/inline-navigation/_inline-navigation.njk" import wmcadsContentCardInlineNavigation %}
+
+{{
+ compExample([
+ wmcadsContentCardInlineNavigation()
+ ])
+}}
+
+{# With current page #}
+
Allows the user to sign up for updates when information changes on a page.
+
Sends personalised updates to users based on their location.
+
+{# When to #}
+
When to use it?
+
+
Use these content tiles on pages where users can sign-up for newsletter updates.
+
For a standard newsletter sign up, use the content tile where the text fields expand.
+
If you want to capture additional user data, then use the content block which links to an external form, e.g. Campaign Monitor.
+
+
When adding a sign up form from Campaign Monitor, you are provided with HTML markup, but make sure not to change any of the generated attributes except for classes.
+
They have been changed in the following examples to avoid accessibility errors.
+
+
+{# Set up email sign up #}
+{% from "wmcads/patterns/content-cards/email-sign-up/_email-sign-up.njk" import wmcadsContentCardEmailSignUp %}
+
+{# Collapsed #}
+
Collapsed
+
This is the default state for the email sign up card.
Use this content card when you want to send users to an external Campaign Monitor form if you want to capture more user data such as demographics, travel habits etc.
Allows users to accept or amend our website's cookie settings.
+
Our cookie preferences should be confirmed before a user can use our website.
+
The Manage cookies pattern allows users to change their cookie preferences.
+
+
+
+
Cookie banner
+{# When to #}
+
When to use it?
+
+
+ When a user first visits the West Midlands Combined Authority website and has not accepted or amended the cookie preferences.
+
+
+ The banner should be above the header on every page and only disappear when a user has accepted or amended their
+ cookie preferences.
+
+
+{# When not to #}
+
When not to use it?
+
+
When a user has accepted or amended the website's cookies.
+
+ When a returning user visits the West Midlands Combined Authority website and has already accepted or amended their cookies in
+ a previous session.
+
+
+{# How #}
+
How it works
+
+
When a user has accepted or amended the website's cookies.
+
+ When a returning user visits the West Midlands Combined Authority website and has already accepted or amended their cookies in
+ a previous session.
+
+
+
The Cookies banner should be placed above the main header and be on every page
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 Transport for West Midlands 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 ds-footer--mobile-app to the ds-footer element
+
+
+
+ You will most likely want to use this with the mobile variants of the
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'header pattern',
+ link: '#mobile-app-header'
+ })
+ }} .
+
+
+{{
+ compExample([
+ wmcadsFooter({
+ app: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/footer/",
+ njk: false,
+ js: true
+ })
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/patterns/header-and-footer/index.njk b/src/www/pages/tfwm/components/patterns/header-and-footer/index.njk
new file mode 100644
index 00000000..8e42881b
--- /dev/null
+++ b/src/www/pages/tfwm/components/patterns/header-and-footer/index.njk
@@ -0,0 +1,212 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Header and footer" %}
+{% set section="Patterns" %}
+{# Imports #}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+{% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+{%- from "wmcads/components/link/link/_link.njk" import wmcadsLink -%}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
The primary way of navigating the website
+
Standardised pattern
+
+{# When #}
+
When to use it?
+
+
Every page must have a header and a footer
+
+
+
+
+
+
+{# Header #}
+
Header
+{# Skip Link #}
+
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 ds-main-content so the user can skip to this section.
+{# Logo #}
+
Logo
+
This must always be the West Midlands Combined Authority logo.
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 #}
+
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 #}
+
Search
+
This functionality only shows for desktop and tablet users. When clicked, search expands and takes over the whole page.
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 .ds-header__title .ds-col-1 .ds-col-sm-auto on the element
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 Combined Authority header.
+
+
To use the mobile app variant:
+
+
Add the modifier class ds-header--mobile-app to the ds-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
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'footer pattern',
+ link: '#mobile-app-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 Combined Authority 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 ds-footer--mobile-app to the ds-footer element
+
+
+
+ You will most likely want to use this with the mobile variants of the
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'header pattern',
+ link: '#mobile-app-header'
+ })
+ }} .
+
+
+{{
+ compExample([
+ wmcadsFooter({
+ app: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/footer/",
+ njk: false,
+ js: true
+ })
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/patterns/header-demo/index.njk b/src/www/pages/tfwm/components/patterns/header-demo/index.njk
new file mode 100644
index 00000000..c32de977
--- /dev/null
+++ b/src/www/pages/tfwm/components/patterns/header-demo/index.njk
@@ -0,0 +1,220 @@
+
+
+
+ {% include "www/_partials/_head.njk" %}
+
+
+
+
+
+ {# header #}
+ {% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+ {{
+ wmcadsHeader({
+ id: "mega-menu-example",
+ search: true,
+ searchSuggestions: ["See live departures", "Find a timetable", "Check for disruptions", "Manage my Swift card", "Find ticket prices", "Get a refund", "Update Direct Debit", "Apply for a 16-18 photocard"],
+ navItems: [{
+ name: "Plan a journey",
+ subnavItems: [{
+ name: "Plan your journey",
+ icon: "general-route",
+ subnavItems: [{
+ name: "Journey planner"
+ },
+ {
+ name: "Find a timetable"
+ },
+ {
+ name: "Live and planned disruptions"
+ },
+ {
+ name: "Major roadworks and events"
+ }]
+ },
+ {
+ name: "Ways to travel",
+ icon: "general-location-arrow",
+ subnavItems: [{
+ name: "Walking"
+ },
+ {
+ name: "Cycling"
+ },
+ {
+ name: "Buses"
+ },
+ {
+ name: "Trains"
+ },
+ {
+ name: "Trams"
+ },
+ {
+ name: "Park and ride"
+ },
+ {
+ name: "Driving"
+ }]
+ },
+ {
+ name: "Travel information",
+ icon: "general-info",
+ subnavItems: [{
+ name: "How to travel with accessibility needs"
+ },
+ {
+ name: "How to travel safely"
+ },
+ {
+ name: "How to get to hospital"
+ }]
+ },
+ {
+ name: "Discover our region",
+ icon: "general-star",
+ subnavItems: [{
+ name: "Places and attractions to visit"
+ },
+ {
+ name: "Find discount vouchers"
+ }]
+ }]
+ }, {
+ name: "Swift and tickets",
+ subnavItems: [{
+ name: "Find a ticket",
+ icon: "general-search",
+ subnavItems: [{
+ name: "Ticket finder"
+ },
+ {
+ name: "Types of ticket"
+ }]
+ },
+ {
+ name: "Discounts and free travel passes",
+ icon: "general-wallet",
+ subnavItems: [{
+ name: "Under 18s"
+ },
+ {
+ name: "Students"
+ },
+ {
+ name: "Families and groups"
+ },
+ {
+ name: "Finding or starting a new job"
+ },
+ {
+ name: "Disabled person's pass"
+ },
+ {
+ name: "Older person's pass"
+ },
+ {
+ name: "WASPI women's pass"
+ }]
+ },{
+ name: "Manage your Swift card",
+ icon: "swift-bird-icon",
+ subnavItems: [{
+ name: "How to use your Swift card"
+ },
+ {
+ name: "Update your personal details"
+ },
+ {
+ name: "Top up your Swift card"
+ },
+ {
+ name: "View your payment history"
+ },
+ {
+ name: "View your travel history"
+ },
+ {
+ name: "Replace your lost Swift card"
+ }]
+ },{
+ name: "Manage your ticket",
+ icon: "general-ticket",
+ subnavItems: [
+ {
+ name: "Update your Direct Debit"
+ },
+ {
+ name: "Get a refund"
+ },
+ {
+ name: "Make a payment"
+ },
+ {
+ name: "Replace your lost ticket or pass"
+ }
+ ]
+ }]
+ },{
+ name: "Get help",
+ subnavItems: [{
+ name: "Contact an operator"
+ },
+ {
+ name: "Find a travel centre"
+ },
+ {
+ name: "Find lost property"
+ },
+ {
+ name: "Give feedback"
+ },
+ {
+ name: "Contact us"
+ },
+ {
+ name: "Report anti-social behaviour"
+ },
+ {
+ name: "Request a new bus shelter or stop pole"
+ },
+ {
+ name: "Report a problem with a shelter or stop"
+ }]
+ }],
+ megaMenu: true
+ })
+ }}
+ {# header #}
+
+
+ {# main #}
+
+ Close window
+
+ {# main #}
+
+
+ {% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+ {{
+ wmcadsFooter({
+ bottomMenu: [{
+ name: "Privacy & Cookies Policy",
+ link: "https://www.wmca.org.uk/privacy-cookies-policy/"
+ }]
+ })
+ }}
+
+
+
+ {% include "www/_partials/_scripts.njk" %}
+
+
+
+
diff --git a/src/www/pages/tfwm/components/patterns/header/index.njk b/src/www/pages/tfwm/components/patterns/header/index.njk
new file mode 100644
index 00000000..423c907b
--- /dev/null
+++ b/src/www/pages/tfwm/components/patterns/header/index.njk
@@ -0,0 +1,305 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Header" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{# Imports #}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+{% from "wmcads/patterns/header-v2/_header-v2.njk" import wmcadsHeaderV2 %}
+{% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/warning-text/_warning-text.njk" import wmcadsWarningText %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
The primary way of navigating the website
+
Standardised pattern
+
+{# When #}
+
When to use it?
+
+
Every page must have a header and a footer
+
+
+
+{# Header #}
+
Header
+{# Skip Link #}
+
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 ds-main-content so the user can skip to this section.
+{# Logo #}
+
Logo
+
This must always be the Transport for West Midlands logo.
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 #}
+
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 #}
+
Search
+
This function expands the mega menu and reveals the search bar along with the ‘I want to…’ feature.
+
The ‘I want to...’ feature shows a list of the top page links which users access through search. This is to help users find the information they are searching for faster. These links are regularly updated using search data to maintain their relevance.
+
On mobile, the mega menu search function uses a primary purple background instead of the standard white background. Our user testing found users preferred the white link text on the primary purple background as it is clearer to read.
+
+{{
+ compExample([
+ wmcadsHeaderV2({
+ id: "mega-menu-example",
+ search: true,
+ placeholder: "fg",
+ brand: "wmca",
+ navItems: [{
+ name: "The Mayor",
+ subnavItems: [{
+ name: "Plan your journey",
+ icon: "general-route",
+ subnavItems: [{
+ name: "Journey planner"
+ },
+ {
+ name: "Find a timetable"
+ },
+ {
+ name: "Live and planned disruptions"
+ },
+ {
+ name: "Major roadworks and events"
+ }]
+ },
+ {
+ name: "Ways to travel",
+ icon: "general-location-arrow",
+ subnavItems: [{
+ name: "Walking"
+ },
+ {
+ name: "Cycling"
+ },
+ {
+ name: "Buses"
+ },
+ {
+ name: "Trains"
+ },
+ {
+ name: "Trams"
+ },
+ {
+ name: "Park and ride"
+ },
+ {
+ name: "Driving"
+ }]
+ },
+ {
+ name: "Travel information",
+ icon: "general-info",
+ subnavItems: [{
+ name: "How to travel with accessibility needs"
+ },
+ {
+ name: "How to travel safely"
+ },
+ {
+ name: "How to get to hospital"
+ }]
+ },
+ {
+ name: "Discover our region",
+ icon: "general-star",
+ subnavItems: [{
+ name: "Places and attractions to visit"
+ },
+ {
+ name: "Find discount vouchers"
+ }]
+ }]
+ }, {
+ name: "Who we are",
+ subnavItems: [{
+ name: "Find a ticket",
+ icon: "general-search",
+ subnavItems: [{
+ name: "Ticket finder"
+ },
+ {
+ name: "Types of ticket"
+ }]
+ },
+ {
+ name: "Discounts and free travel passes",
+ icon: "general-wallet",
+ subnavItems: [{
+ name: "Under 18s"
+ },
+ {
+ name: "Students"
+ },
+ {
+ name: "Families and groups"
+ },
+ {
+ name: "Finding or starting a new job"
+ },
+ {
+ name: "Disabled person's pass"
+ },
+ {
+ name: "Older person's pass"
+ },
+ {
+ name: "WASPI women's pass"
+ }]
+ },{
+ name: "Manage your Swift card",
+ icon: "swift-bird-icon",
+ subnavItems: [{
+ name: "How to use your Swift card"
+ },
+ {
+ name: "Update your personal details"
+ },
+ {
+ name: "Top up your Swift card"
+ },
+ {
+ name: "View your payment history"
+ },
+ {
+ name: "View your travel history"
+ },
+ {
+ name: "Replace your lost Swift card"
+ }]
+ },{
+ name: "Manage your ticket",
+ icon: "general-ticket",
+ subnavItems: [
+ {
+ name: "Update your Direct Debit"
+ },
+ {
+ name: "Get a refund"
+ },
+ {
+ name: "Make a payment"
+ },
+ {
+ name: "Replace your lost ticket or pass"
+ }
+ ]
+ }]
+ },{
+ name: "What we do",
+ subnavItems: [{
+ name: "Contact an operator"
+ },
+ {
+ name: "Find a travel centre"
+ },
+ {
+ name: "Find lost property"
+ },
+ {
+ name: "Give feedback"
+ },
+ {
+ name: "Contact us"
+ },
+ {
+ name: "Report anti-social behaviour"
+ },
+ {
+ name: "Request a new bus shelter or stop pole"
+ },
+ {
+ name: "Report a problem with a shelter or stop"
+ }]
+ },{
+ name: "In my area"
+ },{
+ name: "Contact us"
+ }],
+ megaMenu: true,
+ megaMenuDemo: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/header-v2/",
+ njk: false,
+ js: true,
+ iframe: true
+ })
+}}
+
+{# With title variant #}
+
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 .ds-header__title .ds-col-1 .ds-col-sm-auto on the element
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/patterns/index.njk b/src/www/pages/tfwm/components/patterns/index.njk
new file mode 100644
index 00000000..55ff4044
--- /dev/null
+++ b/src/www/pages/tfwm/components/patterns/index.njk
@@ -0,0 +1,16 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Patterns" %}
+{% set section = "Patterns" %}
+{% set ds = 'mc' %}
+
+{% block content %}
+
Patterns are reusable parts of the user interface that have been made to support a variety of
+ applications.
+
+
Individual patterns can be used in multiple different patterns and contexts. For example, the
+ text input component
+ can be used to ask for an email address, a National Insurance number or someone’s name.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples provided
+ will render exactly as they do inside the Design System.
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/patterns/question-form/index.njk b/src/www/pages/tfwm/components/patterns/question-form/index.njk
new file mode 100644
index 00000000..495871f1
--- /dev/null
+++ b/src/www/pages/tfwm/components/patterns/question-form/index.njk
@@ -0,0 +1,127 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Question form" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
What does it do?
+
+
Asks a user questions which a service requires.
+
Helps to break down complex forms by spreading questions across multiple pages.
+
+
When to use it?
+
+
When you are asking users for information as part of a service.
+
When a form is required to be spread across multiple pages.
+
+
When not to use it?
+
+
When there are multiple questions on the same page, unless you have user research that says it makes sense to group the questions.
+
+
How it works?
+
+
Always test questions with users through user research
This shows the user all of the data they have entered before they submit the form. This stage allows the user to change any details before submitting the form.
+ {% from "wmcads/patterns/question/summary/_summary.njk" import wmcadsSummary %}
+ {% from "wmcads/components/table/_table.njk" import wmcadsTable %}
+ {% from "wmcads/components/button/_button.njk" import wmcadsButton %}
+ {{
+ compExample([
+ wmcadsSummary({
+ question: "Check your answers before reinstating your Direct Debit",
+ html:
+"
Now send your request
+
By submitting this request you are confirming that, to the best of your knowledge, the details you are providing are correct.
+ You consent to West Midlands Combined Authority possibly changing your Direct Debit date if it usually would occur in the next 10 days.
+ You also consent to West Midlands Combined Authority reinstating your Direct Debit instruction.
This is a confirmation message to show that the user has successfully submitted the data in the form, along with a reference or any information which the user needs to be made aware of.
+ {% from "wmcads/patterns/question/confirmation-message/_confirmation-message.njk" import wmcadsConfirmationMessage %}
+ {{
+ compExample([
+ wmcadsConfirmationMessage() | indent(4) | trim
+ ])
+ }}
+ {# End Confirmation Message #}
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/patterns/search/index.njk b/src/www/pages/tfwm/components/patterns/search/index.njk
new file mode 100644
index 00000000..01d64df5
--- /dev/null
+++ b/src/www/pages/tfwm/components/patterns/search/index.njk
@@ -0,0 +1,147 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Search" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
What does it do?
+
+
Allows the user to search for information across the West Midlands Combined Authority website
+
+
When to use it?
+
+
When a user needs to find the information they need, which they cannot find through the main navigation
+
+
How it works
+
+
Users should only be able to access the search function through the header by hovering or selecting the magnifying glass icon
+
The search bar will appear in a dropdown along with the ‘I want to…’ feature, where users can access popular search queries
+
Once a user submits their search query, they will be able to view the search results. They can sort and filter the search results on the search results page
+
+
+
+ {# Search bar #}
+
Search bar
+ {% from "wmcads/patterns/search/search-bar/_search-bar.njk" import wmcadsSearchbar %}
+ {{
+ compExample([
+ wmcadsSearchbar()
+ ])
+ }}
+ {# End Search bar #}
+
+
+
+ {# Sort #}
+
Sort
+
What does it do?
+
+
+ This gives the user the option to sort search results by relevance or when a page was last updated
+
This gives the user the option to filter search results using a predetermined set of filters
+
+
When to use it?
+
+
The filters will narrow down the search results by displaying pages which only match the filter criteria
+
On mobile, the filter options will appear when a user clicks on the ‘Filter your results button’. This will trigger an overlay where users can select and apply filters. This is to reduce page size on smaller devices
This is how a matching page will display in the search results page
+
+
How it works
+
+
Each page result will show the page breadcrumbs on desktop. On mobile, breadcrumbs are not shown. This is to reduce page size on smaller devices
+
The page description will display main body copy which is highest on the page. The description will be a maximum of 150 characters. Any descriptions longer than 150 characters will be truncated.
+
If the user’s search query is in the page description, it will be highlighted in bold. This is to help them understand the context of the page
+
The horizontal rule at the bottom of a search result is to make the results list easier to scan.
+
+ {% from "wmcads/patterns/search/search-result/_search-result.njk" import wmcadsSearchResult %}
+ {{
+ compExample([
+ wmcadsSearchResult(
+ {
+ pageTitle: "Swift: The smarter way to travel",
+ breadcrumbs: ['Home', 'Swift'],
+ excerpt: "Swift is the easy and flexible way to travel around the West Midlands. find the swift card for you. How do you travel? bus…"
+ }
+ )
+ ])
+ }}
+ {# End search result #}
+
+ {# Pagination #}
+
Pagination links
+
What does it do?
+
+
Allows the user to navigate through search results.
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/phase-indicator/index.njk b/src/www/pages/tfwm/components/phase-indicator/index.njk
new file mode 100644
index 00000000..114e87c9
--- /dev/null
+++ b/src/www/pages/tfwm/components/phase-indicator/index.njk
@@ -0,0 +1,39 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Phase indicators" %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
+ Helps users to identify when a service is in a development phase
+
+
+
+{# When #}
+
When to use it?
+
+
+ Every service that has not passed its public beta service assessment must have a phase indicator
+
+ Within the header pattern
+
+
+ Within the phase banner pattern
+
+
+
+
+ A service can either be in Alpha (prototype stage) or Beta (when it is on a publicly accessible website).
+
+
+ {% from "wmcads/components/phase-indicator/_phase-indicator.njk" import wmcadsPhaseIndicator %}
+ {% from "wmcads/components/phase-indicator/_phase-indicator-link.njk" import wmcadsPhaseIndicatorLink %}
+ {% from "www/_partials/component-example/component-example.njk" import compExample %}
+ {{
+ compExample([wmcadsPhaseIndicator()])
+
+ }}
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/portfolio-leads/index.njk b/src/www/pages/tfwm/components/portfolio-leads/index.njk
new file mode 100644
index 00000000..e545044a
--- /dev/null
+++ b/src/www/pages/tfwm/components/portfolio-leads/index.njk
@@ -0,0 +1,12 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Portfolio leads" %}
+{% from "wmcads/components/portfolio-leads/_portfolio-leads.njk" import wmcadsPortfolioLeads %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+{{
+ compExample([
+ wmcadsPortfolioLeads()
+ ])
+}}
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/share/index.njk b/src/www/pages/tfwm/components/share/index.njk
new file mode 100644
index 00000000..6a7a7fd7
--- /dev/null
+++ b/src/www/pages/tfwm/components/share/index.njk
@@ -0,0 +1,12 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Share" %}
+{% from "wmcads/components/share/_share.njk" import wmcadsShare %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+{{
+ compExample([
+ wmcadsShare()
+ ])
+}}
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js b/src/www/pages/tfwm/components/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js
new file mode 100644
index 00000000..8371607f
--- /dev/null
+++ b/src/www/pages/tfwm/components/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js
@@ -0,0 +1,71 @@
+function aToZContentStyleGuide() {
+ // FUNCTIONS
+ // Change accordion state
+ const changeAccordionState = (accordionElem, changeStateToOpen = true) => {
+ const accordionBtn = accordionElem.querySelector('.ds-accordion__summary-wrapper');
+ if (changeStateToOpen) {
+ accordionElem.classList.add('ds-is--open');
+ accordionBtn.setAttribute('aria-expanded', true);
+ } else {
+ accordionElem.classList.remove('ds-is--open');
+ accordionBtn.setAttribute('aria-expanded', false);
+ }
+ };
+
+ // Change all accordion states at once
+ const changeAllAccordionStates = changeStateToOpen => {
+ const accordions = document.querySelectorAll('main .ds-accordion');
+ accordions.forEach(accordion => changeAccordionState(accordion, changeStateToOpen));
+ };
+
+ // Scroll to an anchor within an accordion
+ const scrollToAnchor = idWithHash => {
+ // Check if element is on the page
+ const elem = document.querySelector(idWithHash);
+ if (!elem || elem.classList.contains('ds-accordion__summary-wrapper')) {
+ return;
+ }
+ // Open accordion and scroll to element
+ changeAccordionState(elem.parentElement.parentElement);
+ elem.scrollIntoView();
+ };
+
+ // Check for anchor to scroll to onload
+ const scrollToAnchorOnLoad = () => {
+ if (document.location.hash) {
+ scrollToAnchor(document.location.hash);
+ }
+ };
+
+ // Add event listener to all section links on the page
+ const setupScrollToAnchor = () => {
+ const anchors = document.querySelectorAll('main a[href^="#"]:not([href="#"])');
+ // Loop through an add event listener
+ anchors.forEach(anchor => {
+ anchor.addEventListener('click', e => {
+ e.preventDefault();
+ scrollToAnchor(anchor.hash);
+ });
+ });
+ };
+
+ // Set up controls
+ const setupAccordionControls = () => {
+ const controls = document.querySelectorAll('main .js-accordion-controls button');
+
+ controls.forEach(control => {
+ control.addEventListener('click', () => {
+ changeAllAccordionStates(control.classList.contains('js-accordion-controls-open'));
+ });
+ });
+ };
+
+ // CALL FUNCTIONS
+ if (document.querySelector('#atozofstyle')) {
+ scrollToAnchorOnLoad();
+ setupScrollToAnchor();
+ setupAccordionControls();
+ }
+}
+
+export default aToZContentStyleGuide;
diff --git a/src/www/pages/tfwm/components/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json b/src/www/pages/tfwm/components/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json
new file mode 100644
index 00000000..143a4f85
--- /dev/null
+++ b/src/www/pages/tfwm/components/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json
@@ -0,0 +1,538 @@
+{
+ "aToZOfStyles": [
+ {
+ "letter": "A",
+ "styles": [
+ {
+ "title": "Abbreviations and acronyms",
+ "content": "
The first time you use an abbreviation or acronym explain it in full on each page unless it's well known, like UK or BBC. Then refer to it by initials.
Do not use full stops in abbreviations: BBC, not B.B.C.
If you only use a term once, you don't need to include the abbreviation afterwards.
Use 'm' (for millions) and 'bn' (for billions) for sums of money and measurable quantities: £10bn; 1bn litres of water. However, spell out for people and countable nouns: 3 billion commuters; 10 billion tickets.
Use lower case for standard measurements: kg; km; lb; mph but use upper case for KB; GB; MB.
Exception: Spell out metres to prevent confusion with abbreviation for million.
Note:
Do not include a space between the number and the unit: 20km; 50kph; 100KB
Never add an 's' to measurements: 20km, not 20kms
Use lower case for ie and eg, but avoid using these terms altogether where possible. Use 'that is' or 'for example' instead.
Do not use hyphens in ages unless to avoid confusion, although it's always best to write in a way that avoids ambiguity. For example, 'a class of 15 16-year-old students took the A level course' can be written as '15 students aged 16 took the A level course'.
Write ages like this: XX years old (for example, 66 years old).
Exception - use hyphens when talking about age groups:
under-16s (n): under-16s
under 16 (adj): If you are under 16
over-60s (n): over-60s
over 60 (adj): If you are over 60
"
+ },
+ {
+ "title": "American and UK English",
+ "content": "
Use UK English spelling and grammar. For example, use 'organise' not 'organize', 'modelling' not 'modeling', and 'fill in a form', not 'fill out a form'.
American proper nouns, like 4th Mechanized Brigade or World Health Organization, take American English spelling.
"
+ },
+ {
+ "title": "Ampersand",
+ "content": "
Use and rather than &, unless it's a department's logo image or a company's name as it appears on the Companies House register.
You can use bullet points to make text easier to read. Make sure that:
you always use a lead-in line with a colon
the bullets make sense running on from the lead-in line
you use lower case at the start of the bullet
you do not use more than one sentence per bullet point - use commas or dashes to expand on an item
you do not put 'or' or 'and' after the bullets
you do not make the whole bullet a link if it's a long phrase
you do not put any punctuation at the end of a bullet
there is no full stop after the last bullet point
Bullets should normally form a complete sentence following from the lead text. But it's sometimes necessary to add a short phrase to clarify whether all or some of the points apply. For example, 'You can only register a pension scheme that is (one of the following):'
The number and type of examples in a list may lead the user to believe the list is exhaustive. This can be dealt with by
checking if there are other conditions (or if the list is actually complete)
listing the conditions which apply to the most users and removing the rest
consider broader terms in the list which capture more scenarios (and could make the list exhaustive)
Numbered steps
Use numbered steps instead of bullet points to guide a user through a process. List the things the user needs to do in order. You do not need a lead-in line. Steps end in a full stop because each should be a complete sentence.
If you have a scheme or campaign brand, explain the brand. Don't expect users to understand what you mean. If you say ‘be aware and share’ or ‘get your roll and stroll on’ out of context, it’s not clear what that means.
Don’t capitalise slogans like ‘be aware and share’. If you’re talking about a specific brand or campaign, use capitals. For example, Workwise, PassProtect. Don’t tell people to ‘Be Aware and Share’, but do say ‘the Be Aware and Share’ campaign.
For example:
'get half-price travel when you start a new job with the Workwise scheme'
'find your nearest cycle route on the Starley cycle network'
'hire a bike with West Midlands Cycle Hire'
'If you join the PassProtect scheme, you will get a discount if you need to replace your child's school travel pass.'
"
+ },
+ {
+ "title": "cash fare",
+ "content": "Do not use - it's confusing. Say 'ticket bought on the bus, train or tram on the day' instead."
+ },
+ {
+ "title": "Capitalisation",
+ "content": "
DO NOT USE BLOCK CAPITALS FOR LARGE AMOUNTS OF TEXT AS IT'S QUITE HARD TO READ.
Always use lower case, even in page titles. The exceptions to this are proper nouns.
You can use contractions to help make your text less formal.
Avoid negative contractions like can't and don't. Many users find them harder to read, or misread them as the opposite of what they say. Use cannot instead of can't; do not instead of don’t.
Avoid should've, could've, would've, they've too. These can also be hard to read.
Coronavirus is the virus which causes the illness COVID-19. Coronavirus is lower case.
"
+ },
+ {
+ "title": "council",
+ "content": "
Use lower case when writing about local councils in general. Use capitals for the official name of a local council, for example: Birmingham City Council.
do not use a comma between the month and year: 4 June 2017
when space is an issue - in tables or publication titles, for example - you can use truncated months: Jan, Feb
use 'to' in date ranges - not hyphens, en rules or em dashes. For example: tax year 2011 to 2012
Monday to Friday, 9am to 5pm (put different days on a new line, do not separate with a comma)
10 November to 21 December
do not use quarter for dates, use the months: 'Jan to Mar 2013'
when referring to today (as in a news article) include the date: 'The minister announced today (14 June 2012) that…'
Use 'to' instead of a dash or slash in date ranges. 'To' is quicker to read than a dash, and it's easier for screen readers.
Always explain what your date range represents, for example 'tax year 2013 to 2014' or 'September 2013 to July 2014'. Date ranges can be the academic year, calendar year or tax year. This is why date ranges must be very, very clear.
eg can sometimes be read aloud as 'egg' by screen reading software. Instead use 'for example' or 'such as' or 'like' or 'including' - whichever works best in the specific context.
etc can usually be avoided. Try using 'for example' or 'such as' or 'like' or 'including'. Never use etc at the end of a list starting with these words.
ie - used to clarify a sentence - is not always well understood. Try (re)writing sentences to avoid the need to use it. If that is not possible, use an alternative such as 'meaning' or 'that is'.
If you write content by starting with user needs, you will not need to use FAQs.
FAQs are discouraged because they:
duplicate other content on the site
cannot be front-loaded (putting the most important words people will search for), which makes usability difficult
mean that content is not where people expect to find it; it needs to be in context
can add to search results with duplicate, competing text
"
+ },
+ {
+ "title": "fine",
+ "content": "
Use 'fine' instead of 'financial penalty'.
For example, \"You'll pay a £50 fine.\""
+ },
+ {
+ "title": "first person",
+ "content": "
Use \"we'\" and \"us\" when addressing the user where possible. For example, instead of \"West Midlands Combined Authority has…\" say \"We have\" - it’s more personal.
Lower case unless it's a full title. For example: 'UK government', but 'Her Majesty's Government of the United Kingdom of Great Britain and Northern Ireland'.
Do not use a hyphen unless it's confusing without it, for example, a little used-car is different from a little-used car. You can also refer to The Guardian style guide for advice on hyphenation.
Front-load your link text with the relevant terms and make them active and specific. Do not use ‘click here’. Use text that describes the link instead.
"
+ },
+ {
+ "title": "Lists",
+ "content": "
Lists should be bulleted to make them easier to read. See bullets and steps.
Very long lists can be written as a paragraph with a lead-in sentence if it looks better: 'The following countries are in the EU: Spain, France, Italy...'
Use when talking about network bus tickets - always use a lower case ‘n’, upper case ‘B’.
"
+ },
+ {
+ "title": "nNetwork",
+ "content": "
Use when talking about network tickets for the bus, train and tram - always use a lower case ‘n’, followed by an upper case ‘N’.
"
+ },
+ {
+ "title": "nTrain",
+ "content": "
Use when talking about network train tickets - always use a lower case ‘n’, upper case ‘T’.
"
+ },
+ {
+ "title": "Numbers",
+ "content": "
Use 'one' unless you're talking about a step, a point in a list or another situation where using the numeral makes more sense: 'in point 1 of the design instructions', for example. Or this:
You'll be shown 14 clips that feature everyday road scenes.
There will be:
developing hazard in 13 clips
developing hazards in the other clip
Write all other numbers in numerals (including 2 to 9) except where it's part of a common expression like 'one or two of them' where numerals would look strange.
If a number starts a sentence, write it out in full (Thirty-four, for example) except where it starts a title or subheading.
For numerals over 999 - insert a comma for clarity: 9,000
Spell out common fractions like two-thirds.
Use a % sign for percentages: 50%.
Use a 0 where there's no digit before the decimal point.
Use '500 to 900' and not '500-900' (except in tables and for the 16-18 photocard).
Use MB for anything over 1MB: 4MB not 4096KB.
Use KB for anything under 1MB: 569KB not 0.55MB.
Keep it as accurate as possible and up to 2 decimal places: 4.03MB.
Addresses: use 'to' in address ranges: 49 to 53 Cherry Street.
Ordinal numbers
Spell out first to ninth. After that use 10th, 11th and so on.
Do not abbreviate the name. For example, do not use ‘WM Metro’, ‘NX West Midlands’ or ‘West Mids Railway’.
You can use an acronym for timetables and passenger information. For example, ‘West Midlands Metro (WMM)’, ‘National Express West Midlands (NXWM)’ or ‘West Midlands Railway (WMR)’.
Do not use the NXWM acronym without explaining it first. It is not a well known acronym.
"
+ },
+ {
+ "title": "or",
+ "content": "
Do not use slashes instead of \"or\". For example, do not say \"Do this 3/4 times\".
"
+ },
+ {
+ "title": "pay as you go",
+ "content": "
Do not hyphenate and always use lower case.
"
+ },
+ {
+ "title": "pay as you go credit",
+ "content": "
Use to describe Swift cards with a stored cash value
Note: Do not use 'pay as you go travel value (cash)' or 'pay as you go cash value'.
"
+ },
+ {
+ "title": "PDF",
+ "content": "Upper case. No need to explain the acronym."
+ },
+ {
+ "title": "plain English",
+ "content": "
Lower case plain and upper case English unless in a title: the Plain English Campaign.
All content should be written in plain English. You should also make sure you use language your audience will understand. Use the Plain English Campaign’s A to Z of alternative words to avoid complex language.
Phone numbers should be split into at least three groups of digits for readability, ideally with no more than four digits in any single group. For example: 020 7378 1705; 0343 222 6666; 0762 480 4299. See also the design pattern for contact details.
Use double quotation marks if using a quote within a quote.
If a quote runs on longer than one paragraph, include quotation marks at the beginning of each subsequent paragraph but only at the end of the final paragraph.
Place full stops and commas inside quotes when they are complete sentences, otherwise place them outside: 'I want to buy a ticket,' said Mr Smith; When he said 'I promise', he didn't really mean it.
use 'to' in time ranges, not hyphens, en rules or em dashes: 10am to 11am (not 10-11am) 5:30pm (not 1730hrs) midnight (not 00:00) midday (not 12 noon, noon or 12pm) 6 hours 30 minutes Midnight is the first minute of the day, not the last. You should consider using \"11:59pm\" to avoid confusion about a single, specific time.
For example, \"You must register by 11:59pm on Tuesday 14 June.\" can only be read one way, but \"You must register by midnight on Tuesday 14 June\" can be read in two ways (the end of Monday 13, or end of Tuesday 14).
Timetables and printed passenger information use the 24-hour clock in HHMM format.
"
+ },
+ {
+ "title": "tram",
+ "content": "
Not Metro.
"
+ },
+ {
+ "title": "tram stop",
+ "content": "
Not station.
"
+ },
+ {
+ "title": "Transport for West Midlands",
+ "content": "
Avoid referring to Transport for West Midlands (TfWM). Users don't need to know about it while getting travel advice.
Explaining the relationship between West Midlands Combined Authority, TfWM and West Midlands Combined Authority (WMCA) is complicated. Use \"we\" instead. For example, \"we manage the Key Route Network (KRN)\" with a link to the TfWM policy page.
Not \"zero-hour contract\" or \"zero hours contract\"
"
+ }
+ ]
+ }
+ ]
+}
diff --git a/src/www/pages/tfwm/components/styles/a-to-z-content-style-guide/index.njk b/src/www/pages/tfwm/components/styles/a-to-z-content-style-guide/index.njk
new file mode 100644
index 00000000..d1434b5c
--- /dev/null
+++ b/src/www/pages/tfwm/components/styles/a-to-z-content-style-guide/index.njk
@@ -0,0 +1,131 @@
+{% extends "www/_layouts/layout-fullwidth.njk" %}
+{% set pageTitle="A to Z content style guide" %} {% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{# Set array of tiles #}
+{% block content %}
+
+{# About the style guide #}
+
+
+
Writing content for West Midlands Combined Authority
+
+ You should create all content with user-focused content design principles. This means content has an identified
+ user need and is written in plain English.
+
+
+ Do not use marketing speak - users will be visiting your website to perform a task (for example, buy a train ticket or find out about Swift cards). Your content shouldn’t try to sell them anything - instead, tell them the information they need to know in the simplest way possible.
+
+
+ Research has shown that both high literacy and low literacy users prefer plain English because it takes less time to read. Users won’t be on your website for fun - so make the experience quick and easy.
+
+
+ To find out more about why plain language is important, read:
+
+
+ {{
+ wmcadsLink({
+ link: 'https://readabilityguidelines.co.uk/clear-language/',
+ linkTitle: 'advice about clear language',
+ contentText: 'advice about clear language'
+ })
+ }}
+ from the Readability Guidelines project
+
+
+ the
+ {{
+ wmcadsLink({
+ link: 'http://www.plainenglish.co.uk/the-a-z-of-alternative-words.html',
+ linkTitle: 'plain English Campaign’s A to Z of alternative words',
+ contentText: 'plain English Campaign’s A to Z of alternative words'
+ })
+ }}
+ - this helps you find a simple replacement for a complicated word
+
+
+
+
+ Read the
+ {{
+ wmcadsLink({
+ link: 'https://www.gov.uk/guidance/content-design/what-is-content-design',
+ linkTitle: 'GOV.UK introduction to content design',
+ contentText: 'GOV.UK introduction to content design'
+ })
+ }}
+ to find out more about content design principles.
+
+
Design Team can help you to test your content with user research.
+
+
About the A-Z of style guide
+
This style guide will help you to use consistent words across West Midlands Combined Authority services.
+
+ If something is not covered by this style guide, check the
+ {{
+ wmcadsLink({
+ link: 'https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style',
+ linkTitle: 'GOV.UK Style Guide',
+ contentText: 'GOV.UK style guide'
+ })
+ }}
+ . You can also email Samresha Purewal if you think something is missing from this guidance.
+
+
Introducing West Midlands Combined Authority
+
If you’re talking about day-to-day services (bus, train or tram), you
+ may need to make it clear that West Midlands Combined Authority does not run these.
For example, you could say: "We don’t run the buses, trains or trams. We can point you in the right direction if you need help."
+
Below are the list of West Midlands Combined Authority colour palettes.
+
+ We have tested our colours against the three most prevalent colour blind anomalies: protanopia, deuteranopia and tritanopia. While in some circumstances, particularly protanopia, colours can appear to be relatively similar.
+
+
+ These issues can be circumvented by not referring to specific colours. For instance, when referring to a green button with the word 'start' in, the phrase 'click the green button to start' would not be helpful. Instead, use 'click the start button', without a colour reference.
+
+
+ W3C AA Accessibility criteria requires the contrast of test to be enhanced, with a contrast ratio upwards of 3:1.
+
+
+ All brand/web colours meet this criteria, though the modal colour 'WM Railway' must only be used for iconography and graphical devices.
+
+
The background only colours can only be used as a background colour and they are not intended for any other use.
+
+
+{# Using in development #}
+
Using in development
+
wmcads SCSS
+
If you are using WMCA Design System's SCSS in development, you shouldn't use the HEX values! Instead you should always use the scss variables instead, for example use get-color(primary) instead of #3c1053. This ensures you are always using the most up-to-date colour. To find out more on how to use the get-color() function in SCSS, please refer to the notes for @function get-color() in _mixins.scss.
+
+
Without wmcads SCSS
+
If you are not using WMCA Design System's SCSS then it is recommended to use the hex values below. It is highly adviseable to set these up as variables in your development enviornment, this ensures that you can easily change them to keep up-to-date with our colour palettes.
+
If you'd like to see how we have set the variables up, you can check out $palettes in _vars.scss and @function get-color() in _mixins.scss.
+
+{# Brand colours #}
+
+
Brand colours
+
+ {% for color in colors.brand %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+
+{# Web colours #}
+
+
Web colours
+
+ {% for color in colors.web %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+
+{# Background Only colours #}
+
+
Background only colours
+
+ {% for color in colors.backgroundOnly %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+ Spacing can be applied in between .ds-col-* elements by adding a class to the parent .ds-grid.
+
+
+ The classes are named using the format .ds-grid--spacing-{col-count}-{size}.
+
+
+ Where {col-count} is the number of columns per row and {size} is the same as in the spacing utility classes above.
+
+
+ Spacing can also be applied responsively using the format .ds-grid--spacing-{breakpoint}-{col-count}-{size}.
+
+
+ Where {breakpoint} is one of breakpoint sizes described in the grid section.
+
+
+
When to use Grid column spacing
+
+
Use when you require more control over child item spacing
+
Use only when the number of child items do not change
+
+
+
Examples
+
+
Example 1
+
This example shows the use of the ds-content-card component displayed in a grid of thirds with spacing of 1rem.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+
Contact us
+
Get in touch if you want to know more about the budget.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+
Contact us
+
Get in touch if you want to know more about the budget.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
Example 2
+
This example shows the use of the ds-content-card component displayed in a half grid with spacing of 2rem.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
Example 3
+
This example shows the use of the ds-content-card component displayed in a half grid with spacing controlled by breakpoints.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
The default spacing is 0.75rem (ds-grid--spacing-2-sm). Once the page width goes over 768px the spacing changes to 1rem (ds-grid--spacing-md-2-md).
+
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/styles/examples/grid-examples.njk b/src/www/pages/tfwm/components/styles/examples/grid-examples.njk
new file mode 100644
index 00000000..52ec7236
--- /dev/null
+++ b/src/www/pages/tfwm/components/styles/examples/grid-examples.njk
@@ -0,0 +1,335 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Grid Examples" %}
+{% set section = "Styles" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
Introduction to wmcads Grids
+
Grid classes vs. unit classes
+
wmcads Grids consist of two types of classes: the grid class (ds-grid) and unit classes (ds-col-*)
+
The widths of the units are fractions
+
Units have various class names that represent their widths. For example, ds-u-1-2 has a width of 50%, whereas ds-u-1-5 would have a width of 20%.
+
All child elements of a grid must be units
+
Child elements contained within an element with a ds-grid classname must be a grid unit with a ds-col-* classname.
+
Content goes inside grid units
+
All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.
+
+
Examples
+
Let's start with a simple example. Here's a grid with three columns:
+
+
+
Thirds
+
Thirds
+
Thirds
+
+
+
+
+ {%- filter forceescape %}
+
+
Thirds
+
Thirds
+
Thirds
+
+ {%- endfilter %}
+
+
+
+
The above example will keep the columns the same width no matter the page width.
+
+
Adding responsive classes
+
We can control the width by adding responsive classes.
+
+
When using Responsive Grids, you can control how the grid behaves at specific breakpoints by adding class names. wmcads default responsive grids comes with the following class names and media query breakpoints.
+
+
+
Default Media Queries
+
+
+
Key
+
CSS Media Query
+
Applies
+
Classname
+
+
+
+
+
None
+
None
+
Always
+
.ds-col-*
+
+
+
sm
+
@media screen and (min-width: 35.5em)
+
≥ 568px
+
.ds-col-sm-*
+
+
+
md
+
@media screen and (min-width: 48em)
+
≥ 768px
+
.ds-col-md-*
+
+
+
lg
+
@media screen and (min-width: 64em)
+
≥ 1024px
+
.ds-col-lg-*
+
+
+
xl
+
@media screen and (min-width: 80em)
+
≥ 1280px
+
.ds-col-xl-*
+
+
+
+
+
Let's modify the example so the columns become full width on mobile:
+
+
+
Thirds
+
Thirds
+
Thirds
+
+
+
+
+ {%- filter forceescape %}
+
+
Thirds
+
Thirds
+
Thirds
+
+ {%- endfilter %}
+
+
+
+
The above example has a default width of 1 (ds-col-1) so when the page is viewed below 586px the columns will display full width. When the page is viewed over 586px the columns will appear in 3 coloumns (ds-col-sm-1-3).
+
+
+
Justify Content
+
+
You can justify the grid content bby adding these classes:
+
+
ds-grid--justify-between
+
Items will have space between them
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-around
+
Items will have space before, between, and after them
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-end
+
Items are positioned at the end of the container
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-center
+
Items are positioned in the center of the container
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-even
+
Items will have equal space around them
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/styles/icons/_icons.scss b/src/www/pages/tfwm/components/styles/icons/_icons.scss
new file mode 100644
index 00000000..d03435ca
--- /dev/null
+++ b/src/www/pages/tfwm/components/styles/icons/_icons.scss
@@ -0,0 +1,12 @@
+.website-icons {
+ svg {
+ width: 60px;
+ height: 60px;
+ padding: $size-sm;
+ fill: get-color(primary);
+ }
+
+ .text-center {
+ text-align: center;
+ }
+}
diff --git a/src/www/pages/tfwm/components/styles/icons/index.njk b/src/www/pages/tfwm/components/styles/icons/index.njk
new file mode 100644
index 00000000..76c42c7f
--- /dev/null
+++ b/src/www/pages/tfwm/components/styles/icons/index.njk
@@ -0,0 +1,188 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Icons" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{# The icon vars are an array that match the folders they come from in src/assets/icon/{foldername} #}
+{% set iconGeneral = [
+ "arrow",
+ "caret-down",
+ "caret-up",
+ "checkmark",
+ "chevron-right",
+ "circle-hollow",
+ "circle-solid",
+ "cross",
+ "expand",
+ "favourite",
+ "file",
+ "filter",
+ "id-card",
+ "info",
+ "location-arrow",
+ "minimise",
+ "paperclip",
+ "pdf",
+ "html",
+ "search",
+ "success",
+ "swap",
+ "trash",
+ "warning-circle",
+ "warning-triangle"
+] %}
+
+{% set iconSocial = [
+ "facebook",
+ "facebook-hex",
+ "twitter",
+ "twitter-hex",
+ "instagram",
+ "instagram-hex",
+ "linkedin",
+ "linkedin-hex",
+ "youtube",
+ "youtube-hex",
+ "email"
+] %}
+
+{% set iconPortfolio = [
+ "culture-and-digital",
+ "economy",
+ "environment",
+ "housing-and-land",
+ "inclusive-communities",
+ "skills",
+ "transport",
+ "wellbeing"
+] %}
+
+
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+
+{% block content %}
+{# How to use #}
+
About
+
+
What does it do?
+
+
+ Icons are images used in context to communicate a meaning (a visual representation of an object, action, or idea).
+
+
+
When to use it?
+
+
+ Only use icons and images if there’s a real user need.
+
+
+
When not to use it?
+
+
+ Do not use it for unnecessary decoration.
+
+
+
+
+{# Using Icons #}
+
Using icons
+
WMCA Design System icons are available as an SVG sprite to include in your HTML page.
+
How to use
+
Recommended
+
The Recommended method of using the icon sprite sheet is to refer directly to the one used in the design system. This ensures that your icons will always be up to date.
+
To get started, include the below snippet of javascript somewhere in your codebase. This will:
+
+
Pull the latest SVG icon spritesheet to be used within your web app or service
+
Will ensure the icons work with older browsers such as Internet Explorer 11
+
Keep the icon set consistent with other West Midlands Combined Authority Services
To display an icon or glyph, use an icon tag (from the icon section at the bottom of the page) with a href attribute and xlink:href (as a fallback). Make sure that the xlink and href tags are pointing to the location of your downloaded icon sprite sheet.
+
The ICON-TAG-NAME should be replaced with the icon tag name of the icon you want to show from the Icons section below, for example #ds-general-arrow should be in the xlink:href and href attributes of the svg's <use> element.
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/styles/images/index.njk b/src/www/pages/tfwm/components/styles/images/index.njk
new file mode 100644
index 00000000..e9dea0aa
--- /dev/null
+++ b/src/www/pages/tfwm/components/styles/images/index.njk
@@ -0,0 +1,29 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Images" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
An image tells a story, communicates a complex idea or supports page content by providing further details.
+
+{# When to #}
+
When to use it?
+
+
When there is a clear user need.
+
When an image serves a clear functional purpose.
+
All images, except decorative, must have alt text that describes the content and function of the image. This tells users using screen readers what information the image provides.
+
+{# When not to #}
+
When not to use it?
+
+
When an image is an unnecessary decoration.
+
When an image would create visual noise, which detracts attention away from the page content. This can distract the user from completing their task.
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/styles/index.njk b/src/www/pages/tfwm/components/styles/index.njk
new file mode 100644
index 00000000..9b5b722d
--- /dev/null
+++ b/src/www/pages/tfwm/components/styles/index.njk
@@ -0,0 +1,15 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Styles" %}
+{% set section = "Styles" %}
+{% set ds = 'mc' %}
+
+{% block content %}
+
Make your service look and feel like WMCA Design System.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples in the
+ Design System will not need any additional styling.
+
If you need to apply styles manually, you should still follow existing WMCA Design System conventions. For
+ example, do not assign
+ new meanings to colours, do not change the style of buttons or adjust the thickness of borders on
+ form inputs.
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/styles/layout/index.njk b/src/www/pages/tfwm/components/styles/layout/index.njk
new file mode 100644
index 00000000..219dae2d
--- /dev/null
+++ b/src/www/pages/tfwm/components/styles/layout/index.njk
@@ -0,0 +1,84 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Layout" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+{# Standard content template #}
+
Standard content template
+{# What #}
+
What does it do?
+
+
A template is based on 2/3 column for content and a 1/3 column right-hand side for widgets to publish functional content.
+
Content editors will be able to use the design system components in Umbraco to structure content effectively and create visual hierarchy.
+
+{# When #}
+
When to use it?
+
+
When you need to publish functional content based on a clear user task.
+
When your content enables users to complete a specific task. For example, Get a refund, Update a Direct Debit, Find discount vouchers etc.
+
+{# When not to #}
+
When not to use it?
+
+
When you need to create a page for a marketing campaign and you need to use promotional images.
+
+{# Guidance #}
+
Guidance for content editors
+
+
Only use a header image when there is a clear user need for the image and it serves a purpose. For example, on a 'Travel by tram' page, you may want to use a header image of a tram so users unfamiliar with the West Midlands Combined Authority will instantly know what our trams look like throughout the region.
+
Use the Link component in your body content if you want to direct the user to additional content. Do not use buttons for any links. Do not use the same link twice as this confuses users.
+
Only use buttons in your body content when a user needs to complete an action as part of a process, or if a user is confirming their details e.g. newsletter sign-up.
+
+
Warning text with exclamation mark icon component: Please read the Creating effective content section below before writing content or placing content into your page.
+
+
+
+{# Publicity campaign template #}
+
Publicity campaign template
+{# What #}
+
What does it do?
+
+
A template based on a flexible grid provides content editors with an option to create a marketing campaign page.
+
Content editors will be able to use the design system components in Umbraco to structure content effectively and create visual hierarchy.
+
+{# When to #}
+
When to use it?
+
+
When you want to create a marketing campaign to promote and introduce a new service or a product.
+
+{# When not to #}
+
When not to use it?
+
+
When you need to publish functional content based on a clear user task. For example, Get a refund, Update a Direct Debit, Find discount vouchers etc. For this, you will need to use the Standard content template.
+
+{# Guidance #}
+
Guidance for content editors
+
+
Use a header image to draw attention and to increase the visual appeal of the page. Our User research found that 78% of users prefer pages with header images, with the most popular reason being that they make the page look more attractive. Remember to keep your header image relevant to your content.
+
If you are creating a hub page, use Content cards to direct users to the other pages. For marketing campaign pages, please use Content cards with images as this helps users to locate information faster. We recommend using a total of four content cards on one page. However, you can use up to six content cards on a page if absolutely necessary.
+
Restrict the body copy to a maximum of three paragraphs. The body copy introduces the page and should be brief and to the point. The main content your users require needs to be as higher up the page as possible, to reduce scrolling time.
+
Marketing campaign pages should be user tested prior to going live. This is to identify if users can locate the content that they need. Generating heatmaps through Hotjar will help track how the pages are used.
+
+
+
+
+{# Creating effective content #}
+
Creating effective content
+
There is no minimum or maximum page length, however:
Always place content with higher importance at the top of the page, with less important content following after.
+
If you have to use long content, break it down into smaller sections to make it easier for user to understand information. You can:
+
+
Use Content cards for important content which you want to draw attention to. You can use a maximum of six content cards on a page. Do not use more than six because user research shows that users prefer less information, especially on the mobile. Our user research showed that content tiles with images help users locate relevant content faster.
+
Use the Accordion component to organise and group related information at the bottom of the page, below body copy and content tiles. Accordions can shorten pages and reduce scrolling when your content does not need to be read in full. We also recommend using accordions when space is at a premium and you are placing long content on a mobile interface or in a side panel.
Place the In-line navigation component on the left side of a desktop page so users can skip to the relevant section without scrolling. This is especially useful for users on mobile, as the page content component will be placed after the page title.
+ When creating a map use the
+ {{
+ wmcadsLink({
+ link: "https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e",
+ linkTitle: "WMCA Basemap",
+ linkTarget: "_blank",
+ contentText: "WMCA Basemap"
+ })
+ }} as your basemap layer. This is to ensure maps are consistent across West Midlands Combined Authority services.
+
+
The WMCA Basemap is a portal item, you can use the
+{{
+ wmcadsLink({
+ link: "https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html",
+ linkTitle: "ArcGIS Basemap documentation",
+ linkTarget: "_blank",
+ contentText: "ArcGIS Basemap documentation"
+ })
+ }} with the WMCA Basemap ID to include the basemap in your application.
+
+
+{# Example of code #}
+
Example of the ESRI ArcGIS JavaScript API
+
+
+ // ESRI ArcGIS JS code...
+ const basemap = new Basemap({
+ baseLayers: [
+ new VectorTileLayer({
+ portalItem: {
+ // set the baselayer to WMCA Basemap:
+ // https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e
+ id: '53f165a8863c4d40ba017042e248355e',
+ },
+ }),
+ ],
+ });
+
+ // Create a new map with the basemap set above
+ const map = new Map({
+ basemap,
+ });
+
+
+
+{# Can't use Esri ArcGIS #}
+
Can't use ESRI ArcGIS?
+
+ We understand that you may not always be able to use
+ {{
+ wmcadsLink({
+ link: "https://developers.arcgis.com/documentation/core-concepts/apis-sdks-apps/#choosing-an-arcgis-api-or-sdk",
+ linkTitle: "ArcGIS APIs and SDKs",
+ linkTarget: "_blank",
+ contentText: "ArcGIS APIs and SDKs"
+ })
+ }}.
+ In these situations, style your map as closely to the
+ {{
+ wmcadsLink({
+ link: "https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e",
+ linkTitle: "WMCA Basemap",
+ linkTarget: "_blank",
+ contentText: "WMCA Basemap"
+ })
+ }} as possible.
+
+
+
+
+{# User interface #}
+
User interface
+
+ User interface elements on a map such as zoom, pan and location buttons follow particular pattern rules when being used.
+
+
These pattern rules are:
+
+
Accessible for screen readers and keyboard navigation
+
User interface buttons must have 35px height and 35px width
+
User interface buttons must display in the top right of the map
+
The border radius must be 5px (slight curve on the corners)
+
The icon colour must be white
+
+ The background/fill colour of the buttons must use the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Information colour",
+ linkTarget: "_blank",
+ contentText: "Information colour"
+ })
+ }}
+
+
+ If it is the location button, the background/fill colour must be transparent and the border/icon colour must use the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Primary Purple colour",
+ linkTarget: "_blank",
+ contentText: "Primary Purple colour"
+ })
+ }}
+
+
+
+
+ When hovered, the background/fill colour must be 30% darker (mixed with black) of the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Information colour",
+ linkTarget: "_blank",
+ contentText: "Information colour"
+ })
+ }}
+ (#5c236d)
+
+
+ If it is the location button, the background/fill colour must be 70% lighter (mixed with white) of the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Secondary Purple colour",
+ linkTarget: "_blank",
+ contentText: "Secondary Purple colour"
+ })
+ }}
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/styles/typography/index.njk b/src/www/pages/tfwm/components/styles/typography/index.njk
new file mode 100644
index 00000000..ca9dff7e
--- /dev/null
+++ b/src/www/pages/tfwm/components/styles/typography/index.njk
@@ -0,0 +1,75 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Typography" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+{# About #}
+
About
+
+ We have tested our typography with users, including those with dyslexia and those with low vision. The questionnaire presented respondents with two body fonts, set out in different sizes, line spacing and kerning. The options were shown randomly for each participant.
+
+ Our findings were as such:
+
+
55.2% of respondents found Noto Sans easiest to read, with a further 24.1% of respondents having no preference
+
69% of respondents found a larger font size easiest to read, with a further 5.2% having no preference
+
55.2% of respondents preferred increased line spacing, with a further 12.1% having no preference
+
+
+
+ As a public sector organisation, in addition to testing the above we are required to meet WCAG 2.1 guidelines at AA standard.
+ Therefore, features will be useable when text size is increased up to 200% and content reflowed for 400%.
+
+
+{# Fonts #}
+
Fonts
+
+ We utilise Google Fonts in our typography and all fonts used are pre-bundled in our design system CSS, so you won't need to include them seperately.
+
+
+ Find below, various examples of our typography in use.
+
+
+{# DM Sans / Headings #}
+
DM Sans / headings
+
+ The font DM Sans is used with font weight of 700 (bold) for heading elements only.
+ DM Sans font reference
+
+
Things to note:
+
+
+ On mobile devices (less than 768px wide), the H1 and H2 elements are reduced in size by 15%.
+
+
+
+
46px - Heading 1
+
32px - Heading 2
+
23px - Heading 3
+
18px - Heading 4
+
+
+{# Noto sans / body copy #}
+
Noto Sans / body copy
+
+ The font Noto Sans is used with the font weight of 400 (regular) and 700 (bold) for all elements other than headings. The default font size used is 16px.
+ Noto Sans font reference
+
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/styles/utility-classes/index.njk b/src/www/pages/tfwm/components/styles/utility-classes/index.njk
new file mode 100644
index 00000000..ffe19480
--- /dev/null
+++ b/src/www/pages/tfwm/components/styles/utility-classes/index.njk
@@ -0,0 +1,276 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Utility classes" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+
+{% block content %}
+{# About #}
+
About
+
+ There are a variety of utility classes that can be used with the existing components and styles on.
+
+
+
+
+{# Containers #}
+
Containers
+
+ Containers are used to wrap content in a 'container'. The container will have a fixed max size and be centered on the page, it will adjust to 100% width when the page width is less than the container size.
+
+
+
+
+ .ds-container /* Container with max-width of 1280px */
+
+ /* This should be used on your main content section and will
+ add a margin top to seperate from header/breadcrumb section */
+ .ds-container.ds-container--main
+
+
+
+
+
+{# Grid #}
+
Grid
+
+ The WMCA Design System uses its own custom syntax grid system adopted from Pure CSS Grid. The grid system is already included in the bundled ds-components.min.css file so you don't need to include it seperately.
+
+
+
+ You can Refer to the Pure CSS Grid documentation for reference on how to use our grid system, but bear in mind that:
+
+
+
.pure-g becomes .ds-grid in our design system
+
.pure-u-* becomes .ds-col-* in our design system
+
+
+
+
You can also use modifier classes on the same element where the class .ds-grid is being used.
+ When you want to hide an element based on if the device width is a desktop or mobile device.
+
+
+
+
+ .ds-hide-mobile /* Hide only on mobile devices or smaller (less than 48em) */
+ .ds-hide-desktop /* Hide only on desktop devices or larger (greater than 48em) */
+ .ds-hide /* Hide on all devices */
+
+
+
+
+
Spacing
+
+ The spacing utility classes are used to adjust whitespace for an element via padding and margins.
+
+
Before using the spacing utility classes, please consider:
+
+
Most components already come with defined spacing. This spacing shouldn't be overwritten.
+
Spacing should be used as a last resort to help layout components on a page.
+
You can use none as a size to enforce zero margin or padding.
+
+
+
+ The classes are named using the format .ds-{type}-{side}-{size}.
+
+{# type #}
+
+ Where {type} is one of:
+
+
+
+ m - for classes that set margin
+
+
+ p - for classes that set padding
+
+
+{# side #}
+
+ Where {side} is one of:
+
+
+
+ t - for classes that set margin-top or padding-top
+
+
+ r - for classes that set margin-right or padding-right
+
+
+ b - for classes that set margin-bottom or padding-bottom
+
+
+ l - for classes that set margin-left or padding-left
+
+
+ blank - for classes that set a margin or padding on all 4 sides of the element
+
+
+{# size #}
+
+Where {size} is one of:
+
+
+
+ xs - set size to 0.25rem
+
+
+ xsm - set size to 0.5rem
+
+
+ sm - set size to 0.75rem
+
+
+ md - set size to 1rem
+
+
+ lg - set size to 2rem
+
+
+ xl - set size to 3rem
+
+
+
+
Some examples of using these utility classes...
+
+
+ .ds-m-xs // applies a margin of 0.25rem to all sides
+ .ds-p-b-lg // applies a padding-bottom of 2rem
+ .ds-m-l-none // sets left margin to 0
+
+
+
+{# Grid columns spacing #}
+
Grid column spacing
+
+
+ Spacing can be applied in between .ds-col-* elements by adding a class to the parent .ds-grid.
+
+
+ The classes are named using the format .ds-grid--spacing-{col-count}-{size}.
+
+
+ Where {col-count} is the number of columns per row and {size} is the same as in the spacing utility classes above.
+
+
+ Spacing can also be applied responsively using the format .ds-grid--spacing-{breakpoint}-{col-count}-{size}.
+
+
+ Where {breakpoint} is one of breakpoint sizes described in the grid section.
+
+
+
Some examples of using these utility classes...
+
+
+ .ds-grid--spacing-2-md // applies a 1rem spacing between 2 columns
+ .ds-grid--spacing-lg-4-lg // applies a 2rem spacing between 4 columns above a screen width of 1024px
+
+
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/table/index.njk b/src/www/pages/tfwm/components/table/index.njk
new file mode 100644
index 00000000..ba342b6e
--- /dev/null
+++ b/src/www/pages/tfwm/components/table/index.njk
@@ -0,0 +1,79 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Table" %}
+{% from "wmcads/components/table/_table.njk" import wmcadsTable %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+{# About #}
+
About
+
What does it do?
+
+
+ A table is used to make information easier for users to compare and scan
+
+
+
+ When to use it?
+
+
+
+ Use the table component to let users compare information in rows and columns.
+
+
+
+ When not to use it?
+
+
+
+ Never use the table component to layout content on a page. Instead, use the grid system.
+
+
+
+ How it works
+
+
+
+ You need to create a heading (title) for the table using <caption> tags. A caption helps users find, navigate and understand tables.
+
+
+ Use table headers to tell users what the rows and columns represent. Use the scope attribute to help users of assistive technology distinguish between row and column headers.
+
+
+ When comparing columns of numbers, align the numbers to the right in table cells.
+
+
+ If you are trying to display lots of columns, contact Design Team to discuss how best to achieve this.
+
Have your say on cycling & walking changes in your local area.
+
Lockdown has been quite a journey but cycling and walking is more popular than ever.
+
After marking this year the Big Summer of Cycling & Walking, let’s not stop now. We're continuing to invest in creating a region that supports healthy, greener and safer travelling. We want to help you get started or keep going.
+
Whatever your travel plans - whether it's a cycle around your local streets or a winter walkie - we're here to help you start the adventure before you get there. There’s never been a better time to stay fit and healthy than right now - so, get your roll & stroll on!
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isThirdCard: false,
+ title: 'Get Going Continue Rolling',
+ isDefault: true,
+ copy: 'Whether youre rolling to work or school, or catching some fresh air, theres always safe and new ways to get there.'
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isThirdCard: false,
+ title: 'All things strolling',
+ isDefault: true,
+ copy: 'Wherever youre heading, theres always new and safe ways to get there on foot. '
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isThirdCard: false,
+ title: 'Changes in your area',
+ isDefault: true,
+ copy: 'Understand what changes are being made in your area to help you travel safely'
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isThirdCard: false,
+ title: 'Get active and travel safely',
+ isDefault: true,
+ copy: 'Enjoy being physically active and travelling outdoors responsibly and safely. '
+ })
+ }}
+
+
+
+
+
Get the best from your bike
+
+
+
+
+
+
+ Some random subtitle
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
+
+
+
+
+
+
+
+
+
+
+ Some random subtitle
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
+
+
+
+
+
+
+
Additional Information
+
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isThirdCard: false,
+ title: 'Support for businesses',
+ isDefault: true,
+ copy: 'We have a wide range of options to support your business and employees at work and at home'
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isThirdCard: false,
+ title: 'Be Aware and Share',
+ isDefault: true,
+ copy: 'If you drive in the West Midlands be prepared to share the road space with more Rollers and Strollers.'
+ })
+ }}
+
Have your say on cycling & walking changes in your local area.
+
Lockdown has been quite a journey but cycling and walking is more popular than ever.
+
After marking this year the Big Summer of Cycling & Walking, let’s not stop now. We're continuing to invest in creating a region that supports healthy, greener and safer travelling. We want to help you get started or keep going.
+
Whatever your travel plans - whether it's a cycle around your local streets or a winter walkie - we're here to help you start the adventure before you get there. There’s never been a better time to stay fit and healthy than right now - so, get your roll & stroll on!
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Get Going Continue Rolling',
+ copy: 'Whether youre rolling to work or school, or catching some fresh air, theres always safe and new ways to get there.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'All things strolling',
+ copy: 'Wherever youre heading, theres always new and safe ways to get there on foot. '
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Changes in your area',
+ copy: 'Understand what changes are being made in your area to help you travel safely'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Get active and travel safely',
+ copy: 'Enjoy being physically active and travelling outdoors responsibly and safely. '
+ })
+ }}
+
+
+
+
Get the best from your bike
+
+
+
+
+
+
+ Some random subtitle
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
+
+
+
+
+
+
+
+
+
+
+ Some random subtitle
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
+
+
+
+
+
+
+
Additional Information
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Support for businesses',
+ copy: 'We have a wide range of options to support your business and employees at work and at home'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Be Aware and Share',
+ copy: 'If you drive in the West Midlands be prepared to share the road space with more Rollers and Strollers.'
+ })
+ }}
+
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/templates/content-one-column/content-template.scss b/src/www/pages/tfwm/components/templates/content-one-column/content-template.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/www/pages/tfwm/components/templates/content-one-column/index.njk b/src/www/pages/tfwm/components/templates/content-one-column/index.njk
new file mode 100644
index 00000000..eb79ee22
--- /dev/null
+++ b/src/www/pages/tfwm/components/templates/content-one-column/index.njk
@@ -0,0 +1,95 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="Content One Column" %} {% set section = "Templates" %}
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/content-card/_content-card.njk" import wmcadsContentCard %}
+{# Set array of tiles #}
+{% block content %}
+
+{# About the style guide #}
+
+
+
+
+
+
+
Adult Education Budget
+
From 2018, we’re responsible for the region's Adult Education Budget (AEB).
+
We target priority growth sectors from the Local Industrial Strategy. This improves skills and secure jobs in communities. It also helps to improve productivity in the region.
+
What the budget is
+
The budget helps residents and employers get the skills needed in the region. This helps people to get the jobs they need and increases the skills of current employees. It unlocks specialist training as well.
+
It also allows for more flexible and tailored learning programmes in the region. This helps people to take part in learning, build confidence and their wellbeing. It unlocks opportunities for more people.
+
Our challenges
+
We set out the challenges for the labour market in our Regional Skills Plan:
+
High levels of unemployment in some parts of the region
+ Poverty is growing for people who are working because of low wages
+ Low skill levels with less people qualified to skill level 4, or no qualifications at all
+ Employers struggle to find people with the skills they need
+
We use the budget to help improve confidence and opportunities for residents. It helps business find staff with the skills they need too.
+
Priorities for the budget
+
We will fund adult education through a range of delivery partners. Through commissioning, the budget will focus on:
+
Innovation
+
Looking at new ways of delivering learning. These will align with our priorities in the construction and digital sectors.
+
Talent & Progression
+
We'll develop new job schemes, and help build the skills of people in employment.
+
Collaboration
+
Working with our provider partners, we'll create an agile skills system. It will align to the needs of businesses and residents.
+
Sustainability
+
We're developing agreements with providers. These will check delivery against our key priorities. It will also track the impact of this approach.
+
+
+
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault : true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isDoubleCard: true,
+ title: 'Pharetra Sollicitudin Bibendum',
+ copy: 'Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.'
+ })
+ }}
+
+
+
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/templates/content-template/content-template.scss b/src/www/pages/tfwm/components/templates/content-template/content-template.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/www/pages/tfwm/components/templates/content-template/index.njk b/src/www/pages/tfwm/components/templates/content-template/index.njk
new file mode 100644
index 00000000..6c9b3333
--- /dev/null
+++ b/src/www/pages/tfwm/components/templates/content-template/index.njk
@@ -0,0 +1,98 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="Content Page Template" %} {% set section = "Templates" %}
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/content-card/_content-card.njk" import wmcadsContentCard %}
+{# Set array of tiles #}
+{% block content %}
+
+{# About the style guide #}
+
+
+
+
+
+
+
{{ pageTitle | safe}}
+
From 2018, we’re responsible for the region's Adult Education Budget (AEB).
+
We target priority growth sectors from the Local Industrial Strategy. This improves skills and secure jobs in communities. It also helps to improve productivity in the region.
+
What the budget is
+
The budget helps residents and employers get the skills needed in the region. This helps people to get the jobs they need and increases the skills of current employees. It unlocks specialist training as well.
+
It also allows for more flexible and tailored learning programmes in the region. This helps people to take part in learning, build confidence and their wellbeing. It unlocks opportunities for more people.
+
Our challenges
+
We set out the challenges for the labour market in our Regional Skills Plan:
+
High levels of unemployment in some parts of the region
+ Poverty is growing for people who are working because of low wages
+ Low skill levels with less people qualified to skill level 4, or no qualifications at all
+ Employers struggle to find people with the skills they need
+
We use the budget to help improve confidence and opportunities for residents. It helps business find staff with the skills they need too.
+
Priorities for the budget
+
We will fund adult education through a range of delivery partners. Through commissioning, the budget will focus on:
+
Innovation
+
Looking at new ways of delivering learning. These will align with our priorities in the construction and digital sectors.
+
Talent & Progression
+
We'll develop new job schemes, and help build the skills of people in employment.
+
Collaboration
+
Working with our provider partners, we'll create an agile skills system. It will align to the needs of businesses and residents.
+
Sustainability
+
We're developing agreements with providers. These will check delivery against our key priorities. It will also track the impact of this approach.
+
+
+
+
+ {{
+ wmcadsContentCard({
+ src: true,
+ isThirdCard: true,
+ title: 'Who weve funded',
+ copy: 'See which councils and providers weve funded, and what for.'
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ src: true,
+ isThirdCard: true,
+ title: 'Find training schemes',
+ copy: 'You can find training and education providers weve funded online.'
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ src: true,
+ isThirdCard: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+
+ {{
+ wmcadsContentCard({
+ src: true,
+ isDoubleCard: true,
+ title: 'Pharetra Sollicitudin Bibendum',
+ copy: 'Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.'
+ })
+ }}
+
+
+
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/templates/content-two-columns/content-template.scss b/src/www/pages/tfwm/components/templates/content-two-columns/content-template.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/www/pages/tfwm/components/templates/content-two-columns/index.njk b/src/www/pages/tfwm/components/templates/content-two-columns/index.njk
new file mode 100644
index 00000000..788810ec
--- /dev/null
+++ b/src/www/pages/tfwm/components/templates/content-two-columns/index.njk
@@ -0,0 +1,110 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="Content Two Columns" %} {% set section = "Templates" %}
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/content-card/_content-card.njk" import wmcadsContentCard %}
+{% from "wmcads/components/page-contents/_page-contents.njk" import wmcadsPageContents %}
+{# Set array of tiles #}
+{% block content %}
+
+
+
+
+
Roll & Stroll
+
+
+
+
+
+
+
+
+
+
+
Adult Education Budget
+
From 2018, we’re responsible for the region's Adult Education Budget (AEB).
+
We target priority growth sectors from the Local Industrial Strategy. This improves skills and secure jobs in communities. It also helps to improve productivity in the region.
+
What the budget is
+
The budget helps residents and employers get the skills needed in the region. This helps people to get the jobs they need and increases the skills of current employees. It unlocks specialist training as well.
+
It also allows for more flexible and tailored learning programmes in the region. This helps people to take part in learning, build confidence and their wellbeing. It unlocks opportunities for more people.
+
Our challenges
+
We set out the challenges for the labour market in our Regional Skills Plan:
+
High levels of unemployment in some parts of the region
+ Poverty is growing for people who are working because of low wages
+ Low skill levels with less people qualified to skill level 4, or no qualifications at all
+ Employers struggle to find people with the skills they need
+
We use the budget to help improve confidence and opportunities for residents. It helps business find staff with the skills they need too.
+
Priorities for the budget
+
We will fund adult education through a range of delivery partners. Through commissioning, the budget will focus on:
+
Innovation
+
Looking at new ways of delivering learning. These will align with our priorities in the construction and digital sectors.
+
Talent & Progression
+
We'll develop new job schemes, and help build the skills of people in employment.
+
Collaboration
+
Working with our provider partners, we'll create an agile skills system. It will align to the needs of businesses and residents.
+
Sustainability
+
We're developing agreements with providers. These will check delivery against our key priorities. It will also track the impact of this approach.
+
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isSrcDefault: true,
+ title: 'Contact us',
+ copy: 'Get in touch if you want to know more about the budget.'
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ clickable: true,
+ src: true,
+ isDoubleCard: true,
+ title: 'Pharetra Sollicitudin Bibendum',
+ copy: 'Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.'
+ })
+ }}
+
+
+
+
+
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/components/templates/document-foreword/index.njk b/src/www/pages/tfwm/components/templates/document-foreword/index.njk
new file mode 100644
index 00000000..7c4d0015
--- /dev/null
+++ b/src/www/pages/tfwm/components/templates/document-foreword/index.njk
@@ -0,0 +1,137 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="Local Transport Plan Green Paper" %} {% set section = "Templates" %}
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/page-contents/_page-contents.njk" import wmcadsPageContents %}
+{% from "wmcads/components/file-download/_file-download.njk" import wmcadsFileDownload %}
+{% from "wmcads/components/video-embed/_video-embed.njk" import wmcadsVideoEmbed %}
+{% from "wmcads/components/hub-header/_hub-header.njk" import wmcadsHubHeader %}
+{% from "wmcads/patterns/search/pagination/_pagination.njk" import wmcadsPagination %}
+{# Set array of tiles #}
+{% block content %}
+
+
+{{
+wmcadsHubHeader({
+ image: false,
+ title: "Local Transport Plan Green Paper"
+ })
+}}
+
+
+
+
+
Foreword
+
As well as being at the heart of the UK’s
+transport network, the West Midlands is at
+another kind of crossroads; one at which there
+is an opportunity to build back better from the
+COVID-19 pandemic, to ensure we can carry
+forward the reputation for economic success
+the region has built in the new millennium
+while improving the impacts of transport on
+our towns, cities and local communities.
+
+
This green paper sets out the challenges and
+opportunities facing our transport system to
+inspire deliberation with the public over the
+kind of transport system we want to see in the
+future. The decisions we make now about how
+we plan, invest in and manage our transport
+system will affect us all, as well as deciding
+what legacy we leave for future generations.
+
+
Over the past few years, the West Midlands has
+seen substantial improvements to its transport
+network. The West Midlands Metro has been
+extended through Birmingham city centre
+and a new line is under construction in the
+Black Country, connecting Wednesbury with
+Brierley Hill. We are improving our railways,
+with improved and new stations planned at
+Perry Barr, Darlaston, Willenhall, Aldridge and
+the revival of the old Camp Hill line. Fleets
+of electric buses are taking to the streets in
+increasing numbers. And our active travel
+revolution is well underway, with new cycling
+and walking routes springing up across the
+region. After decades of underinvestment, our
+region is beginning to turn things around.
+
+
But significant challenges remain in tackling
+the defining issues of our time, such as climate
+change, air quality, our health, and now our
+economic recovery from the pandemic. This
+paper poses some difficult questions about
+how we address these challenges. But it also
+offers real hope that, with a collective effort,
+we can create a West Midlands that leads the
+way in tackling these issues. We have a strong
+entrepreneurial and innovative heritage to build
+on. By thinking and acting differently we can
+create a place where transport improves the
+opportunities available to all our residents.
+
+
A key aim of this paper is to understand what
+our residents and communities want from their
+transport network. Your views will inform our
+new Local Transport Plan, due to be published
+later in the year.
+This green paper sets out five reasons why we
+should consider changing the way we travel.
+We call these our five Motives for Change.
+These are focussed on creating a fairer, greener,
+healthier, happier and more prosperous West
+Midlands. In particular, we want to know how
+the successive lockdowns have impacted our
+relationship with the transport network and how
+this should inform where we take the network in
+the coming years.
+This is the start of a conversation with
+residents, organisations and businesses on
+the kinds of changes we want to see in our
+transport system and the trade-offs required.
+So please engage with the prompts and issues
+raised in this paper and let us know what you
+think, so that together we can build a transport
+network that will
Getting transport right in our region requires us to have a plan for the future that balances the needs to provide access for everyone with the harmful impacts that transport can have on people and places.
+
This document sets out some of the big challenges that we need to address if we want transport to drive Inclusive Growth; sustainable and equitable growth where all citizens can shape, contribute and benefit from the advancement of the region.
+
These challenges are frames within the document as 5 Motives for Change.
+
+
Creating a fairer society
+
Supporting local communities and places
+
Becoming more active
+
Tackling the climate emergency
+
Sustaining economic success
+
+
+
Alternative formats
+ {{
+ wmcadsFileDownload({
+ html: false,
+ htmlInfo: true,
+ default: false,
+ htmlDoc: false,
+ pdfDoc: true,
+ dlName: 'Download Local Transport Plan Green Paper (pdf, 7.88MB)'
+ })
+ }}
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/templates/document-paper/index.njk b/src/www/pages/tfwm/components/templates/document-paper/index.njk
new file mode 100644
index 00000000..6e18a07f
--- /dev/null
+++ b/src/www/pages/tfwm/components/templates/document-paper/index.njk
@@ -0,0 +1,104 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="Reimagining transport in the West Midlands - WMLTP5 Green Paper" %} {% set section = "Templates" %}
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/page-contents/_page-contents.njk" import wmcadsPageContents %}
+{% from "wmcads/components/file-download/_file-download.njk" import wmcadsFileDownload %}
+{% from "wmcads/components/video-embed/_video-embed.njk" import wmcadsVideoEmbed %}
+{# Set array of tiles #}
+{% block content %}
+
+
+
+
+
+
Reimagining transport in the West Midlands - WMLTP5 Green Paper
+
+
+
+
+ {{
+ wmcadsVideoEmbed({
+ })
+ }}
+
+
TfWM is in the process of supporting the WMCA to update its current Local Transport Plan (LTP). This is a document that sets out the policies to promote safe, integrated, efficient and economic transport to, from and within our area as well as plans to implement those policies.
+
Publishing and reviewing the LTP is one of WMCA’s core statutory duties as the Local Transport Authority for the area covered by the West Midlands seven metropolitan districts/boroughs.
+
+
Why do we need a Green Paper?
+
Getting transport right in our region requires us to have a plan for the future that balances the needs to provide access for everyone with the harmful impacts that transport can have on people and places. We’ve published a Green Paper to start a conversation about what a new Local Transport Plan should look like.
+
We will use the Green Paper to drive engagement with people, businesses and other key stakeholders across the region. We want you to get involved and work with us together, so we can get it right for where you live and work.
+
The COVID-19 pandemic has hit our region hard but it has also shown us how adaptable we can be and that change can bring new opportunities and benefits. We want to build back better from the pandemic. Doing so will need us to think about how transport can better support a prosperous and well-connected West Midlands which is fairer, greener and healthier.
+
+
Our Motives for Change
+
We think there are some big challenges that we need to address if we want transport to drive Inclusive Growth; sustainable and equitable growth where all citizens can shape, contribute and benefit from the advancement of the region. We’ve framed these challenges in our 5 Motives for Change.
+
+
Creating a fairer society
+
Supporting local communities and places
+
Becoming more active
+
Tackling the climate emergency
+
Sustaining economic success
+
+
The Motives for Change are all important, but the need to tackle the climate emergency has a particular urgency that the other Motives for Change lack. Current predictions suggest that if we don’t rapidly reduce our carbon emissions, by 2030 we could face a global scenario in which we lose the ability to prevent escalating climate change and the harm it will cause around the world and in the West Midlands. That is why WMCA has declared a climate emergency and set a zero-carbon target for the West Midlands by 2041, with the first of four 5-year plans already published.
+
This suggests a new LTP could have a much stronger focus on achieving transformational change within the next 10 years, rather than focussing on a longer-term vision and more gradual change. This presents us with the opportunity to rapidly reimagine transport to deliver transformative improvement in the lives of millions of people across our region, and for the West Midlands to demonstrate leadership in tackling global and local problems.
+ {{
+ wmcadsFileDownload({
+ html: true,
+ default: true,
+ htmlName: 'Local Transport Plan Green Paper'
+ })
+ }}
+
+
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/templates/document-section/index.njk b/src/www/pages/tfwm/components/templates/document-section/index.njk
new file mode 100644
index 00000000..b8869507
--- /dev/null
+++ b/src/www/pages/tfwm/components/templates/document-section/index.njk
@@ -0,0 +1,60 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="Local Transport Plan Green Paper" %} {% set section = "Templates" %}
+{# Imports #}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/page-contents/_page-contents.njk" import wmcadsPageContents %}
+{% from "wmcads/components/hub-header/_hub-header.njk" import wmcadsHubHeader %}
+{% from "wmcads/patterns/search/pagination/_pagination.njk" import wmcadsPagination %}
+{% from "wmcads/components/images/_image-with-summary.njk" import wmcadsImageWithSummary %}
+{# Set array of tiles #}
+{% block content %}
+
+
+{{
+wmcadsHubHeader({
+ image: false,
+ title: "Local Transport Plan Green Paper"
+ })
+}}
+
+
+
+
+
Section 3: Our Motives for Change
+
Inclusive Growth in the West Midlands means that all citizens can shape, contribute and benefit from the advancement of the region.
+
It is a deliberate and socially purposeful model of economic growth – measured not only by how fast or aggressive it is; but also by how well it is shared across the whole population and place, and the capacity of our environment to sustain it.
+
WMCA’s goal for Inclusive Growth is to occupy a space where social need, economic ambition and our responsibilities to the environment are in balance.
+
+ {{
+ wmcadsImageWithSummary({
+ img: "/img/examples/diagram.png",
+ title: "Inclusive Growth Framework",
+ summary: "The space for a balanced, inclusive economy is where social challenges can be met without degrading the environment"
+ })
+ }}
+
+
Transport’s relationship with Inclusive Growth is complex:
+
+
Meeting many of our needs and ambitions relies on transport connections
+
But those same transport connections have impacts that the environment can’t sustain and which are detrimental to other social and economic outcomes; and
+
Improving connections for a particular group of people, by a particular mode, to particular places can limit and even worsen connectivity elsewhere for others.
Combined Authorites are set up to improve their region’s economies. We invest in the region through collaboration with our partners, but we don’t replace local councils.
+ {{
+ wmcadsContentCard({
+ src: true,
+ title: 'WMCA donates computers to school children to tackle digital divide',
+ copy: '150 old staff laptops will be donated to Wowdot',
+ isNews: true,
+ isNewsSub: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ src: true,
+ title: 'WMCA donates computers to school children to tackle digital divide',
+ copy: '150 old staff laptops will be donated to Wowdot',
+ isNews: true,
+ isNewsSub: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ src: true,
+ title: 'Historic devolution agreement reached',
+ copy: 'The Government will contribute 40 million over the next 30 years',
+ isNews: true,
+ isNewsSub: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ src: true,
+ title: 'Historic devolution agreement reached',
+ copy: 'The Government will contribute 40 million over the next 30 years',
+ isNews: true,
+ isNewsSub: true
+ })
+ }}
+
+ {{
+ wmcadsContentCard({
+ src: true,
+ isSrcDefault: true,
+ title: 'Coronavirus support',
+ copy: 'Get advice and support during the pandemic such as finding a new job and applying for business grants.',
+ clickable: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ src: true,
+ isSrcDefault: true,
+ title: '2021 Mayoral election',
+ copy: 'Find out what the Mayor is reponsible for and how to vote.',
+ clickable: true
+ })
+ }}
+
+
+ {{
+ wmcadsContentCard({
+ title: 'Upskill yourself in lockdown',
+ copy: 'Find out what the Mayor is reponsible for and how to vote.',
+ clickable: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ title: 'Thrive at Work',
+ copy: 'Join our free workplace wellbeing scheme to keep staff healthy, motivated and productive.',
+ clickable: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ title: 'Annual Plan 2021 - 2022',
+ copy: 'We’ve set our ambitions for each of our priorities over the next year.',
+ clickable: true
+ })
+ }}
+
+
+
Upcoming events
+
+ {{
+ wmcadsContentCard({
+ eventTitle: 'Mayors Mentors',
+ eventCopy: 'Find out about the Mayor’s Mentors scheme and how it can help you grow.',
+ clickable: true,
+ isEvent: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ eventTitle: 'Greater Birmingham LEP Skills Day',
+ eventCopy: 'Hear from employers and training providers on upskilling opportunities available.',
+ clickable: true,
+ isEvent: true
+ })
+ }}
+ {{
+ wmcadsContentCard({
+ eventTitle: 'Sprint exhibition - Walsall',
+ eventCopy: 'Learn and ask questions about the upcoming Sprint works in the region.',
+ clickable: true,
+ isEvent: true
+ })
+ }}
+
Example templates that make up the main West Midlands Combined Authority Website
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/components/templates/news-article/index.njk b/src/www/pages/tfwm/components/templates/news-article/index.njk
new file mode 100644
index 00000000..afa8b6f6
--- /dev/null
+++ b/src/www/pages/tfwm/components/templates/news-article/index.njk
@@ -0,0 +1,68 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %}
+{% set pageTitle="News Article" %} {% set section = "Templates" %}
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/content-card/_content-card.njk" import wmcadsContentCard %}
+{% from "wmcads/components/page-contents/_page-contents.njk" import wmcadsPageContents %}
+{# Set array of tiles #}
+{% block content %}
+
+
+
+
+
+
+
Mayor highlights HS2 jobs boost as new contractor for Curzon Street station development is unveiled
+
Published: Monday 10 May 2021
+
HS2 Ltd today confirmed that a team made up of Mace and Dragados will build Birmingham’s new city centre high speed railway station, in a deal that is set to further boost the West Midlands economy.
+
The deal, which is worth up to £570m, will see Mace Dragados work with HS2 Ltd in two stages to finalise the detailed design and then build the landmark station.
+
The station itself will be net zero carbon in operation and adopt the latest eco-friendly design and sustainable technologies, including capturing rainwater and utilising sustainable power generation, with over 2,800m2 of solar panels located on platform canopies.
+
+
Mayor of the West Midlands Andy Street welcomed the announcement and the major role HS2 will play in the regional recovery after the pandemic. He said:
+
“HS2 is at the heart of my plans to create 100,000 jobs in just two years to help the West Midlands recover from the coronavirus pandemic, and so I am absolutely thrilled by today’s news.
+
“Not only is this a major shot in the arm for our region’s construction sector that was performing so well pre-Covid, but the building of Curzon Street is also set to create hundreds of jobs.
+
“That’s local jobs for local people at such a difficult time, and I will ensure we continue to run construction training courses so residents can get the skills they need to take on these new roles.
+
“I’m also excited to see the commitment from HS2 ltd that the station will be net-zero, helping the West Midlands in its battle against the climate emergency and in our aim to become carbon neutral by 2041.
+
It is designed to meet a ‘BREEAM excellent’ standard, which is an industry recognised standard for buildings that reduce energy usage and materials waste and minimise their impact on the natural environment.
+
Mace and Dragados have a strong track record delivering some of the world’s most complex and exciting infrastructure projects, including the refurbishment of Birmingham New Street, Battersea Power Station (phase 2) and work on delivering the Spanish high speed rail network, including the major new Madrid Atocha and Barcelona Sants stations. They are also working together in a separate joint venture delivering HS2’s London terminus at Euston.
+
HS2 Ltd’s chief executive, Mark Thurston said:
+
“Birmingham Curzon Street is right at the heart of the HS2 project, providing a fantastic terminus for trains running right into the heart of the city centre. The station will play a vital role in the long-term economic future of the West Midlands, creating hundreds of jobs during construction and boosting the region after the pandemic.
+
“Mace and Dragados have some incredible experience delivering some of the world’s most challenging and exciting infrastructure projects, and I look forward to welcoming them to the team.
+
HS2 Minister Andrew Stephenson said:
+
“This is a huge moment for Birmingham and for HS2. The brand new, world class HS2 station at Birmingham Curzon Street will place the city at the beating heart of the new HS2 network.
+
“It marks a major investment in Birmingham’s future as we build back better from Covid-19 - breathing new life into the city centre, supporting hundreds of new skilled jobs and helping forge better connections across the whole country.
+
HS2 worked with WSP and Grimshaw Architects LLP on the design for Curzon Street, which is inspired by the great arched roofs built by the Victorian railway pioneers. The design takes that inspiration into the 21st Century, ensuring accessibility and a focus on the open space and landscaping around it.
+
Passengers will also be to access up to nine high speed trains an hour travelling north and south, and the Midland Metro - which runs alongside and underneath the station. Accessible pedestrian routes will connect to local bus services, Sprint rapid transit bus services and local rail services from the neighbouring Moor Street station. Cycle parking has also been incorporated, providing space for more than 550 bicycles.
+
Significant progress has already been made on site at Curzon Street. Site clearance is now complete and a massive archaeological programme, involving 70 archaeologists, has unearthed the world’s oldest railway roundhouse.
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "New transport system will be sprinting for success at Commonwealth Games",
+ date: "Thursday 23 August 2018",
+ excerpt: "Top athletes are not the only ones aiming to be in peak condition for the 2022 Commonwealth Games in Birmingham – the region’s transport system is also..."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "Mayor tells business leaders why the West Midlands should be seen as a leading net zero region",
+ date: "Thursday 23 August 2018",
+ excerpt: "Mayor of the West Midlands Andy Street has told a cross-sector audience of local decision makers why the West Midlands should be seen as one of the UK’s leading regions in supporting the race to net zero."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "First of the new generation of bus shelters unveiled as work continues on the Sprint rapid bus route",
+ date: "Thursday 23 August 2018",
+ excerpt: "The first of a new generation of bus shelters has been unveiled in Perry Barr, Birmingham ready for the introduction of the Sprint rapid bus route next year."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "First of the new generation of bus shelters unveiled as work continues on the Sprint rapid bus route",
+ date: "Thursday 23 August 2018",
+ excerpt: "The first of a new generation of bus shelters has been unveiled in Perry Barr, Birmingham ready for the introduction of the Sprint rapid bus route next year."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "First of the new generation of bus shelters unveiled as work continues on the Sprint rapid bus route",
+ date: "Thursday 23 August 2018",
+ excerpt: "The first of a new generation of bus shelters has been unveiled in Perry Barr, Birmingham ready for the introduction of the Sprint rapid bus route next year."
+ }
+ )}}
+
+ {{wmcadsPagination({
+ pageCount: 6,
+ activePage: 1
+ })}}
+
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "HS2 Ltd",
+ breadcrumbs: true,
+ date: "Thursday 23 August 2018",
+ excerpt: "High Speed Two (HS2) is the new railway that will be the backbone of Britain’s transport network. High Speed Two Limited (HS2 Ltd) is the company developing..."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "Connectivity",
+ breadcrumbs: true,
+ date: "Thursday 23 August 2018",
+ excerpt: "HS2 will place the West Midlands at the heart of the UK’s transport network, with two new stations in the region, the interchange at Solihull and the new Curzon Street..."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "New transport system will be sprinting for success at Commonwealth Games",
+ breadcrumbs: true,
+ date: "Thursday 23 August 2018",
+ excerpt: "Top athletes are not the only ones aiming to be in peak condition for the 2022 Commonwealth Games in Birmingham – the region’s transport system is also..."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "Our Vision",
+ breadcrumbs: true,
+ date: "Thursday 23 August 2018",
+ excerpt: "High Speed 2 (HS2) will have a truly transformational impact on the West Midlands. As well as the economic benefits of investment in high speed rail infrastructure..."
+ }
+ )}}
+ {{wmcadsSearchResult(
+ {
+ pageTitle: "Network Resilience",
+ breadcrumbs: true,
+ date: "Thursday 23 August 2018",
+ excerpt: "We are experiencing an unprecedented level of investment in bringing much needed improvements to the way that people and goods are able to move around the West..."
+ }
+ )}}
+
+ {{wmcadsPagination({
+ pageCount: 8,
+ activePage: 1
+ })}}
+
",
smallTitle: true,
readMore: true,
- link: '/templates/',
+ link: '/tfwm/templates/',
linkText: 'Read more about templates',
linkTitle: 'Templates'
})
diff --git a/src/www/pages/tfwm/patterns/autocomplete/index.njk b/src/www/pages/tfwm/patterns/autocomplete/index.njk
new file mode 100644
index 00000000..0f829eb8
--- /dev/null
+++ b/src/www/pages/tfwm/patterns/autocomplete/index.njk
@@ -0,0 +1,135 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Autocomplete" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{# Imports #}
+{% from "wmcads/patterns/autocomplete/_autocomplete.njk" import wmcadsAutocomplete %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+ The autocomplete component is an input field that offers the user text suggestions as they type.
+ This is often done by hitting an API endpoint with the users query when the user has finished typing.
+
+
+ The autocomplete pattern is a combination of the input and loader components.
+
+{# When #}
+
When to use it?
+
+
As a progressive enhancement to make a users journey shorter/easier when searching
+
When you have a smaller data set/list that is quick to query
+
When you want to ensure the user submits a relevant query/value
+
+{# When not #}
+
When not to use it?
+
+
When you have a massive set of data, instead you should have an input/search that shows results after submission.
+
Don't use this component as if it is a search box. Autocomplete is to suggest a value to a user via it's results not act as a results page for a search.
+
+
+
+{# Default #}
+
Default state
+
In its default state, the autcomplete component is made up of a text input with a search icon.
+
For best practice, ensure that the placeholder and aria-label describes what the autocompletes intended purpose is.
+
Notice that there is also a ds-loader component nested within the autocomplete, more on that in the next section.
+ When a user types in a query, you may want to have some code that hits an API or gets the data/suggestions for the autocomplete from somewhere. To help users understand that they need to wait for something we can change the autocomplete to a loading state.
+ We do this by adding the class ds--is-loading to the top level of the autocomplete (this is the only difference between the loading state and default state code snippets).
+
+
As mentioned in the previous section, there is a ds-loader component nested in the autocomplete. When adding the ds--is-loading class, it will hide the search icon and show the loading spinner in it's place.
+
Below is an example of how the autocomplete looks when a user has typed in 'My query' and is waiting for autocomplete suggestions to load.
+
+
It is good practice to:
+
+
Show loading state when waiting for data to load
+
Let the user finish typing before you fetch autocomplete suggestions (add a debounce)
+
Add the ds-is--loading class as soon as you are fetching data
The final state of the autocomplete is showing the suggestions.
+
You'll notice there is a new section in the code snippet called ds-autocomplete-suggestions, this should be shown/visible when your API/data has loaded the suggestions.
+
It's good practice to:
+
+
Show the suggestions in an unordered list
+
Ensure there is a title tag on the .ds-autocomplete-suggestions__li describing further information about the suggestion
+
Ensure there is a tabindex="0" attribute on the .ds-autocomplete-suggestions__li to allow users to tab through the results with a keyboard
+
+
+
Default (text)
+
The most commonly used suggestions will be displayed as text only.
You will notice that the suggestions are much bigger than text only results, and have an overflow scrollbar. This scrollbar will appear if the height of the suggestion container goes over a certain height.
+
+ As you can see from the code snippet, the main ds-autocomplete-suggestions and ds-autocomplete-suggestions__li classes are prevelant on the ul and li elements. Within the li element we have nested the disruption indicator component whilst also using the wmcads grid. This gives enough flexibility to style the suggestions to how we want, find out more in the next section.
+
There are many ways in which you can show the suggestions, as the autocomplete component has been built in a way that the suggestion results can be custom styled to how you like.
+
+ As long as you have the ul element with the class ds-autocomplete-suggestions which contains a direct child li element that has the class ds-autocomplete-suggestions__li then you can fully customise how you want the suggestions to look.
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/patterns/banner/index.njk b/src/www/pages/tfwm/patterns/banner/index.njk
new file mode 100644
index 00000000..f7eee3ec
--- /dev/null
+++ b/src/www/pages/tfwm/patterns/banner/index.njk
@@ -0,0 +1,273 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Banner" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/banner/_banner.njk" import wmcadsBanner %}
+
+{% block content %}
+
+{% markdown %}
+
+## Normal
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentHTML: "This is a new service - your feedback will help us to improve it."
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+
+{% markdown %}
+
+{# Banner with phase indicator #}
+
+## With phase indicator
+
+{# What #}
+
+### 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 #}
+
+### When to use it?
+
+- When a service is new
+
+{# When not to #}
+
+### When not to use it?
+
+- On a service that has matured and has a steadily positive rate of satisfaction
+
+{# How #}
+
+### 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).
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ phase: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+
+{% markdown %}
+
+{# Emergency banner #}
+
+## Emergency banner
+
+{# What #}
+
+
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 #}
+
+
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 #}
+
+
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 #}
+
+
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 #}
+
+### Sitewide
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentText: "Emergency notification title",
+ emergency: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{% markdown %}
+{# On-page #}
+
+### On-page variant
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmcadsBanner({
+ contentText: "Emergency notification title",
+ emergency: true,
+ onPage: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/banner/",
+ njk: true,
+ njkProps: wmcadsBannerProps,
+ js: false,
+ iframe: false
+ })
+}}
+{% markdown %}
+
+{# Hub page banner #}
+
+## Hub page banner
+
+{# What #}
+
+
What does it do?
+
+- Helps users to identify they have eventered a Hub section of the website
+- Provides users with a short description of the chosen hub of the WMCA
+
+{# When #}
+
+
When to use it?
+
+- Only on Hub Landing Pages
+
+
When not to use it?
+
+- On pages where the content is not related to a hub overview
+
+
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, optional logo or icon will change for each hub landing page.
+
+{% endmarkdown %}
+
+{% from "wmcads/patterns/hub-page-banner/_hub-page-banner.njk" import wmcadsHubPageBanner %}
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ contentHTML: "Example using a short description"
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ contentHTML: "Example using an example brand logo with a longer text description",
+ logo: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{{
+ compExample([
+ wmcadsHubPageBanner({
+ title: "Hub Header with a longer example title"
+ })
+ ], {
+ componentPath: "wmcads/patterns/hub-page-banner/",
+ njk: true,
+ njkProps: wmcadsHubPageBannerProps,
+ js: false,
+ iframe: true
+ })
+}}
+
+{% markdown %}
+
+{# Homepage banner #}
+
+## Homepage
+
+{# What #}
+
+
What does it do?
+
+- Provides a complementary image associated with the West Midlands
+- Highlights a welcome message for visitors of the West Midlands Combined Authority site
+
+{# When #}
+
+
A card with disruption indicator components in, which show the live status of a bus, train or tram route and roads.
+
+{# When to #}
+
When to use it?
+
+
When the live status of a mode of transport is useful to the content. For example, showing the live status of train lines next to content about trains.
+
+{# When not to #}
+
When not to use it?
+
+
When the live status is irrelevant to the content. Users can find this information on the homepage.
+
+
+{# Set up travel updates #}
+{% from "wmcads/patterns/content-cards/travel-updates/_travel-updates.njk" import wmcadsContentCardTravelUpdates %}
+
+{{
+ compExample([
+ wmcadsContentCardTravelUpdates()
+ ])
+}}
+
+
+{# Button card #}
+
Button card
+{# What #}
+
What is it?
+
+
A card with several buttons in.
+
+{# When to #}
+
When to use it?
+
+
To direct users to different content relevant to their needs.
+
At the end of the main page content. We found that users preferred to split lots of content into smaller, specific pages and that this was the best way to continue the journey after reading the main overview content.
+
+{# When not to #}
+
When not to use it?
+
+
To attract the user's attention if there is no benefit to them reading the content.
+
To list links within a section or related content. Use the in-line navigation card instead.
+
+
+{# Set up buttons #}
+{% from "wmcads/patterns/content-cards/buttons/_buttons.njk" import wmcadsContentCardButtons %}
+
+{{
+ compExample([
+ wmcadsContentCardButtons()
+ ])
+}}
+
+
+{# Image card #}
+
Image card
+{# What #}
+
What is it?
+
+
A card with an image in.
+
+{# When to #}
+
When to use it?
+
+
To display an image within a tile.
+
When the image complements the text.
+
+{# When to to #}
+
When not to use it?
+
+
When the image has text in. This distracts the user and usually fails accessibility criteria.
+
When the image is a cartoon or illustration. These are called vector images. Vector images display as poor quality for many users.
+
+
+{# Set up image #}
+{% from "wmcads/patterns/content-cards/image/_image.njk" import wmcadsContentCardImage %}
+
+{{
+ compExample([
+ wmcadsContentCardImage()
+ ])
+}}
+
+
+{# In-line navigation card #}
+
In-line navigation card
+{# What #}
+
What is it?
+
+
A card with in-text links for navigation of sections and displaying related content.
+
+{# When to #}
+
When to use it?
+
+
To help the user navigate a collection of pages. This is called a section.
+
To show related content which meets user needs.
+
To help the user navigate a long page using in-text anchors.
+
Only use this pattern in a sidebar.
+
+{# When not to #}
+
When not to use it?
+
+
When the page links you are listing to form part of a journey or process. The journey should be linear.
+
When you are trying to attract the user's attention. This is called a call-to-action.
+
+{# How to #}
+
How to use it
+
+
The group of links must have a title to help users understand what the links are for. For example, 'Related content', 'On this page' or the section name.
+
If the card is used to navigate a long page of content, it should be displayed on the left-hand side.
+
If the card is used to navigate a set of pages, like a section or related content, it should be displayed on the right-hand side.
+
The current page or section being viewed must be inset.
+
+
+{# Set up inline navigation #}
+{% from "wmcads/patterns/content-cards/inline-navigation/_inline-navigation.njk" import wmcadsContentCardInlineNavigation %}
+
+{{
+ compExample([
+ wmcadsContentCardInlineNavigation()
+ ])
+}}
+
+{# With current page #}
+
Allows the user to sign up for updates when information changes on a page.
+
Sends personalised updates to users based on their location.
+
+{# When to #}
+
When to use it?
+
+
Use these content tiles on pages where users can sign-up for newsletter updates.
+
For a standard newsletter sign up, use the content tile where the text fields expand.
+
If you want to capture additional user data, then use the content block which links to an external form, e.g. Campaign Monitor.
+
+
When adding a sign up form from Campaign Monitor, you are provided with HTML markup, but make sure not to change any of the generated attributes except for classes.
+
They have been changed in the following examples to avoid accessibility errors.
+
+
+{# Set up email sign up #}
+{% from "wmcads/patterns/content-cards/email-sign-up/_email-sign-up.njk" import wmcadsContentCardEmailSignUp %}
+
+{# Collapsed #}
+
Collapsed
+
This is the default state for the email sign up card.
Use this content card when you want to send users to an external Campaign Monitor form if you want to capture more user data such as demographics, travel habits etc.
Allows users to accept or amend our website's cookie settings.
+
Our cookie preferences should be confirmed before a user can use our website.
+
The Manage cookies pattern allows users to change their cookie preferences.
+
+
+
+
Cookie banner
+{# When to #}
+
When to use it?
+
+
+ When a user first visits the West Midlands Combined Authority website and has not accepted or amended the cookie preferences.
+
+
+ The banner should be above the header on every page and only disappear when a user has accepted or amended their
+ cookie preferences.
+
+
+{# When not to #}
+
When not to use it?
+
+
When a user has accepted or amended the website's cookies.
+
+ When a returning user visits the West Midlands Combined Authority website and has already accepted or amended their cookies in
+ a previous session.
+
+
+{# How #}
+
How it works
+
+
When a user has accepted or amended the website's cookies.
+
+ When a returning user visits the West Midlands Combined Authority website and has already accepted or amended their cookies in
+ a previous session.
+
+
+
The Cookies banner should be placed above the main header and be on every page
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 Transport for West Midlands 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 ds-footer--mobile-app to the ds-footer element
+
+
+
+ You will most likely want to use this with the mobile variants of the
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'header pattern',
+ link: '#mobile-app-header'
+ })
+ }} .
+
+
+{{
+ compExample([
+ wmcadsFooter({
+ app: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/footer/",
+ njk: false,
+ js: true
+ })
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/patterns/header-and-footer/index.njk b/src/www/pages/tfwm/patterns/header-and-footer/index.njk
new file mode 100644
index 00000000..8e42881b
--- /dev/null
+++ b/src/www/pages/tfwm/patterns/header-and-footer/index.njk
@@ -0,0 +1,212 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Header and footer" %}
+{% set section="Patterns" %}
+{# Imports #}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+{% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+{%- from "wmcads/components/link/link/_link.njk" import wmcadsLink -%}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
The primary way of navigating the website
+
Standardised pattern
+
+{# When #}
+
When to use it?
+
+
Every page must have a header and a footer
+
+
+
+
+
+
+{# Header #}
+
Header
+{# Skip Link #}
+
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 ds-main-content so the user can skip to this section.
+{# Logo #}
+
Logo
+
This must always be the West Midlands Combined Authority logo.
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 #}
+
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 #}
+
Search
+
This functionality only shows for desktop and tablet users. When clicked, search expands and takes over the whole page.
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 .ds-header__title .ds-col-1 .ds-col-sm-auto on the element
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 Combined Authority header.
+
+
To use the mobile app variant:
+
+
Add the modifier class ds-header--mobile-app to the ds-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
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'footer pattern',
+ link: '#mobile-app-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 Combined Authority 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 ds-footer--mobile-app to the ds-footer element
+
+
+
+ You will most likely want to use this with the mobile variants of the
+ {{ wmcadsLink({
+ contentText: 'breadcrumb component',
+ link: '/components/breadcrumb/#mobile-app-breadcrumb'
+ })
+ }} and
+ {{ wmcadsLink({
+ contentText: 'header pattern',
+ link: '#mobile-app-header'
+ })
+ }} .
+
+
+{{
+ compExample([
+ wmcadsFooter({
+ app: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/footer/",
+ njk: false,
+ js: true
+ })
+}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/patterns/header-demo/index.njk b/src/www/pages/tfwm/patterns/header-demo/index.njk
new file mode 100644
index 00000000..c32de977
--- /dev/null
+++ b/src/www/pages/tfwm/patterns/header-demo/index.njk
@@ -0,0 +1,220 @@
+
+
+
+ {% include "www/_partials/_head.njk" %}
+
+
+
+
+
+ {# header #}
+ {% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+ {{
+ wmcadsHeader({
+ id: "mega-menu-example",
+ search: true,
+ searchSuggestions: ["See live departures", "Find a timetable", "Check for disruptions", "Manage my Swift card", "Find ticket prices", "Get a refund", "Update Direct Debit", "Apply for a 16-18 photocard"],
+ navItems: [{
+ name: "Plan a journey",
+ subnavItems: [{
+ name: "Plan your journey",
+ icon: "general-route",
+ subnavItems: [{
+ name: "Journey planner"
+ },
+ {
+ name: "Find a timetable"
+ },
+ {
+ name: "Live and planned disruptions"
+ },
+ {
+ name: "Major roadworks and events"
+ }]
+ },
+ {
+ name: "Ways to travel",
+ icon: "general-location-arrow",
+ subnavItems: [{
+ name: "Walking"
+ },
+ {
+ name: "Cycling"
+ },
+ {
+ name: "Buses"
+ },
+ {
+ name: "Trains"
+ },
+ {
+ name: "Trams"
+ },
+ {
+ name: "Park and ride"
+ },
+ {
+ name: "Driving"
+ }]
+ },
+ {
+ name: "Travel information",
+ icon: "general-info",
+ subnavItems: [{
+ name: "How to travel with accessibility needs"
+ },
+ {
+ name: "How to travel safely"
+ },
+ {
+ name: "How to get to hospital"
+ }]
+ },
+ {
+ name: "Discover our region",
+ icon: "general-star",
+ subnavItems: [{
+ name: "Places and attractions to visit"
+ },
+ {
+ name: "Find discount vouchers"
+ }]
+ }]
+ }, {
+ name: "Swift and tickets",
+ subnavItems: [{
+ name: "Find a ticket",
+ icon: "general-search",
+ subnavItems: [{
+ name: "Ticket finder"
+ },
+ {
+ name: "Types of ticket"
+ }]
+ },
+ {
+ name: "Discounts and free travel passes",
+ icon: "general-wallet",
+ subnavItems: [{
+ name: "Under 18s"
+ },
+ {
+ name: "Students"
+ },
+ {
+ name: "Families and groups"
+ },
+ {
+ name: "Finding or starting a new job"
+ },
+ {
+ name: "Disabled person's pass"
+ },
+ {
+ name: "Older person's pass"
+ },
+ {
+ name: "WASPI women's pass"
+ }]
+ },{
+ name: "Manage your Swift card",
+ icon: "swift-bird-icon",
+ subnavItems: [{
+ name: "How to use your Swift card"
+ },
+ {
+ name: "Update your personal details"
+ },
+ {
+ name: "Top up your Swift card"
+ },
+ {
+ name: "View your payment history"
+ },
+ {
+ name: "View your travel history"
+ },
+ {
+ name: "Replace your lost Swift card"
+ }]
+ },{
+ name: "Manage your ticket",
+ icon: "general-ticket",
+ subnavItems: [
+ {
+ name: "Update your Direct Debit"
+ },
+ {
+ name: "Get a refund"
+ },
+ {
+ name: "Make a payment"
+ },
+ {
+ name: "Replace your lost ticket or pass"
+ }
+ ]
+ }]
+ },{
+ name: "Get help",
+ subnavItems: [{
+ name: "Contact an operator"
+ },
+ {
+ name: "Find a travel centre"
+ },
+ {
+ name: "Find lost property"
+ },
+ {
+ name: "Give feedback"
+ },
+ {
+ name: "Contact us"
+ },
+ {
+ name: "Report anti-social behaviour"
+ },
+ {
+ name: "Request a new bus shelter or stop pole"
+ },
+ {
+ name: "Report a problem with a shelter or stop"
+ }]
+ }],
+ megaMenu: true
+ })
+ }}
+ {# header #}
+
+
+ {# main #}
+
+ Close window
+
+ {# main #}
+
+
+ {% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+ {{
+ wmcadsFooter({
+ bottomMenu: [{
+ name: "Privacy & Cookies Policy",
+ link: "https://www.wmca.org.uk/privacy-cookies-policy/"
+ }]
+ })
+ }}
+
+
+
+ {% include "www/_partials/_scripts.njk" %}
+
+
+
+
diff --git a/src/www/pages/tfwm/patterns/header/index.njk b/src/www/pages/tfwm/patterns/header/index.njk
new file mode 100644
index 00000000..423c907b
--- /dev/null
+++ b/src/www/pages/tfwm/patterns/header/index.njk
@@ -0,0 +1,305 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Header" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{# Imports #}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %}
+{% from "wmcads/patterns/header-v2/_header-v2.njk" import wmcadsHeaderV2 %}
+{% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/warning-text/_warning-text.njk" import wmcadsWarningText %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
The primary way of navigating the website
+
Standardised pattern
+
+{# When #}
+
When to use it?
+
+
Every page must have a header and a footer
+
+
+
+{# Header #}
+
Header
+{# Skip Link #}
+
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 ds-main-content so the user can skip to this section.
+{# Logo #}
+
Logo
+
This must always be the Transport for West Midlands logo.
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 #}
+
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 #}
+
Search
+
This function expands the mega menu and reveals the search bar along with the ‘I want to…’ feature.
+
The ‘I want to...’ feature shows a list of the top page links which users access through search. This is to help users find the information they are searching for faster. These links are regularly updated using search data to maintain their relevance.
+
On mobile, the mega menu search function uses a primary purple background instead of the standard white background. Our user testing found users preferred the white link text on the primary purple background as it is clearer to read.
+
+{{
+ compExample([
+ wmcadsHeaderV2({
+ id: "mega-menu-example",
+ search: true,
+ placeholder: "fg",
+ brand: "wmca",
+ navItems: [{
+ name: "The Mayor",
+ subnavItems: [{
+ name: "Plan your journey",
+ icon: "general-route",
+ subnavItems: [{
+ name: "Journey planner"
+ },
+ {
+ name: "Find a timetable"
+ },
+ {
+ name: "Live and planned disruptions"
+ },
+ {
+ name: "Major roadworks and events"
+ }]
+ },
+ {
+ name: "Ways to travel",
+ icon: "general-location-arrow",
+ subnavItems: [{
+ name: "Walking"
+ },
+ {
+ name: "Cycling"
+ },
+ {
+ name: "Buses"
+ },
+ {
+ name: "Trains"
+ },
+ {
+ name: "Trams"
+ },
+ {
+ name: "Park and ride"
+ },
+ {
+ name: "Driving"
+ }]
+ },
+ {
+ name: "Travel information",
+ icon: "general-info",
+ subnavItems: [{
+ name: "How to travel with accessibility needs"
+ },
+ {
+ name: "How to travel safely"
+ },
+ {
+ name: "How to get to hospital"
+ }]
+ },
+ {
+ name: "Discover our region",
+ icon: "general-star",
+ subnavItems: [{
+ name: "Places and attractions to visit"
+ },
+ {
+ name: "Find discount vouchers"
+ }]
+ }]
+ }, {
+ name: "Who we are",
+ subnavItems: [{
+ name: "Find a ticket",
+ icon: "general-search",
+ subnavItems: [{
+ name: "Ticket finder"
+ },
+ {
+ name: "Types of ticket"
+ }]
+ },
+ {
+ name: "Discounts and free travel passes",
+ icon: "general-wallet",
+ subnavItems: [{
+ name: "Under 18s"
+ },
+ {
+ name: "Students"
+ },
+ {
+ name: "Families and groups"
+ },
+ {
+ name: "Finding or starting a new job"
+ },
+ {
+ name: "Disabled person's pass"
+ },
+ {
+ name: "Older person's pass"
+ },
+ {
+ name: "WASPI women's pass"
+ }]
+ },{
+ name: "Manage your Swift card",
+ icon: "swift-bird-icon",
+ subnavItems: [{
+ name: "How to use your Swift card"
+ },
+ {
+ name: "Update your personal details"
+ },
+ {
+ name: "Top up your Swift card"
+ },
+ {
+ name: "View your payment history"
+ },
+ {
+ name: "View your travel history"
+ },
+ {
+ name: "Replace your lost Swift card"
+ }]
+ },{
+ name: "Manage your ticket",
+ icon: "general-ticket",
+ subnavItems: [
+ {
+ name: "Update your Direct Debit"
+ },
+ {
+ name: "Get a refund"
+ },
+ {
+ name: "Make a payment"
+ },
+ {
+ name: "Replace your lost ticket or pass"
+ }
+ ]
+ }]
+ },{
+ name: "What we do",
+ subnavItems: [{
+ name: "Contact an operator"
+ },
+ {
+ name: "Find a travel centre"
+ },
+ {
+ name: "Find lost property"
+ },
+ {
+ name: "Give feedback"
+ },
+ {
+ name: "Contact us"
+ },
+ {
+ name: "Report anti-social behaviour"
+ },
+ {
+ name: "Request a new bus shelter or stop pole"
+ },
+ {
+ name: "Report a problem with a shelter or stop"
+ }]
+ },{
+ name: "In my area"
+ },{
+ name: "Contact us"
+ }],
+ megaMenu: true,
+ megaMenuDemo: true
+ })
+ ], {
+ componentPath: "wmcads/patterns/header-v2/",
+ njk: false,
+ js: true,
+ iframe: true
+ })
+}}
+
+{# With title variant #}
+
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 .ds-header__title .ds-col-1 .ds-col-sm-auto on the element
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/patterns/index.njk b/src/www/pages/tfwm/patterns/index.njk
new file mode 100644
index 00000000..03e8d073
--- /dev/null
+++ b/src/www/pages/tfwm/patterns/index.njk
@@ -0,0 +1,16 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Patterns" %}
+{% set section = "Patterns" %}
+{% set ds = 'tfwm' %}
+
+{% block content %}
+
Patterns are reusable parts of the user interface that have been made to support a variety of
+ applications.
+
+
Individual patterns can be used in multiple different patterns and contexts. For example, the
+ text input component
+ can be used to ask for an email address, a National Insurance number or someone’s name.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples provided
+ will render exactly as they do inside the Design System.
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/patterns/question-form/index.njk b/src/www/pages/tfwm/patterns/question-form/index.njk
new file mode 100644
index 00000000..495871f1
--- /dev/null
+++ b/src/www/pages/tfwm/patterns/question-form/index.njk
@@ -0,0 +1,127 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Question form" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
What does it do?
+
+
Asks a user questions which a service requires.
+
Helps to break down complex forms by spreading questions across multiple pages.
+
+
When to use it?
+
+
When you are asking users for information as part of a service.
+
When a form is required to be spread across multiple pages.
+
+
When not to use it?
+
+
When there are multiple questions on the same page, unless you have user research that says it makes sense to group the questions.
+
+
How it works?
+
+
Always test questions with users through user research
This shows the user all of the data they have entered before they submit the form. This stage allows the user to change any details before submitting the form.
+ {% from "wmcads/patterns/question/summary/_summary.njk" import wmcadsSummary %}
+ {% from "wmcads/components/table/_table.njk" import wmcadsTable %}
+ {% from "wmcads/components/button/_button.njk" import wmcadsButton %}
+ {{
+ compExample([
+ wmcadsSummary({
+ question: "Check your answers before reinstating your Direct Debit",
+ html:
+"
Now send your request
+
By submitting this request you are confirming that, to the best of your knowledge, the details you are providing are correct.
+ You consent to West Midlands Combined Authority possibly changing your Direct Debit date if it usually would occur in the next 10 days.
+ You also consent to West Midlands Combined Authority reinstating your Direct Debit instruction.
This is a confirmation message to show that the user has successfully submitted the data in the form, along with a reference or any information which the user needs to be made aware of.
+ {% from "wmcads/patterns/question/confirmation-message/_confirmation-message.njk" import wmcadsConfirmationMessage %}
+ {{
+ compExample([
+ wmcadsConfirmationMessage() | indent(4) | trim
+ ])
+ }}
+ {# End Confirmation Message #}
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/patterns/search/index.njk b/src/www/pages/tfwm/patterns/search/index.njk
new file mode 100644
index 00000000..01d64df5
--- /dev/null
+++ b/src/www/pages/tfwm/patterns/search/index.njk
@@ -0,0 +1,147 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Search" %}
+{% set section="Patterns" %}
+{% set ds = 'wmca' %}
+
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
What does it do?
+
+
Allows the user to search for information across the West Midlands Combined Authority website
+
+
When to use it?
+
+
When a user needs to find the information they need, which they cannot find through the main navigation
+
+
How it works
+
+
Users should only be able to access the search function through the header by hovering or selecting the magnifying glass icon
+
The search bar will appear in a dropdown along with the ‘I want to…’ feature, where users can access popular search queries
+
Once a user submits their search query, they will be able to view the search results. They can sort and filter the search results on the search results page
+
+
+
+ {# Search bar #}
+
Search bar
+ {% from "wmcads/patterns/search/search-bar/_search-bar.njk" import wmcadsSearchbar %}
+ {{
+ compExample([
+ wmcadsSearchbar()
+ ])
+ }}
+ {# End Search bar #}
+
+
+
+ {# Sort #}
+
Sort
+
What does it do?
+
+
+ This gives the user the option to sort search results by relevance or when a page was last updated
+
This gives the user the option to filter search results using a predetermined set of filters
+
+
When to use it?
+
+
The filters will narrow down the search results by displaying pages which only match the filter criteria
+
On mobile, the filter options will appear when a user clicks on the ‘Filter your results button’. This will trigger an overlay where users can select and apply filters. This is to reduce page size on smaller devices
This is how a matching page will display in the search results page
+
+
How it works
+
+
Each page result will show the page breadcrumbs on desktop. On mobile, breadcrumbs are not shown. This is to reduce page size on smaller devices
+
The page description will display main body copy which is highest on the page. The description will be a maximum of 150 characters. Any descriptions longer than 150 characters will be truncated.
+
If the user’s search query is in the page description, it will be highlighted in bold. This is to help them understand the context of the page
+
The horizontal rule at the bottom of a search result is to make the results list easier to scan.
+
+ {% from "wmcads/patterns/search/search-result/_search-result.njk" import wmcadsSearchResult %}
+ {{
+ compExample([
+ wmcadsSearchResult(
+ {
+ pageTitle: "Swift: The smarter way to travel",
+ breadcrumbs: ['Home', 'Swift'],
+ excerpt: "Swift is the easy and flexible way to travel around the West Midlands. find the swift card for you. How do you travel? bus…"
+ }
+ )
+ ])
+ }}
+ {# End search result #}
+
+ {# Pagination #}
+
Pagination links
+
What does it do?
+
+
Allows the user to navigate through search results.
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js b/src/www/pages/tfwm/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js
new file mode 100644
index 00000000..8371607f
--- /dev/null
+++ b/src/www/pages/tfwm/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.js
@@ -0,0 +1,71 @@
+function aToZContentStyleGuide() {
+ // FUNCTIONS
+ // Change accordion state
+ const changeAccordionState = (accordionElem, changeStateToOpen = true) => {
+ const accordionBtn = accordionElem.querySelector('.ds-accordion__summary-wrapper');
+ if (changeStateToOpen) {
+ accordionElem.classList.add('ds-is--open');
+ accordionBtn.setAttribute('aria-expanded', true);
+ } else {
+ accordionElem.classList.remove('ds-is--open');
+ accordionBtn.setAttribute('aria-expanded', false);
+ }
+ };
+
+ // Change all accordion states at once
+ const changeAllAccordionStates = changeStateToOpen => {
+ const accordions = document.querySelectorAll('main .ds-accordion');
+ accordions.forEach(accordion => changeAccordionState(accordion, changeStateToOpen));
+ };
+
+ // Scroll to an anchor within an accordion
+ const scrollToAnchor = idWithHash => {
+ // Check if element is on the page
+ const elem = document.querySelector(idWithHash);
+ if (!elem || elem.classList.contains('ds-accordion__summary-wrapper')) {
+ return;
+ }
+ // Open accordion and scroll to element
+ changeAccordionState(elem.parentElement.parentElement);
+ elem.scrollIntoView();
+ };
+
+ // Check for anchor to scroll to onload
+ const scrollToAnchorOnLoad = () => {
+ if (document.location.hash) {
+ scrollToAnchor(document.location.hash);
+ }
+ };
+
+ // Add event listener to all section links on the page
+ const setupScrollToAnchor = () => {
+ const anchors = document.querySelectorAll('main a[href^="#"]:not([href="#"])');
+ // Loop through an add event listener
+ anchors.forEach(anchor => {
+ anchor.addEventListener('click', e => {
+ e.preventDefault();
+ scrollToAnchor(anchor.hash);
+ });
+ });
+ };
+
+ // Set up controls
+ const setupAccordionControls = () => {
+ const controls = document.querySelectorAll('main .js-accordion-controls button');
+
+ controls.forEach(control => {
+ control.addEventListener('click', () => {
+ changeAllAccordionStates(control.classList.contains('js-accordion-controls-open'));
+ });
+ });
+ };
+
+ // CALL FUNCTIONS
+ if (document.querySelector('#atozofstyle')) {
+ scrollToAnchorOnLoad();
+ setupScrollToAnchor();
+ setupAccordionControls();
+ }
+}
+
+export default aToZContentStyleGuide;
diff --git a/src/www/pages/tfwm/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json b/src/www/pages/tfwm/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json
new file mode 100644
index 00000000..143a4f85
--- /dev/null
+++ b/src/www/pages/tfwm/styles/a-to-z-content-style-guide/_a-to-z-content-style-guide.njk.json
@@ -0,0 +1,538 @@
+{
+ "aToZOfStyles": [
+ {
+ "letter": "A",
+ "styles": [
+ {
+ "title": "Abbreviations and acronyms",
+ "content": "
The first time you use an abbreviation or acronym explain it in full on each page unless it's well known, like UK or BBC. Then refer to it by initials.
Do not use full stops in abbreviations: BBC, not B.B.C.
If you only use a term once, you don't need to include the abbreviation afterwards.
Use 'm' (for millions) and 'bn' (for billions) for sums of money and measurable quantities: £10bn; 1bn litres of water. However, spell out for people and countable nouns: 3 billion commuters; 10 billion tickets.
Use lower case for standard measurements: kg; km; lb; mph but use upper case for KB; GB; MB.
Exception: Spell out metres to prevent confusion with abbreviation for million.
Note:
Do not include a space between the number and the unit: 20km; 50kph; 100KB
Never add an 's' to measurements: 20km, not 20kms
Use lower case for ie and eg, but avoid using these terms altogether where possible. Use 'that is' or 'for example' instead.
Do not use hyphens in ages unless to avoid confusion, although it's always best to write in a way that avoids ambiguity. For example, 'a class of 15 16-year-old students took the A level course' can be written as '15 students aged 16 took the A level course'.
Write ages like this: XX years old (for example, 66 years old).
Exception - use hyphens when talking about age groups:
under-16s (n): under-16s
under 16 (adj): If you are under 16
over-60s (n): over-60s
over 60 (adj): If you are over 60
"
+ },
+ {
+ "title": "American and UK English",
+ "content": "
Use UK English spelling and grammar. For example, use 'organise' not 'organize', 'modelling' not 'modeling', and 'fill in a form', not 'fill out a form'.
American proper nouns, like 4th Mechanized Brigade or World Health Organization, take American English spelling.
"
+ },
+ {
+ "title": "Ampersand",
+ "content": "
Use and rather than &, unless it's a department's logo image or a company's name as it appears on the Companies House register.
You can use bullet points to make text easier to read. Make sure that:
you always use a lead-in line with a colon
the bullets make sense running on from the lead-in line
you use lower case at the start of the bullet
you do not use more than one sentence per bullet point - use commas or dashes to expand on an item
you do not put 'or' or 'and' after the bullets
you do not make the whole bullet a link if it's a long phrase
you do not put any punctuation at the end of a bullet
there is no full stop after the last bullet point
Bullets should normally form a complete sentence following from the lead text. But it's sometimes necessary to add a short phrase to clarify whether all or some of the points apply. For example, 'You can only register a pension scheme that is (one of the following):'
The number and type of examples in a list may lead the user to believe the list is exhaustive. This can be dealt with by
checking if there are other conditions (or if the list is actually complete)
listing the conditions which apply to the most users and removing the rest
consider broader terms in the list which capture more scenarios (and could make the list exhaustive)
Numbered steps
Use numbered steps instead of bullet points to guide a user through a process. List the things the user needs to do in order. You do not need a lead-in line. Steps end in a full stop because each should be a complete sentence.
If you have a scheme or campaign brand, explain the brand. Don't expect users to understand what you mean. If you say ‘be aware and share’ or ‘get your roll and stroll on’ out of context, it’s not clear what that means.
Don’t capitalise slogans like ‘be aware and share’. If you’re talking about a specific brand or campaign, use capitals. For example, Workwise, PassProtect. Don’t tell people to ‘Be Aware and Share’, but do say ‘the Be Aware and Share’ campaign.
For example:
'get half-price travel when you start a new job with the Workwise scheme'
'find your nearest cycle route on the Starley cycle network'
'hire a bike with West Midlands Cycle Hire'
'If you join the PassProtect scheme, you will get a discount if you need to replace your child's school travel pass.'
"
+ },
+ {
+ "title": "cash fare",
+ "content": "Do not use - it's confusing. Say 'ticket bought on the bus, train or tram on the day' instead."
+ },
+ {
+ "title": "Capitalisation",
+ "content": "
DO NOT USE BLOCK CAPITALS FOR LARGE AMOUNTS OF TEXT AS IT'S QUITE HARD TO READ.
Always use lower case, even in page titles. The exceptions to this are proper nouns.
You can use contractions to help make your text less formal.
Avoid negative contractions like can't and don't. Many users find them harder to read, or misread them as the opposite of what they say. Use cannot instead of can't; do not instead of don’t.
Avoid should've, could've, would've, they've too. These can also be hard to read.
Coronavirus is the virus which causes the illness COVID-19. Coronavirus is lower case.
"
+ },
+ {
+ "title": "council",
+ "content": "
Use lower case when writing about local councils in general. Use capitals for the official name of a local council, for example: Birmingham City Council.
do not use a comma between the month and year: 4 June 2017
when space is an issue - in tables or publication titles, for example - you can use truncated months: Jan, Feb
use 'to' in date ranges - not hyphens, en rules or em dashes. For example: tax year 2011 to 2012
Monday to Friday, 9am to 5pm (put different days on a new line, do not separate with a comma)
10 November to 21 December
do not use quarter for dates, use the months: 'Jan to Mar 2013'
when referring to today (as in a news article) include the date: 'The minister announced today (14 June 2012) that…'
Use 'to' instead of a dash or slash in date ranges. 'To' is quicker to read than a dash, and it's easier for screen readers.
Always explain what your date range represents, for example 'tax year 2013 to 2014' or 'September 2013 to July 2014'. Date ranges can be the academic year, calendar year or tax year. This is why date ranges must be very, very clear.
eg can sometimes be read aloud as 'egg' by screen reading software. Instead use 'for example' or 'such as' or 'like' or 'including' - whichever works best in the specific context.
etc can usually be avoided. Try using 'for example' or 'such as' or 'like' or 'including'. Never use etc at the end of a list starting with these words.
ie - used to clarify a sentence - is not always well understood. Try (re)writing sentences to avoid the need to use it. If that is not possible, use an alternative such as 'meaning' or 'that is'.
If you write content by starting with user needs, you will not need to use FAQs.
FAQs are discouraged because they:
duplicate other content on the site
cannot be front-loaded (putting the most important words people will search for), which makes usability difficult
mean that content is not where people expect to find it; it needs to be in context
can add to search results with duplicate, competing text
"
+ },
+ {
+ "title": "fine",
+ "content": "
Use 'fine' instead of 'financial penalty'.
For example, \"You'll pay a £50 fine.\""
+ },
+ {
+ "title": "first person",
+ "content": "
Use \"we'\" and \"us\" when addressing the user where possible. For example, instead of \"West Midlands Combined Authority has…\" say \"We have\" - it’s more personal.
Lower case unless it's a full title. For example: 'UK government', but 'Her Majesty's Government of the United Kingdom of Great Britain and Northern Ireland'.
Do not use a hyphen unless it's confusing without it, for example, a little used-car is different from a little-used car. You can also refer to The Guardian style guide for advice on hyphenation.
Front-load your link text with the relevant terms and make them active and specific. Do not use ‘click here’. Use text that describes the link instead.
"
+ },
+ {
+ "title": "Lists",
+ "content": "
Lists should be bulleted to make them easier to read. See bullets and steps.
Very long lists can be written as a paragraph with a lead-in sentence if it looks better: 'The following countries are in the EU: Spain, France, Italy...'
Use when talking about network bus tickets - always use a lower case ‘n’, upper case ‘B’.
"
+ },
+ {
+ "title": "nNetwork",
+ "content": "
Use when talking about network tickets for the bus, train and tram - always use a lower case ‘n’, followed by an upper case ‘N’.
"
+ },
+ {
+ "title": "nTrain",
+ "content": "
Use when talking about network train tickets - always use a lower case ‘n’, upper case ‘T’.
"
+ },
+ {
+ "title": "Numbers",
+ "content": "
Use 'one' unless you're talking about a step, a point in a list or another situation where using the numeral makes more sense: 'in point 1 of the design instructions', for example. Or this:
You'll be shown 14 clips that feature everyday road scenes.
There will be:
developing hazard in 13 clips
developing hazards in the other clip
Write all other numbers in numerals (including 2 to 9) except where it's part of a common expression like 'one or two of them' where numerals would look strange.
If a number starts a sentence, write it out in full (Thirty-four, for example) except where it starts a title or subheading.
For numerals over 999 - insert a comma for clarity: 9,000
Spell out common fractions like two-thirds.
Use a % sign for percentages: 50%.
Use a 0 where there's no digit before the decimal point.
Use '500 to 900' and not '500-900' (except in tables and for the 16-18 photocard).
Use MB for anything over 1MB: 4MB not 4096KB.
Use KB for anything under 1MB: 569KB not 0.55MB.
Keep it as accurate as possible and up to 2 decimal places: 4.03MB.
Addresses: use 'to' in address ranges: 49 to 53 Cherry Street.
Ordinal numbers
Spell out first to ninth. After that use 10th, 11th and so on.
Do not abbreviate the name. For example, do not use ‘WM Metro’, ‘NX West Midlands’ or ‘West Mids Railway’.
You can use an acronym for timetables and passenger information. For example, ‘West Midlands Metro (WMM)’, ‘National Express West Midlands (NXWM)’ or ‘West Midlands Railway (WMR)’.
Do not use the NXWM acronym without explaining it first. It is not a well known acronym.
"
+ },
+ {
+ "title": "or",
+ "content": "
Do not use slashes instead of \"or\". For example, do not say \"Do this 3/4 times\".
"
+ },
+ {
+ "title": "pay as you go",
+ "content": "
Do not hyphenate and always use lower case.
"
+ },
+ {
+ "title": "pay as you go credit",
+ "content": "
Use to describe Swift cards with a stored cash value
Note: Do not use 'pay as you go travel value (cash)' or 'pay as you go cash value'.
"
+ },
+ {
+ "title": "PDF",
+ "content": "Upper case. No need to explain the acronym."
+ },
+ {
+ "title": "plain English",
+ "content": "
Lower case plain and upper case English unless in a title: the Plain English Campaign.
All content should be written in plain English. You should also make sure you use language your audience will understand. Use the Plain English Campaign’s A to Z of alternative words to avoid complex language.
Phone numbers should be split into at least three groups of digits for readability, ideally with no more than four digits in any single group. For example: 020 7378 1705; 0343 222 6666; 0762 480 4299. See also the design pattern for contact details.
Use double quotation marks if using a quote within a quote.
If a quote runs on longer than one paragraph, include quotation marks at the beginning of each subsequent paragraph but only at the end of the final paragraph.
Place full stops and commas inside quotes when they are complete sentences, otherwise place them outside: 'I want to buy a ticket,' said Mr Smith; When he said 'I promise', he didn't really mean it.
use 'to' in time ranges, not hyphens, en rules or em dashes: 10am to 11am (not 10-11am) 5:30pm (not 1730hrs) midnight (not 00:00) midday (not 12 noon, noon or 12pm) 6 hours 30 minutes Midnight is the first minute of the day, not the last. You should consider using \"11:59pm\" to avoid confusion about a single, specific time.
For example, \"You must register by 11:59pm on Tuesday 14 June.\" can only be read one way, but \"You must register by midnight on Tuesday 14 June\" can be read in two ways (the end of Monday 13, or end of Tuesday 14).
Timetables and printed passenger information use the 24-hour clock in HHMM format.
"
+ },
+ {
+ "title": "tram",
+ "content": "
Not Metro.
"
+ },
+ {
+ "title": "tram stop",
+ "content": "
Not station.
"
+ },
+ {
+ "title": "Transport for West Midlands",
+ "content": "
Avoid referring to Transport for West Midlands (TfWM). Users don't need to know about it while getting travel advice.
Explaining the relationship between West Midlands Combined Authority, TfWM and West Midlands Combined Authority (WMCA) is complicated. Use \"we\" instead. For example, \"we manage the Key Route Network (KRN)\" with a link to the TfWM policy page.
Not \"zero-hour contract\" or \"zero hours contract\"
"
+ }
+ ]
+ }
+ ]
+}
diff --git a/src/www/pages/tfwm/styles/a-to-z-content-style-guide/index.njk b/src/www/pages/tfwm/styles/a-to-z-content-style-guide/index.njk
new file mode 100644
index 00000000..d1434b5c
--- /dev/null
+++ b/src/www/pages/tfwm/styles/a-to-z-content-style-guide/index.njk
@@ -0,0 +1,131 @@
+{% extends "www/_layouts/layout-fullwidth.njk" %}
+{% set pageTitle="A to Z content style guide" %} {% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{# Imports #}
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %}
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{# Set array of tiles #}
+{% block content %}
+
+{# About the style guide #}
+
+
+
Writing content for West Midlands Combined Authority
+
+ You should create all content with user-focused content design principles. This means content has an identified
+ user need and is written in plain English.
+
+
+ Do not use marketing speak - users will be visiting your website to perform a task (for example, buy a train ticket or find out about Swift cards). Your content shouldn’t try to sell them anything - instead, tell them the information they need to know in the simplest way possible.
+
+
+ Research has shown that both high literacy and low literacy users prefer plain English because it takes less time to read. Users won’t be on your website for fun - so make the experience quick and easy.
+
+
+ To find out more about why plain language is important, read:
+
+
+ {{
+ wmcadsLink({
+ link: 'https://readabilityguidelines.co.uk/clear-language/',
+ linkTitle: 'advice about clear language',
+ contentText: 'advice about clear language'
+ })
+ }}
+ from the Readability Guidelines project
+
+
+ the
+ {{
+ wmcadsLink({
+ link: 'http://www.plainenglish.co.uk/the-a-z-of-alternative-words.html',
+ linkTitle: 'plain English Campaign’s A to Z of alternative words',
+ contentText: 'plain English Campaign’s A to Z of alternative words'
+ })
+ }}
+ - this helps you find a simple replacement for a complicated word
+
+
+
+
+ Read the
+ {{
+ wmcadsLink({
+ link: 'https://www.gov.uk/guidance/content-design/what-is-content-design',
+ linkTitle: 'GOV.UK introduction to content design',
+ contentText: 'GOV.UK introduction to content design'
+ })
+ }}
+ to find out more about content design principles.
+
+
Design Team can help you to test your content with user research.
+
+
About the A-Z of style guide
+
This style guide will help you to use consistent words across West Midlands Combined Authority services.
+
+ If something is not covered by this style guide, check the
+ {{
+ wmcadsLink({
+ link: 'https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style',
+ linkTitle: 'GOV.UK Style Guide',
+ contentText: 'GOV.UK style guide'
+ })
+ }}
+ . You can also email Samresha Purewal if you think something is missing from this guidance.
+
+
Introducing West Midlands Combined Authority
+
If you’re talking about day-to-day services (bus, train or tram), you
+ may need to make it clear that West Midlands Combined Authority does not run these.
For example, you could say: "We don’t run the buses, trains or trams. We can point you in the right direction if you need help."
+
Below are the list of West Midlands Combined Authority colour palettes.
+
+ We have tested our colours against the three most prevalent colour blind anomalies: protanopia, deuteranopia and tritanopia. While in some circumstances, particularly protanopia, colours can appear to be relatively similar.
+
+
+ These issues can be circumvented by not referring to specific colours. For instance, when referring to a green button with the word 'start' in, the phrase 'click the green button to start' would not be helpful. Instead, use 'click the start button', without a colour reference.
+
+
+ W3C AA Accessibility criteria requires the contrast of test to be enhanced, with a contrast ratio upwards of 3:1.
+
+
+ All brand/web colours meet this criteria, though the modal colour 'WM Railway' must only be used for iconography and graphical devices.
+
+
The background only colours can only be used as a background colour and they are not intended for any other use.
+
+
+{# Using in development #}
+
Using in development
+
wmcads SCSS
+
If you are using WMCA Design System's SCSS in development, you shouldn't use the HEX values! Instead you should always use the scss variables instead, for example use get-color(primary) instead of #3c1053. This ensures you are always using the most up-to-date colour. To find out more on how to use the get-color() function in SCSS, please refer to the notes for @function get-color() in _mixins.scss.
+
+
Without wmcads SCSS
+
If you are not using WMCA Design System's SCSS then it is recommended to use the hex values below. It is highly adviseable to set these up as variables in your development enviornment, this ensures that you can easily change them to keep up-to-date with our colour palettes.
+
If you'd like to see how we have set the variables up, you can check out $palettes in _vars.scss and @function get-color() in _mixins.scss.
+
+{# Brand colours #}
+
+
Brand colours
+
+ {% for color in colors.brand %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+
+{# Web colours #}
+
+
Web colours
+
+ {% for color in colors.web %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+
+{# Background Only colours #}
+
+
Background only colours
+
+ {% for color in colors.backgroundOnly %}
+ {{
+ colorPalette({
+ varName: color.varName,
+ name: color.name
+ })
+ }}
+ {% endfor %}
+
+ Spacing can be applied in between .ds-col-* elements by adding a class to the parent .ds-grid.
+
+
+ The classes are named using the format .ds-grid--spacing-{col-count}-{size}.
+
+
+ Where {col-count} is the number of columns per row and {size} is the same as in the spacing utility classes above.
+
+
+ Spacing can also be applied responsively using the format .ds-grid--spacing-{breakpoint}-{col-count}-{size}.
+
+
+ Where {breakpoint} is one of breakpoint sizes described in the grid section.
+
+
+
When to use Grid column spacing
+
+
Use when you require more control over child item spacing
+
Use only when the number of child items do not change
+
+
+
Examples
+
+
Example 1
+
This example shows the use of the ds-content-card component displayed in a grid of thirds with spacing of 1rem.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+
Contact us
+
Get in touch if you want to know more about the budget.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+
Contact us
+
Get in touch if you want to know more about the budget.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
Example 2
+
This example shows the use of the ds-content-card component displayed in a half grid with spacing of 2rem.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
Example 3
+
This example shows the use of the ds-content-card component displayed in a half grid with spacing controlled by breakpoints.
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
The default spacing is 0.75rem (ds-grid--spacing-2-sm). Once the page width goes over 768px the spacing changes to 1rem (ds-grid--spacing-md-2-md).
+
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/styles/examples/grid-examples.njk b/src/www/pages/tfwm/styles/examples/grid-examples.njk
new file mode 100644
index 00000000..52ec7236
--- /dev/null
+++ b/src/www/pages/tfwm/styles/examples/grid-examples.njk
@@ -0,0 +1,335 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Grid Examples" %}
+{% set section = "Styles" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
Introduction to wmcads Grids
+
Grid classes vs. unit classes
+
wmcads Grids consist of two types of classes: the grid class (ds-grid) and unit classes (ds-col-*)
+
The widths of the units are fractions
+
Units have various class names that represent their widths. For example, ds-u-1-2 has a width of 50%, whereas ds-u-1-5 would have a width of 20%.
+
All child elements of a grid must be units
+
Child elements contained within an element with a ds-grid classname must be a grid unit with a ds-col-* classname.
+
Content goes inside grid units
+
All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.
+
+
Examples
+
Let's start with a simple example. Here's a grid with three columns:
+
+
+
Thirds
+
Thirds
+
Thirds
+
+
+
+
+ {%- filter forceescape %}
+
+
Thirds
+
Thirds
+
Thirds
+
+ {%- endfilter %}
+
+
+
+
The above example will keep the columns the same width no matter the page width.
+
+
Adding responsive classes
+
We can control the width by adding responsive classes.
+
+
When using Responsive Grids, you can control how the grid behaves at specific breakpoints by adding class names. wmcads default responsive grids comes with the following class names and media query breakpoints.
+
+
+
Default Media Queries
+
+
+
Key
+
CSS Media Query
+
Applies
+
Classname
+
+
+
+
+
None
+
None
+
Always
+
.ds-col-*
+
+
+
sm
+
@media screen and (min-width: 35.5em)
+
≥ 568px
+
.ds-col-sm-*
+
+
+
md
+
@media screen and (min-width: 48em)
+
≥ 768px
+
.ds-col-md-*
+
+
+
lg
+
@media screen and (min-width: 64em)
+
≥ 1024px
+
.ds-col-lg-*
+
+
+
xl
+
@media screen and (min-width: 80em)
+
≥ 1280px
+
.ds-col-xl-*
+
+
+
+
+
Let's modify the example so the columns become full width on mobile:
+
+
+
Thirds
+
Thirds
+
Thirds
+
+
+
+
+ {%- filter forceescape %}
+
+
Thirds
+
Thirds
+
Thirds
+
+ {%- endfilter %}
+
+
+
+
The above example has a default width of 1 (ds-col-1) so when the page is viewed below 586px the columns will display full width. When the page is viewed over 586px the columns will appear in 3 coloumns (ds-col-sm-1-3).
+
+
+
Justify Content
+
+
You can justify the grid content bby adding these classes:
+
+
ds-grid--justify-between
+
Items will have space between them
+
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-around
+
Items will have space before, between, and after them
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-end
+
Items are positioned at the end of the container
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-center
+
Items are positioned in the center of the container
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+ {%- endfilter %}
+
+
+
+
+
ds-grid--justify-even
+
Items will have equal space around them
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+
+
+
+ {%- filter forceescape %}
+
+
+
+
+
+
Who weve funded
+
See which councils and providers weve funded, and what for.
+
+
+
+
+
+
+
+
Find training schemes
+
You can find training and education providers weve funded online.
+
+
+
+
+ {%- endfilter %}
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/styles/icons/_icons.scss b/src/www/pages/tfwm/styles/icons/_icons.scss
new file mode 100644
index 00000000..d03435ca
--- /dev/null
+++ b/src/www/pages/tfwm/styles/icons/_icons.scss
@@ -0,0 +1,12 @@
+.website-icons {
+ svg {
+ width: 60px;
+ height: 60px;
+ padding: $size-sm;
+ fill: get-color(primary);
+ }
+
+ .text-center {
+ text-align: center;
+ }
+}
diff --git a/src/www/pages/tfwm/styles/icons/index.njk b/src/www/pages/tfwm/styles/icons/index.njk
new file mode 100644
index 00000000..76c42c7f
--- /dev/null
+++ b/src/www/pages/tfwm/styles/icons/index.njk
@@ -0,0 +1,188 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Icons" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{# The icon vars are an array that match the folders they come from in src/assets/icon/{foldername} #}
+{% set iconGeneral = [
+ "arrow",
+ "caret-down",
+ "caret-up",
+ "checkmark",
+ "chevron-right",
+ "circle-hollow",
+ "circle-solid",
+ "cross",
+ "expand",
+ "favourite",
+ "file",
+ "filter",
+ "id-card",
+ "info",
+ "location-arrow",
+ "minimise",
+ "paperclip",
+ "pdf",
+ "html",
+ "search",
+ "success",
+ "swap",
+ "trash",
+ "warning-circle",
+ "warning-triangle"
+] %}
+
+{% set iconSocial = [
+ "facebook",
+ "facebook-hex",
+ "twitter",
+ "twitter-hex",
+ "instagram",
+ "instagram-hex",
+ "linkedin",
+ "linkedin-hex",
+ "youtube",
+ "youtube-hex",
+ "email"
+] %}
+
+{% set iconPortfolio = [
+ "culture-and-digital",
+ "economy",
+ "environment",
+ "housing-and-land",
+ "inclusive-communities",
+ "skills",
+ "transport",
+ "wellbeing"
+] %}
+
+
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+
+{% block content %}
+{# How to use #}
+
About
+
+
What does it do?
+
+
+ Icons are images used in context to communicate a meaning (a visual representation of an object, action, or idea).
+
+
+
When to use it?
+
+
+ Only use icons and images if there’s a real user need.
+
+
+
When not to use it?
+
+
+ Do not use it for unnecessary decoration.
+
+
+
+
+{# Using Icons #}
+
Using icons
+
WMCA Design System icons are available as an SVG sprite to include in your HTML page.
+
How to use
+
Recommended
+
The Recommended method of using the icon sprite sheet is to refer directly to the one used in the design system. This ensures that your icons will always be up to date.
+
To get started, include the below snippet of javascript somewhere in your codebase. This will:
+
+
Pull the latest SVG icon spritesheet to be used within your web app or service
+
Will ensure the icons work with older browsers such as Internet Explorer 11
+
Keep the icon set consistent with other West Midlands Combined Authority Services
To display an icon or glyph, use an icon tag (from the icon section at the bottom of the page) with a href attribute and xlink:href (as a fallback). Make sure that the xlink and href tags are pointing to the location of your downloaded icon sprite sheet.
+
The ICON-TAG-NAME should be replaced with the icon tag name of the icon you want to show from the Icons section below, for example #ds-general-arrow should be in the xlink:href and href attributes of the svg's <use> element.
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/styles/images/index.njk b/src/www/pages/tfwm/styles/images/index.njk
new file mode 100644
index 00000000..e9dea0aa
--- /dev/null
+++ b/src/www/pages/tfwm/styles/images/index.njk
@@ -0,0 +1,29 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Images" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+{# About #}
+
About
+{# What #}
+
What does it do?
+
+
An image tells a story, communicates a complex idea or supports page content by providing further details.
+
+{# When to #}
+
When to use it?
+
+
When there is a clear user need.
+
When an image serves a clear functional purpose.
+
All images, except decorative, must have alt text that describes the content and function of the image. This tells users using screen readers what information the image provides.
+
+{# When not to #}
+
When not to use it?
+
+
When an image is an unnecessary decoration.
+
When an image would create visual noise, which detracts attention away from the page content. This can distract the user from completing their task.
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/styles/index.njk b/src/www/pages/tfwm/styles/index.njk
new file mode 100644
index 00000000..9bf90c6a
--- /dev/null
+++ b/src/www/pages/tfwm/styles/index.njk
@@ -0,0 +1,15 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Styles" %}
+{% set section = "Styles" %}
+{% set ds = 'tfwm' %}
+
+{% block content %}
+
Make your service look and feel like WMCA Design System.
+
If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the
+ coded examples in the
+ Design System will not need any additional styling.
+
If you need to apply styles manually, you should still follow existing WMCA Design System conventions. For
+ example, do not assign
+ new meanings to colours, do not change the style of buttons or adjust the thickness of borders on
+ form inputs.
+{% endblock %}
\ No newline at end of file
diff --git a/src/www/pages/tfwm/styles/layout/index.njk b/src/www/pages/tfwm/styles/layout/index.njk
new file mode 100644
index 00000000..219dae2d
--- /dev/null
+++ b/src/www/pages/tfwm/styles/layout/index.njk
@@ -0,0 +1,84 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Layout" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+{# Standard content template #}
+
Standard content template
+{# What #}
+
What does it do?
+
+
A template is based on 2/3 column for content and a 1/3 column right-hand side for widgets to publish functional content.
+
Content editors will be able to use the design system components in Umbraco to structure content effectively and create visual hierarchy.
+
+{# When #}
+
When to use it?
+
+
When you need to publish functional content based on a clear user task.
+
When your content enables users to complete a specific task. For example, Get a refund, Update a Direct Debit, Find discount vouchers etc.
+
+{# When not to #}
+
When not to use it?
+
+
When you need to create a page for a marketing campaign and you need to use promotional images.
+
+{# Guidance #}
+
Guidance for content editors
+
+
Only use a header image when there is a clear user need for the image and it serves a purpose. For example, on a 'Travel by tram' page, you may want to use a header image of a tram so users unfamiliar with the West Midlands Combined Authority will instantly know what our trams look like throughout the region.
+
Use the Link component in your body content if you want to direct the user to additional content. Do not use buttons for any links. Do not use the same link twice as this confuses users.
+
Only use buttons in your body content when a user needs to complete an action as part of a process, or if a user is confirming their details e.g. newsletter sign-up.
+
+
Warning text with exclamation mark icon component: Please read the Creating effective content section below before writing content or placing content into your page.
+
+
+
+{# Publicity campaign template #}
+
Publicity campaign template
+{# What #}
+
What does it do?
+
+
A template based on a flexible grid provides content editors with an option to create a marketing campaign page.
+
Content editors will be able to use the design system components in Umbraco to structure content effectively and create visual hierarchy.
+
+{# When to #}
+
When to use it?
+
+
When you want to create a marketing campaign to promote and introduce a new service or a product.
+
+{# When not to #}
+
When not to use it?
+
+
When you need to publish functional content based on a clear user task. For example, Get a refund, Update a Direct Debit, Find discount vouchers etc. For this, you will need to use the Standard content template.
+
+{# Guidance #}
+
Guidance for content editors
+
+
Use a header image to draw attention and to increase the visual appeal of the page. Our User research found that 78% of users prefer pages with header images, with the most popular reason being that they make the page look more attractive. Remember to keep your header image relevant to your content.
+
If you are creating a hub page, use Content cards to direct users to the other pages. For marketing campaign pages, please use Content cards with images as this helps users to locate information faster. We recommend using a total of four content cards on one page. However, you can use up to six content cards on a page if absolutely necessary.
+
Restrict the body copy to a maximum of three paragraphs. The body copy introduces the page and should be brief and to the point. The main content your users require needs to be as higher up the page as possible, to reduce scrolling time.
+
Marketing campaign pages should be user tested prior to going live. This is to identify if users can locate the content that they need. Generating heatmaps through Hotjar will help track how the pages are used.
+
+
+
+
+{# Creating effective content #}
+
Creating effective content
+
There is no minimum or maximum page length, however:
Always place content with higher importance at the top of the page, with less important content following after.
+
If you have to use long content, break it down into smaller sections to make it easier for user to understand information. You can:
+
+
Use Content cards for important content which you want to draw attention to. You can use a maximum of six content cards on a page. Do not use more than six because user research shows that users prefer less information, especially on the mobile. Our user research showed that content tiles with images help users locate relevant content faster.
+
Use the Accordion component to organise and group related information at the bottom of the page, below body copy and content tiles. Accordions can shorten pages and reduce scrolling when your content does not need to be read in full. We also recommend using accordions when space is at a premium and you are placing long content on a mobile interface or in a side panel.
Place the In-line navigation component on the left side of a desktop page so users can skip to the relevant section without scrolling. This is especially useful for users on mobile, as the page content component will be placed after the page title.
+ When creating a map use the
+ {{
+ wmcadsLink({
+ link: "https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e",
+ linkTitle: "WMCA Basemap",
+ linkTarget: "_blank",
+ contentText: "WMCA Basemap"
+ })
+ }} as your basemap layer. This is to ensure maps are consistent across West Midlands Combined Authority services.
+
+
The WMCA Basemap is a portal item, you can use the
+{{
+ wmcadsLink({
+ link: "https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html",
+ linkTitle: "ArcGIS Basemap documentation",
+ linkTarget: "_blank",
+ contentText: "ArcGIS Basemap documentation"
+ })
+ }} with the WMCA Basemap ID to include the basemap in your application.
+
+
+{# Example of code #}
+
Example of the ESRI ArcGIS JavaScript API
+
+
+ // ESRI ArcGIS JS code...
+ const basemap = new Basemap({
+ baseLayers: [
+ new VectorTileLayer({
+ portalItem: {
+ // set the baselayer to WMCA Basemap:
+ // https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e
+ id: '53f165a8863c4d40ba017042e248355e',
+ },
+ }),
+ ],
+ });
+
+ // Create a new map with the basemap set above
+ const map = new Map({
+ basemap,
+ });
+
+
+
+{# Can't use Esri ArcGIS #}
+
Can't use ESRI ArcGIS?
+
+ We understand that you may not always be able to use
+ {{
+ wmcadsLink({
+ link: "https://developers.arcgis.com/documentation/core-concepts/apis-sdks-apps/#choosing-an-arcgis-api-or-sdk",
+ linkTitle: "ArcGIS APIs and SDKs",
+ linkTarget: "_blank",
+ contentText: "ArcGIS APIs and SDKs"
+ })
+ }}.
+ In these situations, style your map as closely to the
+ {{
+ wmcadsLink({
+ link: "https://tfwm.maps.arcgis.com/home/item.html?id=53f165a8863c4d40ba017042e248355e",
+ linkTitle: "WMCA Basemap",
+ linkTarget: "_blank",
+ contentText: "WMCA Basemap"
+ })
+ }} as possible.
+
+
+
+
+{# User interface #}
+
User interface
+
+ User interface elements on a map such as zoom, pan and location buttons follow particular pattern rules when being used.
+
+
These pattern rules are:
+
+
Accessible for screen readers and keyboard navigation
+
User interface buttons must have 35px height and 35px width
+
User interface buttons must display in the top right of the map
+
The border radius must be 5px (slight curve on the corners)
+
The icon colour must be white
+
+ The background/fill colour of the buttons must use the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Information colour",
+ linkTarget: "_blank",
+ contentText: "Information colour"
+ })
+ }}
+
+
+ If it is the location button, the background/fill colour must be transparent and the border/icon colour must use the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Primary Purple colour",
+ linkTarget: "_blank",
+ contentText: "Primary Purple colour"
+ })
+ }}
+
+
+
+
+ When hovered, the background/fill colour must be 30% darker (mixed with black) of the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Information colour",
+ linkTarget: "_blank",
+ contentText: "Information colour"
+ })
+ }}
+ (#5c236d)
+
+
+ If it is the location button, the background/fill colour must be 70% lighter (mixed with white) of the
+ {{
+ wmcadsLink({
+ link: "/styles/colour-palettes/",
+ linkTitle: "Secondary Purple colour",
+ linkTarget: "_blank",
+ contentText: "Secondary Purple colour"
+ })
+ }}
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/styles/typography/index.njk b/src/www/pages/tfwm/styles/typography/index.njk
new file mode 100644
index 00000000..ca9dff7e
--- /dev/null
+++ b/src/www/pages/tfwm/styles/typography/index.njk
@@ -0,0 +1,75 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Typography" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% block content %}
+{# About #}
+
About
+
+ We have tested our typography with users, including those with dyslexia and those with low vision. The questionnaire presented respondents with two body fonts, set out in different sizes, line spacing and kerning. The options were shown randomly for each participant.
+
+ Our findings were as such:
+
+
55.2% of respondents found Noto Sans easiest to read, with a further 24.1% of respondents having no preference
+
69% of respondents found a larger font size easiest to read, with a further 5.2% having no preference
+
55.2% of respondents preferred increased line spacing, with a further 12.1% having no preference
+
+
+
+ As a public sector organisation, in addition to testing the above we are required to meet WCAG 2.1 guidelines at AA standard.
+ Therefore, features will be useable when text size is increased up to 200% and content reflowed for 400%.
+
+
+{# Fonts #}
+
Fonts
+
+ We utilise Google Fonts in our typography and all fonts used are pre-bundled in our design system CSS, so you won't need to include them seperately.
+
+
+ Find below, various examples of our typography in use.
+
+
+{# DM Sans / Headings #}
+
DM Sans / headings
+
+ The font DM Sans is used with font weight of 700 (bold) for heading elements only.
+ DM Sans font reference
+
+
Things to note:
+
+
+ On mobile devices (less than 768px wide), the H1 and H2 elements are reduced in size by 15%.
+
+
+
+
46px - Heading 1
+
32px - Heading 2
+
23px - Heading 3
+
18px - Heading 4
+
+
+{# Noto sans / body copy #}
+
Noto Sans / body copy
+
+ The font Noto Sans is used with the font weight of 400 (regular) and 700 (bold) for all elements other than headings. The default font size used is 16px.
+ Noto Sans font reference
+
+
+{% endblock %}
diff --git a/src/www/pages/tfwm/styles/utility-classes/index.njk b/src/www/pages/tfwm/styles/utility-classes/index.njk
new file mode 100644
index 00000000..ffe19480
--- /dev/null
+++ b/src/www/pages/tfwm/styles/utility-classes/index.njk
@@ -0,0 +1,276 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Utility classes" %}
+{% set section = "Styles" %}
+{% set ds = 'wmca' %}
+
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+
+{% block content %}
+{# About #}
+
About
+
+ There are a variety of utility classes that can be used with the existing components and styles on.
+
+
+
+
+{# Containers #}
+
Containers
+
+ Containers are used to wrap content in a 'container'. The container will have a fixed max size and be centered on the page, it will adjust to 100% width when the page width is less than the container size.
+
+
+
+
+ .ds-container /* Container with max-width of 1280px */
+
+ /* This should be used on your main content section and will
+ add a margin top to seperate from header/breadcrumb section */
+ .ds-container.ds-container--main
+
+
+
+
+
+{# Grid #}
+
Grid
+
+ The WMCA Design System uses its own custom syntax grid system adopted from Pure CSS Grid. The grid system is already included in the bundled ds-components.min.css file so you don't need to include it seperately.
+
+
+
+ You can Refer to the Pure CSS Grid documentation for reference on how to use our grid system, but bear in mind that:
+
+
+
.pure-g becomes .ds-grid in our design system
+
.pure-u-* becomes .ds-col-* in our design system
+
+
+
+
You can also use modifier classes on the same element where the class .ds-grid is being used.
+ When you want to hide an element based on if the device width is a desktop or mobile device.
+
+
+
+
+ .ds-hide-mobile /* Hide only on mobile devices or smaller (less than 48em) */
+ .ds-hide-desktop /* Hide only on desktop devices or larger (greater than 48em) */
+ .ds-hide /* Hide on all devices */
+
+
+
+
+
Spacing
+
+ The spacing utility classes are used to adjust whitespace for an element via padding and margins.
+
+
Before using the spacing utility classes, please consider:
+
+
Most components already come with defined spacing. This spacing shouldn't be overwritten.
+
Spacing should be used as a last resort to help layout components on a page.
+
You can use none as a size to enforce zero margin or padding.
+
+
+
+ The classes are named using the format .ds-{type}-{side}-{size}.
+
+{# type #}
+
+ Where {type} is one of:
+
+
+
+ m - for classes that set margin
+
+
+ p - for classes that set padding
+
+
+{# side #}
+
+ Where {side} is one of:
+
+
+
+ t - for classes that set margin-top or padding-top
+
+
+ r - for classes that set margin-right or padding-right
+
+
+ b - for classes that set margin-bottom or padding-bottom
+
+
+ l - for classes that set margin-left or padding-left
+
+
+ blank - for classes that set a margin or padding on all 4 sides of the element
+
+
+{# size #}
+
+Where {size} is one of:
+
+
+
+ xs - set size to 0.25rem
+
+
+ xsm - set size to 0.5rem
+
+
+ sm - set size to 0.75rem
+
+
+ md - set size to 1rem
+
+
+ lg - set size to 2rem
+
+
+ xl - set size to 3rem
+
+
+
+
Some examples of using these utility classes...
+
+
+ .ds-m-xs // applies a margin of 0.25rem to all sides
+ .ds-p-b-lg // applies a padding-bottom of 2rem
+ .ds-m-l-none // sets left margin to 0
+
+
+
+{# Grid columns spacing #}
+
Grid column spacing
+
+
+ Spacing can be applied in between .ds-col-* elements by adding a class to the parent .ds-grid.
+
+
+ The classes are named using the format .ds-grid--spacing-{col-count}-{size}.
+
+
+ Where {col-count} is the number of columns per row and {size} is the same as in the spacing utility classes above.
+
+
+ Spacing can also be applied responsively using the format .ds-grid--spacing-{breakpoint}-{col-count}-{size}.
+
+
+ Where {breakpoint} is one of breakpoint sizes described in the grid section.
+
+
+
Some examples of using these utility classes...
+
+
+ .ds-grid--spacing-2-md // applies a 1rem spacing between 2 columns
+ .ds-grid--spacing-lg-4-lg // applies a 2rem spacing between 4 columns above a screen width of 1024px
+
+
+ 
+ 
+ 
+ 
+
+
+
+ 
+