Steps

src
components
steps.scss

displayunchanged positionunchanged z-indexunchanged font-size scalingyes breakpointsno

Class list

.steps .step .step-a

Description

Use .steps to outline a series of steps taken in order to get to a certain point, like a filepath.

Structure

<ul class="steps">
    <li class="step">
        <a href="" class="step-a">documents</a>
    </li>
    <li class="step">
        <a href="" class="step-a">projects</a>
    </li>
    <li class="step">
        sandbox
    </li>
</ul>

The .step has its display property value set to inline-block. The parent, .steps, does not have its display property value changed.

Font size scaling

Use the font-size utility classes on a .steps to change the font size of its children.

<ul class="steps h5">
    <li class="step">
        <a href="" class="step-a">documents</a>
    </li>
    <li class="step">
        <a href="" class="step-a">projects</a>
    </li>
    <li class="step">
        sandbox
    </li>
</ul>
<ul class="steps">
    <li class="step">
        <a href="" class="step-a">documents</a>
    </li>
    <li class="step">
        <a href="" class="step-a">projects</a>
    </li>
    <li class="step">
        sandbox
    </li>
</ul>
<ul class="steps h3">
    <li class="step">
        <a href="" class="step-a">documents</a>
    </li>
    <li class="step">
        <a href="" class="step-a">projects</a>
    </li>
    <li class="step">
        sandbox
    </li>
</ul>

previous next