Steps

Progress steps indicate where the user is in a step-by-step process. These are useful for sign up pages where the user needs to enter data across multiple steps.

Steps

Used to find relevant content without navigation using words or phrases.

Public Enrollment Steps


1 Applicant info
  • Name & Contact
  • Medicare info
2 Eligibility
3 Choose Your Plan
  • Compare Plans
  • Drug Coverage
  • Additional Information
4 Completing Enrollment
  • Payment Method
  • Confirmation


HTML

<div class="enrollment-steps">
  <div class="enrollment-steps-item active">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">1</span> Applicant info
    </h5>
    <ul class="enrollment-steps-list">
      <li class="active">
        Name & Contact
      </li>
      <li>
        Medicare info
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">2</span> Eligibility
    </h5>
  </div>
  <div class="enrollment-steps-item">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">3</span> Choose Your Plan
    </h5>
    <ul class="enrollment-steps-list">
      <li>
        Compare Plans
      </li>
      <li>
        Drug Coverage
      </li>
      <li>
        Additional Information
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">4</span> Completing Enrollment
    </h5>
    <ul class="enrollment-steps-list">
      <li>
        Payment Method
      </li>
      <li>
        Confirmation
      </li>
    </ul>
  </div>
</div>


1 Applicant info
  • Name & Contact
  • Medicare info
2 Eligibility
3 Choose Your Plan
  • Compare Plans
  • Drug Coverage
  • Additional Information
4 Completing Enrollment
  • Payment Method
  • Confirmation


HTML

<div class="enrollment-steps">
  <div class="enrollment-steps-item active">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">1</span> Applicant info
    </h5>
    <ul class="enrollment-steps-list">
      <li class="done">
        Name & Contact
      </li>
      <li class="active">
        Medicare info
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">2</span> Eligibility
    </h5>
  </div>
  <div class="enrollment-steps-item">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">3</span> Choose Your Plan
    </h5>
    <ul class="enrollment-steps-list">
      <li>
        Compare Plans
      </li>
      <li>
        Drug Coverage
      </li>
      <li>
        Additional Information
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">4</span> Completing Enrollment
    </h5>
    <ul class="enrollment-steps-list">
      <li>
        Payment Method
      </li>
      <li>
        Confirmation
      </li>
    </ul>
  </div>
</div>


1 Applicant info
  • Name & Contact
  • Medicare info
2 Eligibility
3 Choose Your Plan
  • Compare Plans
  • Drug Coverage
  • Additional Information
4 Completing Enrollment
  • Payment Method
  • Confirmation


HTML

<div class="enrollment-steps">
  <div class="enrollment-steps-item done">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">1</span> Applicant info
    </h5>
    <ul class="enrollment-steps-list">
      <li class="done">
        Name & Contact
      </li>
      <li class="done">
        Medicare info
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item active">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">2</span> Eligibility
    </h5>
  </div>
  <div class="enrollment-steps-item">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">3</span> Choose Your Plan
    </h5>
    <ul class="enrollment-steps-list">
      <li>
        Compare Plans
      </li>
      <li>
        Drug Coverage
      </li>
      <li>
        Additional Information
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">4</span> Completing Enrollment
    </h5>
    <ul class="enrollment-steps-list">
      <li>
        Payment Method
      </li>
      <li>
        Confirmation
      </li>
    </ul>
  </div>
</div>


1 Applicant info
  • Name & Contact
  • Medicare info
2 Eligibility
3 Choose Your Plan
  • Compare Plans
  • Drug Coverage
  • Additional Information
4 Completing Enrollment
  • Payment Method
  • Confirmation


HTML

<div class="enrollment-steps">
  <div class="enrollment-steps-item done">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">1</span> Applicant info
    </h5>
    <ul class="enrollment-steps-list">
      <li class="done">
        Name & Contact
      </li>
      <li class="done">
        Medicare info
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item done headline-only">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">2</span> Eligibility
    </h5>
  </div>
  <div class="enrollment-steps-item active">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">3</span> Choose Your Plan
    </h5>
    <ul class="enrollment-steps-list">
      <li class="active">
        Compare Plans
      </li>
      <li>
        Drug Coverage
      </li>
      <li>
        Additional Information
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">4</span> Completing Enrollment
    </h5>
    <ul class="enrollment-steps-list">
      <li>
        Payment Method
      </li>
      <li>
        Confirmation
      </li>
    </ul>
  </div>
</div>


1 Applicant info
  • Name & Contact
  • Medicare info
2 Eligibility
3 Choose Your Plan
  • Compare Plans
  • Drug Coverage
  • Additional Information
4 Completing Enrollment
  • Payment Method
  • Confirmation


HTML

<div class="enrollment-steps">
  <div class="enrollment-steps-item done">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">1</span> Applicant info
    </h5>
    <ul class="enrollment-steps-list">
      <li class="done">
        Name & Contact
      </li>
      <li class="done">
        Medicare info
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item done headline-only">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">2</span> Eligibility
    </h5>
  </div>
  <div class="enrollment-steps-item active">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">3</span> Choose Your Plan
    </h5>
    <ul class="enrollment-steps-list">
      <li class="done">
        Compare Plans
      </li>
      <li class="active">
        Drug Coverage
      </li>
      <li>
        Additional Information
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">4</span> Completing Enrollment
    </h5>
    <ul class="enrollment-steps-list">
      <li>
        Payment Method
      </li>
      <li>
        Confirmation
      </li>
    </ul>
  </div>
</div>


1 Applicant info
  • Name & Contact
  • Medicare info
2 Eligibility
3 Choose Your Plan
  • Compare Plans
  • Drug Coverage
  • Additional Information
4 Completing Enrollment
  • Payment Method
  • Confirmation


HTML

<div class="enrollment-steps">
  <div class="enrollment-steps-item done">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">1</span> Applicant info
    </h5>
    <ul class="enrollment-steps-list">
      <li class="done">
        Name & Contact
      </li>
      <li class="done">
        Medicare info
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item done headline-only">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">2</span> Eligibility
    </h5>
  </div>
  <div class="enrollment-steps-item active">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">3</span> Choose Your Plan
    </h5>
    <ul class="enrollment-steps-list">
      <li class="done">
        Compare Plans
      </li>
      <li class="done">
        Drug Coverage
      </li>
      <li class="active">
        Additional Information
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">4</span> Completing Enrollment
    </h5>
    <ul class="enrollment-steps-list">
      <li>
        Payment Method
      </li>
      <li>
        Confirmation
      </li>
    </ul>
  </div>
</div>


1 Applicant info
  • Name & Contact
  • Medicare info
2 Eligibility
3 Choose Your Plan
  • Compare Plans
  • Drug Coverage
  • Additional Information
4 Completing Enrollment
  • Payment Method
  • Confirmation


HTML

<div class="enrollment-steps">
  <div class="enrollment-steps-item done">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">1</span> Applicant info
    </h5>
    <ul class="enrollment-steps-list">
      <li class="done">
        Name & Contact
      </li>
      <li class="done">
        Medicare info
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item done headline-only">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">2</span> Eligibility
    </h5>
  </div>
  <div class="enrollment-steps-item done">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">3</span> Choose Your Plan
    </h5>
    <ul class="enrollment-steps-list">
      <li class="done">
        Compare Plans
      </li>
      <li class="done">
        Drug Coverage
      </li>
      <li class="done">
        Additional Information
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item active">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">4</span> Completing Enrollment
    </h5>
    <ul class="enrollment-steps-list">
      <li class="active">
        Payment Method
      </li>
      <li>
        Confirmation
      </li>
    </ul>
  </div>
</div>


1 Applicant info
  • Name & Contact
  • Medicare info
2 Eligibility
3 Choose Your Plan
  • Compare Plans
  • Drug Coverage
  • Additional Information
4 Completing Enrollment
  • Payment Method
  • Confirmation


HTML

<div class="enrollment-steps">
  <div class="enrollment-steps-item done">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">1</span> Applicant info
    </h5>
    <ul class="enrollment-steps-list">
      <li class="done">
        Name & Contact
      </li>
      <li class="done">
        Medicare info
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item done headline-only">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">2</span> Eligibility
    </h5>
  </div>
  <div class="enrollment-steps-item done">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">3</span> Choose Your Plan
    </h5>
    <ul class="enrollment-steps-list">
      <li class="done">
        Compare Plans
      </li>
      <li class="done">
        Drug Coverage
      </li>
      <li class="done">
        Additional Information
      </li>
    </ul>
  </div>
  <div class="enrollment-steps-item active">
    <h5 class="enrollment-steps-headline">
      <span class="enrollment-steps-icon">4</span> Completing Enrollment
    </h5>
    <ul class="enrollment-steps-list">
      <li class="done">
        Payment Method
      </li>
      <li class="active">
        Confirmation
      </li>
    </ul>
  </div>
</div>



Steps Horizontal


Main Heading

Please provide your name and email

Active Heading

A few details about your company

Inactive Heading

Start collaborating with your team

Inactive Heading

Start collaborating with your team



HTML

<div class="steps steps-horizontal">
  <div class="steps-item done">
    <div class="steps-icon"></div>
    <div class="steps-text">
      <h5>Main Heading</h5>
      <p>Please provide your name and email</p>
    </div>
  </div>
  <div class="steps-item active">
    <div class="steps-icon"></div>
    <div class="steps-text">
      <h5>Active Heading</h5>
      <p>A few details about your company</p>
    </div>
  </div>
  <div class="steps-item">
    <div class="steps-icon"></div>
    <div class="steps-text">
      <h5>Inactive Heading</h5>
      <p>Start collaborating with your team</p>
    </div>
  </div>
  <div class="steps-item">
    <div class="steps-icon"></div>
    <div class="steps-text">
      <h5>Inactive Heading</h5>
      <p>Start collaborating with your team</p>
    </div>
  </div>
</div>


Steps Vertical / Mobile


Main Heading

Please provide your name and email

Active Heading

A few details about your company

Inactive Heading

Start collaborating with your team

Inactive Heading

Start collaborating with your team



HTML

<div class="steps steps-vertical">
  <div class="steps-item done">
    <div class="steps-icon"></div>
    <div class="steps-text">
      <h5>Main Heading</h5>
      <p>Please provide your name and email</p>
    </div>
  </div>
  <div class="steps-item active">
    <div class="steps-icon"></div>
    <div class="steps-text">
      <h5>Active Heading</h5>
      <p>A few details about your company</p>
    </div>
  </div>
  <div class="steps-item">
    <div class="steps-icon"></div>
    <div class="steps-text">
      <h5>Inactive Heading</h5>
      <p>Start collaborating with your team</p>
    </div>
  </div>
  <div class="steps-item">
    <div class="steps-icon"></div>
    <div class="steps-text">
      <h5>Inactive Heading</h5>
      <p>Start collaborating with your team</p>
    </div>
  </div>
</div>