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.

Components

In-text step

In-text step

What does it do?

  • 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

  1. Step text must end with a full stop.
  2. Step text must end with a full stop.
  3. Step text must end with a full stop.

HTML markup
<ol class="wmnds-in-text-step">
  <li class="wmnds-in-text-step__item">Step text must end with a full stop.</li>
  <li class="wmnds-in-text-step__item">Step text must end with a full stop.</li>
  <li class="wmnds-in-text-step__item">Step text must end with a full stop.</li>
</ol>

Nunjucks markup
{% from "wmnds/components/in-text-step/_in-text-step.njk" import wmndsInTextStep %}

{{
   wmndsInTextStep({
      items: [
         {
            contentText: "Step text must end with a full stop.",
            contentHTML: null
         },
         {
            contentText: "Step text must end with a full stop.",
            contentHTML: null
         },
         {
            contentText: "Step text must end with a full stop.",
            contentHTML: null
         }
      ]
   })
}}

Nunjucks properties
NameTypeDescription
itemsarrayRequired. The list of text items to be displayed as steps. See items options below.

Options for items

NameTypeDescription
contentTextstringRequired. Text string to use in the step. This will be ignored if contentHTML is set.
contentHTMLstringRequired. HTML to use in the step. This is not required if contentText is set.