Getting started
Layouts
Styles
Helpers
Elements
Components
Organisms
Templates
Other

Steppers

The hx-stepper component displays progress through numbered steps.

Default

      
<div class="hx-card">
  <div class="hx-stepper">
    <div class="hx-stepper-header">
      <div class="hx-stepper-step is-active">
        <span class="hx-stepper-step-step">1</span>
        <div class="hx-stepper-step-label">Name of step 1</div>
      </div>
      <hr class="divider" />
      <div class="hx-stepper-step">
        <span class="hx-stepper-step-step">2</span>
        <div class="hx-stepper-step-label">Name of step 2</div>
      </div>
      <hr class="divider" />
      <div class="hx-stepper-step">
        <span class="hx-stepper-step-step">3</span>
        <div class="hx-stepper-step-label">Name of step 3</div>
      </div>
    </div>
    <div class="hx-stepper-items">
      <!-- items here start -->
      <div class="hx-stepper-content">
        <div class="hx-stepper-wrapper">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus elit, molestie in neque ut, mattis scelerisque tortor. Aliquam laoreet et ante et ornare. Proin interdum odio orci, et tristique turpis porttitor id. Aenean maximus, est vulputate blandit egestas, odio est luctus elit, quis ornare est magna tincidunt risus. Suspendisse eu eros id dolor euismod lobortis non et leo. Praesent in neque vitae turpis porttitor cursus viverra vel massa. Curabitur eu quam quis justo interdum aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas at facilisis velit. Sed gravida convallis elit sit amet imperdiet.</p>
          <p class="has-text-right">
            <button class="hx-button is-flat">Cancel</button>
            <button class="hx-button is-primary">Continue</button>
          </p>
        </div>
      </div>
      <!-- items here end -->
    </div>
  </div>
</div>
1
Name of step 1
2
Name of step 2
3
Name of step 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus elit, molestie in neque ut, mattis scelerisque tortor. Aliquam laoreet et ante et ornare. Proin interdum odio orci, et tristique turpis porttitor id. Aenean maximus, est vulputate blandit egestas, odio est luctus elit, quis ornare est magna tincidunt risus. Suspendisse eu eros id dolor euismod lobortis non et leo. Praesent in neque vitae turpis porttitor cursus viverra vel massa. Curabitur eu quam quis justo interdum aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas at facilisis velit. Sed gravida convallis elit sit amet imperdiet.

More examples

      
<h6 class="mb-2">Default step</h6>
<div class="hx-card mb-10">
  <div class="hx-stepper">
    <div class="hx-stepper-header">
      <div class="hx-stepper-step is-complete">
        <span class="hx-stepper-step-step">
          <i class="hx-icon icon-check-empty"></i>
        </span>
        <div class="hx-stepper-step-label">Name of step 1</div>
      </div>
      <hr class="divider" />
      <div class="hx-stepper-step is-active">
        <span class="hx-stepper-step-step">2</span>
        <div class="hx-stepper-step-label">Name of step 2</div>
      </div>
      <hr class="divider" />
      <div class="hx-stepper-step">
        <span class="hx-stepper-step-step">3</span>
        <div class="hx-stepper-step-label">Name of step 3</div>
      </div>
    </div>
  </div>
</div>

<h6 class="mb-2">Editable step</h6>
<p>Add <code>is-editable</code> to the <code>hx-stepper-step</code> inside the <code>hx-stepper-header</code> tag.</p>
<div class="hx-card mb-10">
  <div class="hx-stepper">
    <div class="hx-stepper-header">
      <div class="hx-stepper-step is-editable is-complete">
        <span class="hx-stepper-step-step">
          <i class="hx-icon icon-check-empty"></i>
        </span>
        <div class="hx-stepper-step-label">Name of step 1</div>
      </div>
      <hr class="divider" />
      <div class="hx-stepper-step is-active">
        <span class="hx-stepper-step-step">2</span>
        <div class="hx-stepper-step-label">Name of step 2</div>
      </div>
      <hr class="divider" />
      <div class="hx-stepper-step">
        <span class="hx-stepper-step-step">3</span>
        <div class="hx-stepper-step-label">Name of step 3</div>
      </div>
    </div>
  </div>
</div>

<h6 class="mb-2">Error step</h6>
<p>Add <code>has-error</code> to the error <code>hx-stepper-step</code> inside the <code>hx-stepper-header</code> tag.</p>
<div class="hx-card mb-10">
  <div class="hx-stepper">
    <div class="hx-stepper-header">
      <div class="hx-stepper-step is-editable is-complete">
        <span class="hx-stepper-step-step">
          <i class="hx-icon icon-check-empty"></i>
        </span>
        <div class="hx-stepper-step-label">Name of step 1</div>
      </div>
      <hr class="divider" />
      <div class="hx-stepper-step has-error">
        <span class="hx-stepper-step-step">
          <i class="hx-icon icon-exclamation"></i>
        </span>
        <div class="hx-stepper-step-label">Name of step 2</div>
      </div>
      <hr class="divider" />
      <div class="hx-stepper-step">
        <span class="hx-stepper-step-step">3</span>
        <div class="hx-stepper-step-label">Name of step 3</div>
      </div>
    </div>
  </div>
</div>

<h6 class="mb-2">Multiline</h6>
<p>Add <code>is-multiline</code> to the <code>hx-stepper-header</code> tag.</p>
<div class="hx-card">
  <div class="hx-stepper">
    <div class="hx-stepper-header is-multiline">
      <div class="hx-stepper-step is-active">
        <span class="hx-stepper-step-step">1</span>
        <div class="hx-stepper-step-label">Name of step 1</div>
      </div>
      <hr class="divider" />
      <div class="hx-stepper-step">
        <span class="hx-stepper-step-step">2</span>
        <div class="hx-stepper-step-label">Name of step 2 <br> another line</div>
      </div>
      <hr class="divider" />
      <div class="hx-stepper-step">
        <span class="hx-stepper-step-step">3</span>
        <div class="hx-stepper-step-label">Name of step 3</div>
      </div>
    </div>
  </div>
</div>
Default step
Name of step 1
2
Name of step 2
3
Name of step 3
Editable step

Add is-editable to the hx-stepper-step inside the hx-stepper-header tag.

Name of step 1
2
Name of step 2
3
Name of step 3
Error step

Add has-error to the error hx-stepper-step inside the hx-stepper-header tag.

Name of step 1
Name of step 2
3
Name of step 3
Multiline

Add is-multiline to the hx-stepper-header tag.

1
Name of step 1
2
Name of step 2
another line
3
Name of step 3

Vertical

      
<p>Add <code>is-vertical</code> to the <code>hx-stepper</code> tag.</p>
<div class="hx-card">
  <div class="hx-stepper is-vertical">
    <div class="hx-stepper-step is-active">
      <span class="hx-stepper-step-step">1</span>
      <div class="hx-stepper-step-label">Name of step 1</div>
    </div>
    <div class="hx-stepper-content">
    </div>
    <div class="hx-stepper-step has-error">
      <span class="hx-stepper-step-step">
        <i class="hx-icon icon-exclamation"></i>
      </span>
      <div class="hx-stepper-step-label">Name of step 2</div>
    </div>
    <div class="hx-stepper-content">
      <div class="hx-stepper-wrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus elit, molestie in neque ut, mattis scelerisque tortor. Aliquam laoreet et ante et ornare. Proin interdum odio orci, et tristique turpis porttitor id. Aenean maximus, est vulputate blandit egestas, odio est luctus elit, quis ornare est magna tincidunt risus. Suspendisse eu eros id dolor euismod lobortis non et leo. Praesent in neque vitae turpis porttitor cursus viverra vel massa. Curabitur eu quam quis justo interdum aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas at facilisis velit. Sed gravida convallis elit sit amet imperdiet.</p>
        <p class="">
          <button class="hx-button is-primary">Continue</button>
          <button class="hx-button is-flat">Cancel</button>
        </p>
      </div>
    </div>
    <div class="hx-stepper-step">
      <span class="hx-stepper-step-step">3</span>
      <div class="hx-stepper-step-label">Name of step 3</div>
    </div>
    <div class="hx-stepper-content"></div>
  </div>
</div>

Add is-vertical to the hx-stepper tag.

1
Name of step 1
Name of step 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus elit, molestie in neque ut, mattis scelerisque tortor. Aliquam laoreet et ante et ornare. Proin interdum odio orci, et tristique turpis porttitor id. Aenean maximus, est vulputate blandit egestas, odio est luctus elit, quis ornare est magna tincidunt risus. Suspendisse eu eros id dolor euismod lobortis non et leo. Praesent in neque vitae turpis porttitor cursus viverra vel massa. Curabitur eu quam quis justo interdum aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas at facilisis velit. Sed gravida convallis elit sit amet imperdiet.

3
Name of step 3