Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Docs

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.

If you installed the design system using the recommended setup, you can copy the code from the HTML markup tab below any examples.


Lorem ipsum dolar sit...

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-m-b-none">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 ....


Lorem ipsum dolar sit...

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-m-b-none">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
NameTypeDescription
idstringRequired. 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.
headingTextstringRequired. Text content for heading line. If headingHTML is supplied, this is ignored.
headingHTMLstringRequired. HTML content for heading line.
contentTextstringRequired. The text content of each section, which is hidden when the section is closed. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. The HTML content of each section, which is hidden when the section is closed.
isOpenbooleanIf 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.


Lorem ipsum dolar sit...

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-m-b-none">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;