Content presentation - Step by step

Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation.

Open this default step by step example in new window
Copy default step by step code 
<ol class="hs2-sbs">

  <li class="hs2-sbs__entry">
    <h3 class="hs2-heading-s hs2-u-font-size-19 hs2-u-secondary-text-color hs2-sbs__entry-heading">Upload CSV

    </h3>

    <div class="hs2-timeline__entry__content"></div>
  </li>

  <li class="hs2-sbs__entry hs2-sbs__entry--current">
    <h3 class="hs2-heading-s hs2-u-font-size-19 hs2-u-secondary-text-color hs2-sbs__entry-heading">View data

      <strong class="hs2-tag hs2-tag--yellow hs2-u-margin-left-2">
        Active
      </strong>

    </h3>

    <div class="hs2-timeline__entry__content"></div>
  </li>

  <li class="hs2-sbs__entry">
    <h3 class="hs2-heading-s hs2-u-font-size-19 hs2-u-secondary-text-color hs2-sbs__entry-heading">Download

    </h3>

    <div class="hs2-timeline__entry__content"></div>
  </li>

</ol>
Close default step by step code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default step by step
Name Type Required Description
Name id Type string Required false Description Id of the ordered list element
Name classes Type string Required false Description A list of classes to be added to the ordered list element
Name steps Type array Required true Description List of steps to display
Name steps[].heading Type string Required true Description Heading of the step
Name steps[].text Type string Required true Description Text to be rendered as step content, if html is provided text will not be rendered or need to be provided
Name steps[].html Type string Required true Description Html to be rendered as step content, if provided text is not required
Name steps[].href Type boolean Required false Description If true, heading will be rendered as a link
Name steps[].current Type boolean Required false Description If true, this step will be marked as active
Name steps[].attributes Type object Required false Description HTML attributes (for example data attributes) to add to the step <li> element
Name steps[].heading_class Type string Required false Description Classes to be applied to the heading <h3> element
Name steps[].meta Type string Required false Description Add meta data above the step content
Copy default step by step code 
{% from 'step-by-step/macro.njk' import stepByStep %}

{{ stepByStep({
  "steps": [
    {
      "heading": "Upload CSV"
    },
    {
      "heading": "View data",
      "current": true
    },
    {
      "heading": "Download"
    }
  ]
}) }}
Close default step by step code