Using the design system
Styling page elements
The Transport for West Midlands Design System provides lots of CSS classes for styling page elements, so you should not need to write as much of your own Sass or CSS.
Explore the Styles section of the design system to see what classes are available and how to apply them.
Using components
Components are reusable parts of the user interface, like accordions, buttons and tables. The components in the design system are designed to be accessible, responsive and have been user tested.
There are 2 ways to use components in the Design System.
Option 1: recommended setup
If you installed the design system using the recommended setup, you can copy the code from the HTML markup tab below any examples.
HTML markup
<div class="wmnds-accordion">
<button aria-controls="accordion-html" class="wmnds-accordion__summary-wrapper" aria-expanded="false">
<!-- accordion summary -->
<div class="wmnds-accordion__summary">
<h4 class="wmnds-accordion__heading-text">Accordion heading</h4>
</div>
<!-- plus icon -->
<svg class="wmnds-accordion__icon">
<use xlink:href="#wmnds-general-expand" href="#wmnds-general-expand"></use>
</svg>
<!-- minus icon -->
<svg class="wmnds-accordion__icon wmnds-accordion__icon--minimise">
<use xlink:href="#wmnds-general-minimise" href="#wmnds-general-minimise"></use>
</svg>
</button>
<!-- accordion content -->
<div class="wmnds-accordion__content" id="accordion-html">
Lorem ipsum dolar sit...
</div>
</div>
Option 2: Prototype Kit or installed with npm
If you are using the Prototype Kit or you installed the design system using npm, you can copy the code from either the HTML markup or Nunjucks markup tab below any examples.
As both of these methods use Nunjucks templating, you can use our nunjucks macros (Nunjucks markup tab) and use the Nunjucks properties tab as reference to speed up your development.
Nunjucks macros
A Nunjucks macro is a simple template that generates more complex HTML. However, macros are more sensitive to mistakes than HTML, so it’s worth saving and previewing.
When using Nunjucks macros (Nunjucks markup tab) in the Prototype Kit, leave out the first line that starts with{% from ....
HTML markup
<div class="wmnds-accordion">
<button aria-controls="accordion-njk" class="wmnds-accordion__summary-wrapper" aria-expanded="false">
<!-- accordion summary -->
<div class="wmnds-accordion__summary">
<h4 class="wmnds-accordion__heading-text">Accordion heading</h4>
</div>
<!-- plus icon -->
<svg class="wmnds-accordion__icon">
<use xlink:href="#wmnds-general-expand" href="#wmnds-general-expand"></use>
</svg>
<!-- minus icon -->
<svg class="wmnds-accordion__icon wmnds-accordion__icon--minimise">
<use xlink:href="#wmnds-general-minimise" href="#wmnds-general-minimise"></use>
</svg>
</button>
<!-- accordion content -->
<div class="wmnds-accordion__content" id="accordion-njk">
Lorem ipsum dolar sit...
</div>
</div>
Nunjucks markup
{% from "wmnds/components/accordion/_accordion.njk" import wmndsAccordion %}
{{
wmndsAccordion({
id: "accordion-01",
headingText: "Accordion",
headingHTML: null,
contentText: null,
contentHTML: "<p><strong>Some random subtitle</strong></p>
<p>Lorem ipsum dolor sit...</p>",
isOpen: false
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| id | string | Required. Must be unique. Used as an id in the HTML for the accordion as a whole, and also as a prefix for the ids of the section contents and the buttons that open them, so that those ids can be the target of aria-labelledby and aria-control attributes. |
| headingText | string | Required. Text content for heading line. If headingHTML is supplied, this is ignored. |
| headingHTML | string | Required. HTML content for heading line. |
| contentText | string | Required. The text content of each section, which is hidden when the section is closed. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. The HTML content of each section, which is hidden when the section is closed. |
| isOpen | boolean | If true, accordion element will be expanded upon initial load. Defaults to false. |
Javascript
By default, we like to leave Javascript up to you for better flexibility of the design system.
You may notice that some components have recommended Javascript tabs, you don't have to copy these but they can be a useful starting point if using that component in your project.
HTML markup
<div class="wmnds-accordion">
<button aria-controls="accordion-js" class="wmnds-accordion__summary-wrapper" aria-expanded="false">
<!-- accordion summary -->
<div class="wmnds-accordion__summary">
<h4 class="wmnds-accordion__heading-text">Accordion heading</h4>
</div>
<!-- plus icon -->
<svg class="wmnds-accordion__icon">
<use xlink:href="#wmnds-general-expand" href="#wmnds-general-expand"></use>
</svg>
<!-- minus icon -->
<svg class="wmnds-accordion__icon wmnds-accordion__icon--minimise">
<use xlink:href="#wmnds-general-minimise" href="#wmnds-general-minimise"></use>
</svg>
</button>
<!-- accordion content -->
<div class="wmnds-accordion__content" id="accordion-js">
Lorem ipsum dolar sit...
</div>
</div>
Recommended javascript (browser compatible)
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var accordionsJS = function accordionsJS() {
var accordions = document.querySelectorAll('.wmnds-accordion');
accordions.forEach(function(accordion) {
var accordionBtn = accordion.querySelector('.wmnds-accordion__summary-wrapper');
var toggleAccordion = function toggleAccordion() {
if (accordion.classList.contains('wmnds-is--open')) {
accordion.classList.remove('wmnds-is--open');
accordionBtn.setAttribute('aria-expanded', false);
} else {
accordion.classList.add('wmnds-is--open');
accordionBtn.setAttribute('aria-expanded', true);
}
};
accordionBtn.addEventListener('click', toggleAccordion);
});
};
var _default = accordionsJS;
exports["default"] = _default;
Recommended javascript (ES6)
const accordionsJS = () => {
const accordions = document.querySelectorAll('.wmnds-accordion');
accordions.forEach(accordion => {
const accordionBtn = accordion.querySelector('.wmnds-accordion__summary-wrapper');
const toggleAccordion = () => {
if (accordion.classList.contains('wmnds-is--open')) {
accordion.classList.remove('wmnds-is--open');
accordionBtn.setAttribute('aria-expanded', false);
} else {
accordion.classList.add('wmnds-is--open');
accordionBtn.setAttribute('aria-expanded', true);
}
};
accordionBtn.addEventListener('click', toggleAccordion);
});
};
export default accordionsJS;