Markup
{% set item = item|default({
      "caption": "Step 1: Planning",
      "isCompleted": false,
      "isActive":false
    }) %}
<a class="text-decoration-none steppers  {{item.isCompleted ? 'completed' : 'incomplete' }} " href="{{item.url}}">
  <div>
    <span class="step-caption d-none d-md-block">{{ item.caption }}</span>
    <div class="step mt-2"></div>
  </div>
</a>