Stepper v0.21.0+

Basic Stepper

A basic stepper will allow a user to expand and collapse as many panels as desired.

Content Goes Here

 
<hx-accordion class="hxStepper" current-panel="0">
  <hx-accordion-panel>
    <header slot="header">
      <span class="hxStepCounter">
        <!-- CSS will handle filling in the step number -->
      </span>
      <span class="hxStepLabel">Account</span>
      <span class="hxStepValue">Acme Corp Inc.</span>
    </header>
    <div class="hxBox hxMd">
      <p>
        <em>Content Goes Here</em>
      </p>
      <p class="hxStepButton">
        <button class="hxBtn hxPrimary">Next Step</button>
        <button class="hxBtn">Prev Step</button>
        <button class="hxBtn hxLink">Cancel</button>
      </p>
    </div>
  </hx-accordion-panel>
  <hx-accordion-panel>...</hx-accordion-panel>
  <hx-accordion-panel>...</hx-accordion-panel>
  ...
</hx-accordion>

See Also