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-class="pf pf-close">
<span class="iconCircle iconCircle--outline"><i class="pf pf-arrow-left"></i></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-class="pf pf-check">
<span class="steps-button-label mRm">Next</span><span class="iconCircle iconCircle--outline">
<i class="pf pf-arrow-right"></i></span>
</button>
</div>
</div>