Counter circle list

Documentation for counter circle lists.

Files

app/styles/modules/_counter_circle.scss

Counter circle list

Usage

Example:code
1.
Create your company
check
2.
Enter your venue and rooms
check
3.
Invite your staff
check
4.
Set up your services
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et blandit mauris, a condimentum ex. Duis et sodales nisi. Integer fermentum massa ex, sed elementum magna cursus vel. Curabitur id tempus nisl. Aliquam nec magna tristique libero feugiat dictum. Nam laoreet sem et purus pulvinar pellentesque.
5.
Book your first appointment
Code:
<div class="counter-circle-list">
  <div class="counter-circle-list-row">
    <div class="counter-circle-list-point">
      <div class="counter-circle">1.</div>
    </div>
    <div class="counter-circle-list-item">
      <div class="counter-circle-list-item-title">
        Create your company
        <div class="counter-circle-list-item-icon"><i class="icon icon-s icon-circle-s icon-success">check</i></div>
      </div>
    </div>

  </div>
  <div class="counter-circle-list-row">
    <div class="counter-circle-list-point">
      <div class="counter-circle">2.</div>
    </div>
    <div class="counter-circle-list-item">
      <div class="counter-circle-list-item-title">
        Enter your venue and rooms
        <div class="counter-circle-list-item-icon"><i class="icon icon-s icon-circle-s icon-success">check</i></div>
      </div>
    </div>
  </div>
  <div class="counter-circle-list-row">
    <div class="counter-circle-list-point">
      <div class="counter-circle">3.</div>
    </div>
    <div class="counter-circle-list-item">
      <div class="counter-circle-list-item-title">
        Invite your staff
        <div class="counter-circle-list-item-icon"><i class="icon icon-s icon-circle-s icon-success">check</i></div>
      </div>
    </div>
  </div>
  <div class="counter-circle-list-row">
    <div class="counter-circle-list-point">
      <div class="counter-circle counter-circle-ghost">4.</div>
    </div>
    <div class="counter-circle-list-item">
      <div class="counter-circle-list-item-title">Set up your services</div>
      <div class="counter-circle-list-item-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et blandit mauris, a condimentum ex. Duis et sodales nisi. Integer fermentum massa ex, sed elementum magna cursus vel. Curabitur id tempus nisl. Aliquam nec magna tristique libero feugiat dictum. Nam laoreet sem et purus pulvinar pellentesque.</div>
    </div>
  </div>
  <div class="counter-circle-list-row">
    <div class="counter-circle-list-point">
      <div class="counter-circle counter-circle-ghost">5.</div>
    </div>
    <div class="counter-circle-list-item">
      <div class="counter-circle-list-item-title">Book your first appointment</div>
    </div>
  </div>
</div>