Stepper@1.0.0

<div class="c-stepper--dark">
    <div class="c-stepper__step">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p class="material-icons">mode_edit</p>
            </div>
        </div>
        <p>Choose activity</p>
        <hr />
    </div>
    <div class="c-stepper__step--active">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>2</p>
            </div>
        </div>
        <p>Choose options</p>
        <hr />
    </div>
    <div class="c-stepper__step--inactive">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>3</p>
            </div>
        </div>
        <p>Choose content</p>
        <hr />
    </div>
    <div class="c-stepper__step--inactive">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>4</p>
            </div>
        </div>
        <p>Choose assessment</p>
        <hr />
    </div>
    <div class="c-stepper__step--inactive">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>5</p>
            </div>
        </div>
        <p>Finalize and publish</p>
        <hr />
    </div>
</div>

<div class="c-stepper--light">
    <div class="c-stepper__step--active">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>1</p>
            </div>
        </div>
        <p>Add Slides</p>
    </div>
    <div class="c-stepper__step--inactive">
        <div class="c-stepper__step-circle">
            <div class="c-stepper__step-circle-content">
                <p>2</p>
            </div>
        </div>
        <p>Open and add comment</p>
    </div>
</div>