Indicators

Separate groups of related menu items with a beautiful divider.

Indicator dots

.u-indicator-dots class serves to divide blocks/components with three dots, through given ::after pseudo style.

Text
Text
Text 
            
              <div class="row justify-content-center">
                <div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
                  <div class="text-center position-relative">
                    <div class="u-indicator-dots">
                      <span class="mb-0">Text</span>
                    </div>
                  </div>
                </div>

                <div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
                  <div class="text-center position-relative">
                    <div class="u-indicator-dots">
                      <span class="mb-0">Text</span>
                    </div>
                  </div>
                </div>

                <div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
                  <div class="text-center">
                    <span class="mb-0">Text</span>
                  </div>
                </div>
              </div>

Indicator vertical dashed

.u-indicator-ver-dashed class adds vertically dashed border with icon pointers.

Responsive design

Responsive design has grown from a preference to a necessity.

Hosting

We know that business never stops, and neither should your website.

Search engine optimization

Improve your website's ranking in search results with our comprehensive SEO packages and services.

              
                <div class="media u-indicator-ver-dashed mb-3">
                  <div class="d-flex mt-1 mr-3">
                    <span class="u-icon u-icon-primary u-icon--xs rounded-circle">
                      <span class="fa fa-check u-icon__inner"></span>
                    </span>
                  </div>
                  <div class="media-body">
                    <h3 class="h5 text-primary">Responsive design</h3>
                    <p>Responsive design has grown from a preference to a necessity.</p>
                  </div>
                </div>

                <div class="media u-indicator-ver-dashed mb-3">
                  <div class="d-flex mt-1 mr-3">
                    <span class="u-icon u-icon-primary u-icon--xs rounded-circle">
                      <span class="fa fa-check u-icon__inner"></span>
                    </span>
                  </div>
                  <div class="media-body">
                    <h3 class="h5 text-primary">Hosting</h3>
                    <p>We know that business never stops, and neither should your website.</p>
                  </div>
                </div>

                <div class="media">
                  <div class="d-flex mt-1 mr-3">
                    <span class="u-icon u-icon-primary u-icon--xs rounded-circle">
                      <span class="fa fa-check u-icon__inner"></span>
                    </span>
                  </div>
                  <div class="media-body">
                    <h3 class="h5 text-primary">Search engine optimization</h3>
                    <p>Improve your website's ranking in search results with our comprehensive SEO packages and services.</p>
                  </div>
                </div>

Indicator border

.u-indicator-border class adds stylish bordered indicators that are excellent in step-by-step blocks.

  • 1.

    Describe your home online and get appraisal in 3 minutes

  • 2.

    We match you with the best agent to refine the appraisal and discuss your project

  • 3.

    If you decide you are ready to sell, we'll make you an offer

              
                <ul class="list-unstyled">
                  <!-- Info Block -->
                  <li class="u-indicator-steps py-3">
                    <div class="media align-items-center border rounded p-5">
                      <div class="d-flex u-indicator-steps__inner mr-3">
                        <span class="display-4 text-primary font-weight-medium">1.</span>
                      </div>
                      <div class="media-body">
                        <p class="mb-0">Describe your home online and get appraisal in 3 minutes</p>
                      </div>
                    </div>
                  </li>
                  <!-- End Info Block -->

                  <!-- Info Block -->
                  <li class="u-indicator-steps py-3">
                    <div class="media align-items-center border rounded p-5">
                      <div class="d-flex u-indicator-steps__inner mr-3">
                        <span class="display-4 text-primary font-weight-medium">2.</span>
                      </div>
                      <div class="media-body">
                        <p class="mb-0">We match you with the best agent to refine the appraisal and discuss your project</p>
                      </div>
                    </div>
                  </li>
                  <!-- End Info Block -->

                  <!-- Info Block -->
                  <li class="u-indicator-steps py-3">
                    <div class="media align-items-center border rounded p-5">
                      <div class="d-flex u-indicator-steps__inner mr-3">
                        <span class="display-4 text-primary font-weight-medium">3.</span>
                      </div>
                      <div class="media-body">
                        <p class="mb-0">If you decide you are ready to sell, we'll make you an offer</p>
                      </div>
                    </div>
                  </li>
                  <!-- End Info Block -->
                </ul>