Workflow Stepper

    
      <div class="atp-workflow-stepper">
    <div class="container">
      <div class="row">
        <div class="col-lg-auto d-flex align-items-start">
  
          <h1 class="order-1">
            Workflow Name 
          </h1>
  
          <button type="button" class="btn lmp-link atp-header-back-link order-0" data-toggle="modal" data-target="#cancelModal">
            <i class="lmp-icon icon-lg" aria-hidden="true">close</i>
            <span class="sr-only">Cancel [workflowName] workflow</span>        
          </button>
  
        </div>
        <div class="col">
  
          <ol class="atp-workflow-list" aria-label="Workflow steps">
            <li class="atp-workflow-step">
              <a href="#" class="atp-workflow-item">
                <span class="apt-workflow-complete"><i class="lmp-icon icon-md" aria-hidden="true">check</i></span>
                <span class="sr-only">Completed: </span>
                <span class="atp-workflow-title">Step Title</span>
              </a>
            </li>
            <li class="atp-workflow-step">
              <a href="#" class="atp-workflow-item">
                <span class="apt-workflow-complete"><i class="lmp-icon icon-md" aria-hidden="true">check</i></span>
                <span class="sr-only">Completed: </span>
                <span class="atp-workflow-title">Step Title</span>
              </a>
            </li>
            <li class="atp-workflow-step">
              <a href="#" class="atp-workflow-item" aria-current="step">
                <span class="sr-only">Current: </span>
                <span class="atp-workflow-title">Step Title</span>
              </a>
            </li>
            <li class="atp-workflow-step">
              <a href="#" class="atp-workflow-item" aria-disabled="true">
                <span class="atp-workflow-title">Step Title</span>
              </a>
            </li>
          </ol>
  
        </div>
      </div>
    </div>
  </div>
  
  <div class="lmp-modal modal fade" id="cancelModal" tabindex="-1" aria-labelledby="cancelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title" id="cancelModalLabel">Exit workflow?</h3>
        </div>
        <div class="modal-body">
          <p>If you exit the workflow now, your current progress will not be saved.</p>
        </div>
        <div class="modal-footer">
          <button class="btn lmp-outline-secondary" data-dismiss="modal">Stay on page</button>
          <a href="#" class="btn lmp-secondary">Exit</a>
        </div>
      </div>
    </div>
  </div>