@kabbage/sprout 0.25.2

Progress Stepper Component

A CSS implementation of the Sprout progress stepper component.

Example

html 
<div class="spr-progress-stepper-stack-text-container">
  <img src="https://sprout-cdn.kabbage.com/components/progress-stepper/green-check.svg">
  <div class="spr-progress-stepper-text-label">Step Label</div>
  <div class="spr-progress-stepper-text-info">Secondary info</div>
</div>
<div class="spr-progress-stepper-stack-dash">
</div>
<div class="spr-progress-stepper-stack-text-container">
  <img src="https://sprout-cdn.kabbage.com/components/progress-stepper/green-check.svg">
  <div class="spr-progress-stepper-text-label">Step Label</div>
  <div class="spr-progress-stepper-text-info">Secondary info</div>
</div>
<div class="spr-progress-stepper-stack-dash">
</div>
<div class="spr-progress-stepper-stack-text-container">
  <img src="https://sprout-cdn.kabbage.com/components/progress-stepper/green-circle.svg">
  <div class="spr-progress-stepper-text-label">Step Label</div>
  <div class="spr-progress-stepper-text-info">Secondary info</div>
</div>

<br/>

<div class="spr-progress-stepper-inline-container">
  <div class="spr-progress-stepper-inline-item">
    <div class="spr-progress-stepper-inline-dash-container">
      <img src="https://sprout-cdn.kabbage.com/components/progress-stepper/green-check.svg">
      <div class="spr-progress-stepper-inline-dash"></div>
    </div>
    <div class="spr-progress-stepper-inline-text-container">
      <div class="spr-progress-stepper-text-label">Step Label</div>
      <div class="spr-progress-stepper-text-info">Secondary Info</div>
    </div>
  </div>
  <div class="spr-progress-stepper-inline-item">
    <div class="spr-progress-stepper-inline-dash-container">
      <img src="https://sprout-cdn.kabbage.com/components/progress-stepper/green-check.svg">
      <div class="spr-progress-stepper-inline-dash"></div>
    </div>
    <div class="spr-progress-stepper-inline-text-container">
      <div class="spr-progress-stepper-text-label">Step Label</div>
      <div class="spr-progress-stepper-text-info">Secondary Info</div>
    </div>
  </div>
  <div class="spr-progress-stepper-inline-item">
    <div class="spr-progress-stepper-inline-dash-container">
      <img src="https://sprout-cdn.kabbage.com/components/progress-stepper/green-check.svg">
      <div class="spr-progress-stepper-inline-dash"></div>
    </div>
    <div class="spr-progress-stepper-inline-text-container">
      <div class="spr-progress-stepper-text-label">Step Label</div>
      <div class="spr-progress-stepper-text-info">Secondary Info</div>
    </div>
  </div>
  <div class="spr-progress-stepper-inline-item">
    <div class="spr-progress-stepper-inline-dash-container">
      <img src="https://sprout-cdn.kabbage.com/components/progress-stepper/green-circle.svg">
    </div>
    <div class="spr-progress-stepper-inline-text-container">
      <div class="spr-progress-stepper-text-label">Step Label</div>
      <div class="spr-progress-stepper-text-info">Secondary Info</div>
    </div>
  </div>
</div>

Requires

@mixin spr-text()

Compiled CSS

Example

scss 
@import 'components/progress-stepper';