Process List: Vertical

<div class="row">
    <div class="col-sm-10">
        <ul class="hgm-process-list vertical">
            <li class="hgm-process-list__step">
                <div class="hgm-process-list__marker" data-text="1"></div><!-- &__marker -->
                <div class="hgm-process-list__text">
                    <h4 class="hgm-process-list__title">Step 1</h4>
                    <p>Summary text explaining this step to the user</p>
                </div><!-- &__text -->
            </li><!-- &__step -->
            <li class="hgm-process-list__step">
                <div class="hgm-process-list__marker" data-text="2"></div><!-- &__marker -->
                <div class="hgm-process-list__text">
                    <h4 class="hgm-process-list__title">Step 2</h4>
                    <p>Summary text explaining this step to the user</p>
                </div><!-- &__text -->
            </li><!-- &__step -->
            <li class="hgm-process-list__step">
                <div class="hgm-process-list__marker" data-text="3"></div><!-- &__marker -->
                <div class="hgm-process-list__text">
                    <h4 class="hgm-process-list__title">Step 3</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum gravida luctus.
                        Donec
                        feugiat nec sapien sit amet lobortis.</p>
                </div><!-- &__text -->
            </li><!-- &__step -->
            <li class="hgm-process-list__step">
                <div class="hgm-process-list__marker" data-text="4"></div><!-- &__marker -->
                <div class="hgm-process-list__text">
                    <h4 class="hgm-process-list__title">Step 4</h4>
                    <p>Summary text explaining this step to the user</p>
                </div><!-- &__text -->
            </li><!-- &__step -->
        </ul><!-- .hgm-process-list -->
    </div>
</div>