Sub-steps markup

The parent steps are shown as labels like this:

<ol class="fixed nav nav--block steps-nav steps-nav--withParents" data-title="Steps overview">
  <li class="steps-label steps-parent">Parent step 1</li>
  <li class="steps-label steps-parent steps-parent--is-active">Parent step 2</li>
  <!-- Following sub steps -->
</ol>

The active (current) parent step should be marked with class .steps-parent--is-active. The following sub steps are identical to normal steps.

The steps for this example page has markup structure similar to this:

<div class="steps js-stepsWizard">
  <div class="steps-content">
    <section class="steps-panel wrap-large" data-step="1">
    <!-- Page content for sub-step page 1 here -->
    </section>
    <section class="steps-panel wrap-large" data-step="2">
    <!-- Page content for sub-step page 2 here -->
    </section>
    <section class="steps-panel wrap-large" data-step="3">
    <!-- Page content for sub-step page 3 here -->
    </section>
    <section class="steps-panel wrap-large" data-step="4">
    <!-- Page content for sub-step page 4 here -->
    </section>
  </div>
  <div role="navigation" aria-label="Steps">
    <ol class="fixed nav nav--block steps-nav steps-nav--withParents w100" data-title="Steps overview">
      <li class="steps-label steps-parent steps-parent--is-active">Parent step</li>
      <li class="steps-label" data-step="1">Sub-step 1</li>
      <li class="steps-label" data-step="2">Sub-step 2</li>
      <li class="steps-label" data-step="3">Sub-step 3</li>
      <li class="steps-label" data-step="4">Sub-step 4</li>
    </ol>
    <button class="steps-button btn fL" type="button" data-cancel-text="Back" data-cancel-icon="close">
      <span class="iconCircle iconCircle--medium iconCircle--outline"><svg class="svgIcon" aria-hidden="true"><use xlink:href="#svg--arrowLeft"></use></svg></span>
      <span class="mLm steps-button-label">Previous</span>
    </button>
    <button class="steps-button btn fR" type="button" data-submit-text="Confirm" data-submit-icon="check">
      <span class="steps-button-label mRm">Next</span><span class="iconCircle iconCircle--medium iconCircle--outline">
      <svg class="svgIcon" aria-hidden="true"><use xlink:href="#svg--arrowRight"></use></svg></span>
    </button>
  </div>
</div>