Steppers

.col-md-12
  %ul.stepper.stepper-horizontal
    %li.completed
      %a
        %span.circle
          %i.material-icons check
        %span.header First step
    %li.active
      %a
        %span.circle 2
        %span.header Second step
    %li
      %a
        %span.circle 3
        %span.header Third step
    %li
      %a
        %span.circle 4
        %span.header Fourth step

.row.mt-1
  .col-md-12
    %ul.stepper.stepper-vertical
      %li.completed
        %a
          %span.circle
            %i.material-icons check
          %span.header First step
      %li.active
        %a
          %span.circle 2
          %span.header Second step
        .step-content.grey.lighten-3
          %p
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse
            cupiditate voluptate facere iusto quaerat vitae excepturi,
            accusantium ut aliquam repellat atque nesciunt nostrum similique.
            Inventore nostrum ut, nobis porro sapiente.
        .d-flex.justify-content-end.mt-3.flex-row.w-100
          .col-md-12.text-right
            %button.btn-flat.waves-effect Cancel
            %button.btn.btn-primary Next
      %li
        %a
          %span.circle 3
          %span.header Third step
      %li
        %a
          %span.circle 4
          %span.header Fourth step