index.html

---
layout: default
variables:
- name: $steps-default-color
  value: $grey-lighter
- name: $steps-completed-color
  value: $success
- name: $steps-active-color
  value: $success
- name: $steps-horizontal-min-width
  value: 10em
- name: $steps-vertical-min-height
  value: 4em
- name: $steps-marker-size
  value: 2
- name: $steps-divider-size
  value: .4em
- name: $steps-gap-size
  value: .3rem
- name: $steps-hollow-border-size
  value: .3em
- name: $steps-thin-divider-size
  value: 1px
- name: $steps-thin-marker-size
  value: .8em
---

<section class="section">
  <div class="container">
    <h1 class="title">Installation</h1>
    <p>
      An extension for the <a href="http://bulma.io">Bulma CSS framework</a>. See the <a href="https://github.com/octoshrimpy/bulma-o-steps">Readme on Github</a> for installation instructions.
    </p>

    <hr>

    {%
      include meta.html
      colors=true
      sizes=true
      variables=true
    %}

    {% include anchor.html name="Documentation" %}

    <div class="content">
      <p>
        The <code>steps</code> list is useful for tracking progress in multi steps forms or wizards.
      </p>

      <p>
        You can use the <code>is-active</code> modifier to set the current active step. Any step before or after the active step will be styled differently.
      </p>
    </div>

    {% capture steps_example %}
    <ul class="steps">
      <li class="steps-segment">
        <a href="#" class="steps-marker"></a>
      </li>
      <li class="steps-segment">
        <a href="#" class="steps-marker"></a>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    {% endcapture %}

    <div class="bd-snippet">
      <div class="bd-snippet-preview">
      {{steps_example}}
      </div>
      <div class="bd-snippet-code highlight-full">
        {% highlight html %}
        {{steps_example}}
        {% endhighlight %}
      </div>
    </div>

    {% include anchor.html name="Marker Content" %}

    <div class="content">
      <p>
        You can display information inside markers. About 2 or 3 characters or an <code>icon</code> will fit.
      </p>
    </div>

    {% capture steps_marker_content_example %}
    <ul class="steps">
      <li class="steps-segment">
        <span class="steps-marker">1</span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker">xyz</span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker">-3-</span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker">★</span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker">
          <span class="icon">
            <i class="fa fa-check"></i>
          </span>
        </span>
      </li>
    </ul>
    {% endcapture %}

    <div class="bd-snippet">
      <div class="bd-snippet-preview">
        {{steps_marker_content_example}}
      </div>
      <div class="bd-snippet-code highlight-full">
      {% highlight html %}
      {{steps_marker_content_example}}
      {% endhighlight %}
      </div>
    </div>

    {% include anchor.html name="Step Content" %}

    <div class="content">
      <p>
        Use the <code>steps-content</code> class to add content to a <code>steps-segment</code>.
      </p>

      <p>
        If the last step also has content, use the <code>is-balanced</code> modifier on the root <code>steps</code> element, to make sure that the last step has the same width as the other steps.
      </p>
    </div>

    {% capture steps_content_example %}
    <ul class="steps is-balanced">
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 1</p>
          <p>This is the first step, which means you start here.</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 2</p>
          <p>This is the second step. Once you complete the first step, you will end up here.</p>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 3</p>
          <p>This is the third step. This is halfway between the start and the end.</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 4</p>
          <p>The fourth step. Nearly there!</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 5</p>
          <p>And finally the last step. You have successfully completed all 5 steps.</p>
        </div>
      </li>
    </ul>
    {% endcapture %}

    <div class="bd-snippet">
      <div class="bd-snippet-preview">
        {{steps_content_example}}
      </div>
      <div class="bd-snippet-code highlight-full">
      {% highlight html %}
      {{steps_content_example}}
      {% endhighlight %}
      </div>
    </div>

    <div class="content">
      <p>
        Use the <code>has-content-centered</code> class to align the content directly underneath the marker.
      </p>

      <p>
        You can omit the <code>is-balanced</code> modifier, since <code>has-content-centered</code> will make sure the steps are always balanced.
      </p>
    </div>

    {% capture steps_centered_content_example %}
    <ul class="steps has-content-centered">
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 1</p>
          <p>This is the first step, which means you start here.</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 2</p>
          <p>This is the second step. Once you complete the first step, you will end up here.</p>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 3</p>
          <p>This is the third step. This is halfway between the start and the end.</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 4</p>
          <p>The fourth step. Nearly there!</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 5</p>
          <p>And finally the last step. You have successfully completed all 5 steps.</p>
        </div>
      </li>
    </ul>
    {% endcapture %}

      <div class="bd-snippet">
        <div class="bd-snippet-preview">
          {{steps_centered_content_example}}
        </div>
        <div class="bd-snippet-code highlight-full">
        {% highlight html %}
        {{steps_centered_content_example}}
        {% endhighlight %}
        </div>
      </div>

    <div class="content">
      <p>
        Use the <code>is-divider-content</code> modifier to align content with the divider.
      </p>

      <p>
        If the last step has no content, omit the <code>is-balanced</code> modifier on the root element to make sure the last step stays flush with the right edge.
      </p>
    </div>

    {% capture steps_divider_content_example %}
    <ul class="steps">
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content is-divider-content">
          <p class="is-size-4">Action 1</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content is-divider-content">
          <p class="is-size-4">Action 2</p>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
        <div class="steps-content is-divider-content">
          <p class="is-size-4">Action 3</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content is-divider-content">
          <p class="is-size-4">Action 4</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    {% endcapture %}

    <div class="bd-snippet">
      <div class="bd-snippet-preview">
        {{steps_divider_content_example}}
      </div>
      <div class="bd-snippet-code highlight-full">
      {% highlight html %}
      {{steps_divider_content_example}}
      {% endhighlight %}
      </div>
    </div>


    <div class="content">
      <p>
        Use <code>has-content-above</code> modifier to move the steps above the marker.
      </p>
    </div>

    {% capture steps_content_above_example %}
    <ul class="steps is-balanced has-content-above">
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 1</p>
          <p>This is the first step, which means you start here.</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 2</p>
          <p>This is the second step. Once you complete the first step, you will end up here.</p>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 3</p>
          <p>This is the third step. This is halfway between the start and the end.</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 4</p>
          <p>The fourth step. Nearly there!</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">Step 5</p>
          <p>And finally the last step. You have successfully completed all 5 steps.</p>
        </div>
      </li>
    </ul>
    {% endcapture %}

    <div class="bd-snippet">
      <div class="bd-snippet-preview">
        {{steps_content_above_example}}
      </div>
      <div class="bd-snippet-code highlight-full">
      {% highlight html %}
      {{steps_content_above_example}}
      {% endhighlight %}
      </div>
    </div>


        <div class="content">
          <p>
            <code>has-content-above</code> also works with <code>is-divider-content</code>
          </p>
        </div>

        {% capture steps_content_above_divider_example %}
        <ul class="steps has-content-above">
          <li class="steps-segment">
            <span class="steps-marker"></span>
            <div class="steps-content is-divider-content">
              <p class="is-size-4">Step 1</p>
            </div>
          </li>
          <li class="steps-segment">
            <span class="steps-marker"></span>
            <div class="steps-content is-divider-content">
              <p class="is-size-4">Step 2</p>
            </div>
          </li>
          <li class="steps-segment is-active">
            <span class="steps-marker"></span>
            <div class="steps-content is-divider-content">
              <p class="is-size-4">Step 3</p>
            </div>
          </li>
          <li class="steps-segment">
            <span class="steps-marker"></span>
            <div class="steps-content is-divider-content">
              <p class="is-size-4">Step 4</p>
            </div>
          </li>
          <li class="steps-segment">
            <span class="steps-marker"></span>
            <div class="steps-content is-divider-content">
              <p class="is-size-4">Step 5</p>
            </div>
          </li>
          <li class="steps-segment">
            <span class="steps-marker"></span>
          </li>
        </ul>
        {% endcapture %}

        <div class="bd-snippet">
          <div class="bd-snippet-preview">
            {{steps_content_above_divider_example}}
          </div>
          <div class="bd-snippet-code highlight-full">
          {% highlight html %}
          {{steps_content_above_divider_example}}
          {% endhighlight %}
          </div>
        </div>



        <div class="content">
          <p>
            Add a sibling to <code>.steps-content</code> with the class of <code>.extra-data</code> to create between-steps data.
            It works with <code>.has-content-above</code> as well.
          </p>
          <p>Be aware that it is floating and therefore does not occupy space within the DOM. Add margins above and below as needed.</p>
        </div>

        {% capture steps_extra_data_example %}
        <div class="columns">
          <div class="column">
            <ul class="steps has-content-centered">
              <li class="steps-segment">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 1</p>
                </div>
              </li>
              <li class="steps-segment is-active">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 2</p>
                </div>
                <div class="extra-data">Hello, there.</div>
              </li>
              <li class="steps-segment ">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 3</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="column">
            <ul class="steps has-content-centered has-content-above">
              <li class="steps-segment">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 1</p>
                </div>
              </li>
              <li class="steps-segment is-active">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 2</p>
                </div>
                <div class="extra-data">General Kenobi!</div>
              </li>
              <li class="steps-segment ">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 3</p>
                </div>
              </li>
            </ul>
          </div>
        </div>


        {% endcapture %}

          <div class="bd-snippet">
            <div class="bd-snippet-preview">
              {{steps_extra_data_example}}
            </div>
            <div class="bd-snippet-code highlight-full">
            {% highlight html %}
            {{steps_extra_data_example}}
            {% endhighlight %}
            </div>
          </div>


        <div class="content">
          <p>
            Use <code>.has-overflow-left</code> or <code>.has-overflow-right</code> to allow extra data to overflow. By default, it will center and text-wrap for you.
          </p>
        </div>

        {% capture steps_extra_data_overflow_example %}
        <div class="columns">
          <div class="column">
            <ul class="steps has-content-centered">
              <li class="steps-segment">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 1</p>
                </div>
              </li>
              <li class="steps-segment is-active">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 2</p>
                </div>
                <div class="extra-data has-overflow-left">
                  <span>This snippet overflows from step 3, and stays right-aligned.</span>
                </div>
              </li>
              <li class="steps-segment ">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 3</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="column">
            <ul class="steps has-content-centered">
              <li class="steps-segment">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 1</p>
                </div>
                <div class="extra-data has-overflow-right">
                  <span>This one overflows from step 1 in the opposite direction.</span>
                </div>
              </li>
              <li class="steps-segment is-active">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 2</p>
                </div>
              </li>
              <li class="steps-segment ">
                <span class="steps-marker"></span>
                <div class="steps-content">
                  <p class="is-size-4">Step 3</p>
                </div>
              </li>
            </ul>
          </div>
        </div>


        {% endcapture %}

          <div class="bd-snippet">
            <div class="bd-snippet-preview">
              {{steps_extra_data_overflow_example}}
            </div>
            <div class="bd-snippet-code highlight-full">
            {% highlight html %}
            {{steps_extra_data_overflow_example}}
            {% endhighlight %}
            </div>
          </div>




    {% include anchor.html name="Colors" %}

    <div class="content">
      <p>
        Every marker can have a different color. This can be used to indicate steps with errors, for example.
      </p>
    </div>

    {% capture steps_marker_colors1_example %}
    <ul class="steps has-content-centered">
      <li class="steps-segment">
        <span class="steps-marker is-white">1</span>
        <div class="steps-content">
          <code>is-white</code>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-light">2</span>
        <div class="steps-content">
          <code>is-light</code>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker is-dark">3</span>
        <div class="steps-content">
          <code>is-dark</code>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-black">4</span>
        <div class="steps-content">
          <code>is-black</code>
        </div>
      </li>
    </ul>
    {% endcapture %}

    {% capture steps_marker_colors2_example %}
    <ul class="steps has-content-centered">
      <li class="steps-segment">
        <span class="steps-marker is-primary">1</span>
        <div class="steps-content">
          <code>is-primary</code>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-info">2</span>
        <div class="steps-content">
          <code>is-info</code>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker is-success">3</span>
        <div class="steps-content">
          <code>is-success</code>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-warning">4</span>
        <div class="steps-content">
          <code>is-warning</code>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-danger">5</span>
        <div class="steps-content">
          <code>is-danger</code>
        </div>
      </li>
    </ul>
    {% endcapture %}

    <div class="columns">
      <div class="column">

        <div class="bd-snippet">
          <div class="bd-snippet-preview">
            {{steps_marker_colors1_example}}
          </div>
          <div class="bd-snippet-code highlight-full">
          {% highlight html %}
          {{steps_marker_colors1_example}}
          {% endhighlight %}
          </div>
        </div>

      </div>
      <div class="column">

        <div class="bd-snippet">
          <div class="bd-snippet-preview">
            {{steps_marker_colors2_example}}
          </div>
          <div class="bd-snippet-code highlight-full">
          {% highlight html %}
          {{steps_marker_colors2_example}}
          {% endhighlight %}
          </div>
        </div>

      </div>
    </div>

    {% include anchor.html name="Sizes" %}

    <div class="content">
      <p>
        You can use the <code>is-small</code>, <code>is-medium</code> or <code>is-large</code> modifiers to change the size.
      </p>
    </div>

    {% capture steps_sizes_example %}
    <ul class="steps is-small">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    <ul class="steps">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    <ul class="steps is-medium">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    <ul class="steps is-large">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    {% endcapture %}

    {% capture steps_sizes_short_example %}
    <ul class="steps is-small">...</ul>
    <ul class="steps">...</ul>
    <ul class="steps is-medium">...</ul>
    <ul class="steps is-large">...</ul>
    {% endcapture %}

    <div class="bd-snippet">
      <div class="bd-snippet-preview">
        {{steps_sizes_example}}
      </div>
      <div class="bd-snippet-code highlight-full">
      {% highlight html %}
      {{steps_sizes_short_example}}
      {% endhighlight %}
      </div>
    </div>

    <div class="content">
      <p>
        Or if you want to go really small, use the <code>is-thin</code> modifier to have 1px wide
        dividers. The markers will also be made smaller, so you can't put anything inside them
        anymore.
      </p>
    </div>

    {% capture steps_thin_example %}
    <ul class="steps is-thin">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    {% endcapture %}

    <div class="bd-snippet">
      <div class="bd-snippet-preview">
        {{steps_thin_example}}
      </div>
      <div class="bd-snippet-code highlight-full">
      {% highlight html %}
      {{steps_thin_example}}
      {% endhighlight %}
      </div>
    </div>

    {% include anchor.html name="Narrow" %}

    <div class="content">
      <p>
        By default, the <code>steps</code> component will take up the entire width. Add the <code>is-narrow</code> modifier to only take up as much space as needed.
      </p>

      <p>
        You can combine that with the <code>is-centered</code> or <code>is-right</code> modifiers to change the alignment.
      </p>
    </div>

    {% capture steps_narrow_example %}
    <ul class="steps is-narrow">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>

    <ul class="steps is-narrow is-centered">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>

    <ul class="steps is-narrow is-right">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    {% endcapture %}

    <div class="bd-snippet">
      <div class="bd-snippet-preview">
        {{steps_narrow_example}}
      </div>
      <div class="bd-snippet-code highlight-full">
      {% highlight html %}
      {{steps_narrow_example}}
      {% endhighlight %}
      </div>
    </div>


    {% include anchor.html name="Short" %}

    <div class="content">
      <p>
        By default, the <code>steps</code> component with <code>is-vertical</code> modifier will take up the entire height. Add the <code>is-short</code> modifier to only take up as much space as needed.
      </p>

      <p>
        You can combine that with the <code>is-centered</code> or <code>is-right</code> modifiers to change the alignment.
      </p>
    </div>

    {% capture steps_is-short_example %}
    <ul class="steps is-vertical is-short">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>

    <ul class="steps is-vertical is-short is-centered">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>

    <ul class="steps is-vertical is-short is-bottom">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    {% endcapture %}

    <div class="bd-snippet bd-is-vertical">
      <div class="bd-snippet-preview">
        {{steps_is-short_example}}
      </div>
      <div class="bd-snippet-code highlight-full">
      {% highlight html %}
      {{steps_is-short_example}}
      {% endhighlight %}
      </div>
    </div>


    {% include anchor.html name="Marker Style" %}

    <div class="content">
      <p>
        The marker can be styled using the <code>is-hollow</code> modifier. It can apply to all steps by defining it on the root <code>steps</code> element or each marker separately.
      </p>
    </div>

    {% capture steps_hollow_example %}
    <ul class="steps is-hollow">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    {% endcapture %}

    {% capture steps_hollow_mixed_example %}
    <ul class="steps">
      <li class="steps-segment">
        <span class="steps-marker is-hollow"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-hollow"></span>
      </li>
    </ul>
    {% endcapture %}

    <div class="columns">
      <div class="column">
        <h4 class="title">For all steps</h4>

        <div class="bd-snippet">
          <div class="bd-snippet-preview">
            {{steps_hollow_example}}
          </div>
          <div class="bd-snippet-code highlight-full">
          {% highlight html %}
          {{steps_hollow_example}}
          {% endhighlight %}
          </div>
        </div>

      </div>

      <div class="column">
        <h4 class="title">Per step</h4>

        <div class="bd-snippet">
          <div class="bd-snippet-preview">
            {{steps_hollow_mixed_example}}
          </div>
          <div class="bd-snippet-code highlight-full">
          {% highlight html %}
          {{steps_hollow_mixed_example}}
          {% endhighlight %}
          </div>
        </div>

      </div>
    </div>


    {% include anchor.html name="Divider Styles" %}

    <div class="content">
      <p>
        The divider can be styled using the <code>is-dashed</code> modifier, <code>has-gaps</code> modifier or both. They can apply to all steps by defining it on the root <code>steps</code> element or each step separately.
      </p>

      <h4 class="title"><code>is-dashed</code></h4>
    </div>

    {% capture steps_dashed_example %}
    <ul class="steps is-dashed">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    {% endcapture %}

    {% capture steps_dashed_mixed_example %}
    <ul class="steps">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active is-dashed">
        <span class="steps-marker"></span>
        <div class="steps-content is-divider-content">
          <p class="heading">Next step unreachable</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    {% endcapture %}

    <div class="columns">
      <div class="column">
        <h4 class="title">For all steps</h4>

        <div class="bd-snippet">
          <div class="bd-snippet-preview">
            {{steps_dashed_example}}
          </div>
          <div class="bd-snippet-code highlight-full">
          {% highlight html %}
          {{steps_dashed_example}}
          {% endhighlight %}
          </div>
        </div>

      </div>

      <div class="column">
        <h4 class="title">Per step</h4>

        <div class="bd-snippet">
          <div class="bd-snippet-preview">
            {{steps_dashed_mixed_example}}
          </div>
          <div class="bd-snippet-code highlight-full">
          {% highlight html %}
          {{steps_dashed_mixed_example}}
          {% endhighlight %}
          </div>
        </div>

      </div>
    </div>

    <div class="content">
      <h4 class="title"><code>has-gaps</code></h4>
    </div>

    {% capture steps_gaps_example %}
    <ul class="steps has-gaps">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    {% endcapture %}

    {% capture steps_gaps_mixed_example %}
    <ul class="steps">
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active has-gaps">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    {% endcapture %}

    <div class="columns">
      <div class="column">
        <h4 class="title">For all steps</h4>

        <div class="bd-snippet">
          <div class="bd-snippet-preview">
            {{steps_gaps_example}}
          </div>
          <div class="bd-snippet-code highlight-full">
          {% highlight html %}
          {{steps_gaps_example}}
          {% endhighlight %}
          </div>
        </div>

      </div>

      <div class="column">
        <h4 class="title">Per step</h4>

        <div class="bd-snippet">
          <div class="bd-snippet-preview">
            {{steps_gaps_mixed_example}}
          </div>
          <div class="bd-snippet-code highlight-full">
          {% highlight html %}
          {{steps_gaps_mixed_example}}
          {% endhighlight %}
          </div>
        </div>

      </div>
    </div>

    {% include anchor.html name="Alignment" %}

    <div class="content">
      <p>
        The steps are displayed vertically on mobile and horizontally on bigger sizes by default.
      </p>

      <p>
        You can use the <code>is-horizontal</code> or <code>is-vertical</code> modifiers to always force the steps in a certain alignment no matter the screen size.
      </p>
    </div>

    {% capture steps_horizontal_example %}
    <ul class="steps is-horizontal">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
      </li>
    </ul>
    {% endcapture %}

    {% capture steps_vertical_example %}
    <ul class="steps is-vertical">
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">2000</p>
          <p>Lorem Ipsum Dolor Sit Amet</p>
        </div>
      </li>
      <li class="steps-segment">
        <span href="#" class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">2002</p>
          <p>Maecenas Ultrices Aliquet Velit Vitae</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">2007</p>
          <p>Aliquam Quis Scelerisque Mauris Nullam</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">2012</p>
          <p>Etiam A Nunc Vitae Nunc</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-4">2017</p>
          <p>In Sed Vehicula Est Vivamus</p>
        </div>
      </li>
    </ul>
    {% endcapture %}

    <h4 class="title">Always horizontal</h4>

    <div class="bd-snippet">
      <div class="bd-snippet-preview">
        {{steps_horizontal_example}}
      </div>
      <div class="bd-snippet-code highlight-full">
      {% highlight html %}
      {{steps_horizontal_example}}
      {% endhighlight %}
      </div>
    </div>

    <h4 class="title">Always vertical</h4>

    <div class="bd-snippet bd-is-vertical">
      <div class="bd-snippet-preview">
        {{steps_vertical_example}}
      </div>
      <div class="bd-snippet-code highlight-full">
        {% highlight html %}
        {{steps_vertical_example}}
        {% endhighlight %}
      </div>
    </div>

    {% include anchor.html name="Example" %}

    <div class="content">
      <p>
        Putting things together, we can make a checkout form for a shopping website.
      </p>
    </div>

    {% capture steps_checkout_example %}
    <ul class="steps is-narrow is-medium is-centered has-content-centered">
      <li class="steps-segment">
        <a href="#" class="has-text-dark">
          <span class="steps-marker">
            <span class="icon">
              <i class="fa fa-shopping-cart"></i>
            </span>
          </span>
          <div class="steps-content">
            <p class="heading">Shopping Cart</p>
          </div>
        </a>
      </li>
      <li class="steps-segment">
        <a href="#" class="has-text-dark">
          <span class="steps-marker">
            <span class="icon">
              <i class="fa fa-user"></i>
            </span>
          </span>
          <div class="steps-content">
            <p class="heading">User Information</p>
          </div>
        </a>
      </li>
      <li class="steps-segment is-active has-gaps">
        <span class="steps-marker">
          <span class="icon">
            <i class="fa fa-usd"></i>
          </span>
        </span>
        <div class="steps-content">
          <p class="heading">Payment</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker is-hollow">
          <span class="icon">
            <i class="fa fa-check"></i>
          </span>
        </span>
        <div class="steps-content">
          <p class="heading">Confirmation</p>
        </div>
      </li>
    </ul>
    {% endcapture %}

    <div class="bd-snippet">
      <div class="bd-snippet-preview">
        {{steps_checkout_example}}
      </div>
      <div class="bd-snippet-code highlight-full">
      {% highlight html %}
      {{steps_checkout_example}}
      {% endhighlight %}
      </div>
    </div>

    {% include anchor.html name="SASS Mixin Helpers" %}

    <div class="content">
      <p>
        There are a few helpers available to make it easy to directly target step segments if you
        want to create custom step styles. They are <code>steps-all-segments</code>,
        <code>steps-inactive-segments</code> and <code>steps-active-segment</code>.
      </p>

      <p>
        For example, if you create a <code>my-step-style</code> class in a .sass file like this:
      </p>
    </div>

    {% highlight sass %}
      // in a .sass file
      .my-step-style
        +steps-active-segment
          .steps-content
            font-weight: bold

        +steps-inactive-segments
          .steps-content
            color: $grey-lighter
    {% endhighlight %}

    <div class="content">
      <p>
        Then using the <code>my-step-style</code> class on the root steps element will add the
        custom styles.
      </p>
    </div>

    {% capture steps_custom_example %}
    <ul class="steps my-step-style has-content-centered">
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-5">Step 1</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-5">Step 2</p>
        </div>
      </li>
      <li class="steps-segment is-active">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-5">Step 3</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-5">Step 4</p>
        </div>
      </li>
      <li class="steps-segment">
        <span class="steps-marker"></span>
        <div class="steps-content">
          <p class="is-size-5">Step 5</p>
        </div>
      </li>
    </ul>
    {% endcapture %}

    <div class="bd-snippet">
      <div class="bd-snippet-preview">
        {{steps_custom_example}}
      </div>
      <div class="bd-snippet-code highlight-full">
      {% highlight html %}
      {{steps_custom_example}}
      {% endhighlight %}
      </div>
    </div>

    <div class="content">
      <p>
        There is no <code>steps-completed-segments</code> mixin available, due to the way the code
        is structured (and css3 limitations). If you want to target those, use the
        <code>steps-all-segments</code> mixin to set that style and override it with the
        <code>steps-active-segment</code> and <code>steps-inactive-segments</code> mixins.
      </p>
    </div>

    {% include variables.html variables=variables %}

    {% include anchor.html name="Problems?" %}

    <div class="content">
      <p>
        Have an issue? Please <a
        href="https://github.com/octoshrimpy/bulma-o-steps/issues/new">create an issue on Github</a>
        and I will look at it.
      </p>
    </div>
  </div>
</section>