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.
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
Step text must end with a full stop.
Step text must end with a full stop.
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
Name
Type
Description
items
array
Required. The list of text items to be displayed as steps. See items options below.
Options for items
Name
Type
Description
contentText
string
Required. Text string to use in the step. This will be ignored if contentHTML is set.
contentHTML
string
Required. HTML to use in the step. This is not required if contentText is set.
