6.2 Stepper View in a new window

Example
Step 2 of 4: Using PPE
Step 1: Planning
Step 2: Using PPE
Step 3: Decontamination
Step 4: Disposal
Markup 
{% set mobileCaption = mobileCaption|default('Step 2 of 4: Using PPE') %}
{% set modifier_class = modifier_class|default('col-12') %}
{% set steppersData = steppersData|default([
    {
      "caption": "Step 1: Planning",
      "isCompleted": false,
      "isActive":false
    },
    {
      "caption": "Step 2: Using PPE",
      "isCompleted": true,
      "isActive":true
    },
    {
      "caption": "Step 3: Decontamination",
      "isCompleted": false,
      "isActive":false
    },
    {
      "caption": "Step 4: Disposal",
      "isCompleted": false,
      "isActive":false
    }
]) %}
<div class="stepper-container {{modifier_class}}">
  <div class="step-mobile-caption d-block d-md-none">
      {{ mobileCaption }}
  </div>
  <div class="d-flex justify-content-center align-items-end">
  {% for item in steppersData %}
      {% include '@asbestos/components/steppers/step.twig' with {
          "item": item
          } %}
  {% endfor %}
</div>
</div>