Indicators - Front Starter | Front - Responsive Website Template

Indicator dots

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

Result
HTML

Professional Design

Achieve virtually any design and layout from within the one template.

Front Strategy

We strive to figure out ways to help your business grow through all platforms.

Unlimited Power

Find what you need in one template and combine features at will.

<!-- Process Section -->
<div class="container space-2">
  <div class="row">
    <div class="col-md-4 mb-7 mb-md-0">
      <!-- Process -->
      <div class="text-center">
        <div class="position-relative">
          <div id="SVGcircleProcess1" class="svg-preloader u-indicator-dots min-height-155 mb-2">
            <!-- Icon -->
            <span class="text-success btn btn-lg btn-icon mt-7">
              <span class="fab fa-yelp font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
            </span>
            <!-- End Icon -->

            <!-- SVG Shape -->
            <figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
              <img class="js-svg-injector" src="../assets/svg/components/circle-process-1.svg" alt="Image Description"
                   data-parent="#SVGcircleProcess1">
            </figure>
            <!-- End SVG Shape -->
          </div>
        </div>

        <h3 class="h5">Professional Design</h3>
        <p class="mb-md-0">Achieve virtually any design and layout from within the one template.</p>
      </div>
      <!-- End Process -->
    </div>

    <div class="col-md-4 mb-7 mb-md-0">
      <!-- Process -->
      <div class="text-center">
        <div class="position-relative">
          <div id="SVGcircleProcess2" class="svg-preloader u-indicator-dots min-height-155 mb-2">
            <!-- Icon -->
            <span class="text-primary btn btn-lg btn-icon mt-7">
              <span class="fas fa-fire font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
            </span>
            <!-- End Icon -->

            <!-- SVG Shape -->
            <figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
              <img class="js-svg-injector" src="../assets/svg/components/circle-process-2.svg" alt="Image Description"
                   data-parent="#SVGcircleProcess2">
            </figure>
            <!-- End SVG Shape -->
          </div>
        </div>

        <h3 class="h5">Front Strategy</h3>
        <p class="mb-md-0">We strive to figure out ways to help your business grow through all platforms.</p>
        <!-- End Process -->
      </div>
    </div>

    <div class="col-md-4">
      <!-- Process -->
      <div class="text-center">
        <div id="SVGcircleProcess3" class="svg-preloader min-height-155 mb-2">
          <!-- Icon -->
          <span class="text-danger btn btn-lg btn-icon mt-7">
            <span class="fab fa-whmcs font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
          </span>
          <!-- End Icon -->

          <!-- SVG Shape -->
            <figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
              <img class="js-svg-injector" src="../assets/svg/components/circle-process-3.svg" alt="Image Description"
                   data-parent="#SVGcircleProcess3">
            </figure>
            <!-- End SVG Shape -->
        </div>

        <h3 class="h5">Unlimited Power</h3>
        <p class="mb-md-0">Find what you need in one template and combine features at will.</p>
        <!-- End Process -->
      </div>
    </div>
  </div>
</div>
<!-- End Process Section -->

Indicator border

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

Result
HTML

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>

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.

<ul class="list-unstyled u-indicator-vertical-dashed">
  <!-- Info -->
  <li class="media u-indicator-vertical-dashed-item">
    <span class="btn btn-xs btn-icon btn-primary rounded-circle mr-3">
      <span class="fas fa-check btn-icon__inner"></span>
    </span>
    <div class="media-body mt-n1">
      <h3 class="h5 text-primary">Responsive design</h3>
      <p>Responsive design has grown from a preference to a necessity.</p>
    </div>
  </li>
  <!-- End Info -->

  <!-- Info -->
  <li class="media u-indicator-vertical-dashed-item">
    <span class="btn btn-xs btn-icon btn-primary rounded-circle mr-3">
      <span class="fas fa-check btn-icon__inner"></span>
    </span>
    <div class="media-body mt-n1">
      <h3 class="h5 text-primary">Hosting</h3>
      <p>We know that business never stops, and neither should your website.</p>
    </div>
  </li>
  <!-- End Info -->

  <!-- Info -->
  <li class="media u-indicator-vertical-dashed-item">
    <span class="btn btn-xs btn-icon btn-primary rounded-circle mr-3">
      <span class="fas fa-check btn-icon__inner"></span>
    </span>
    <div class="media-body mt-n1">
      <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>
  </li>
  <!-- End Info -->
</ul>

Indicator - vertical dashed #2

Activity

A

Amanta Owens

Added new task: Slack home page redesign
30 min ago
S

Sebastian Diaz

Added new task: Mapbox logo redesign
44 min ago
F

Eliza Donovan

Added new task: Spotify branding
1 hour ago
C

Cler Lockhart

Added new task: Dropbox home page redesign
15 hours ago
J

James Collins

Added new task: InVison branding
1 day ago

<!-- Indicator -->
<div class="card">
  <div class="card-body pt-4 pb-5 px-5 mb-3 mb-md-0">
    <!-- Title & Settings -->
    <div class="d-flex justify-content-between align-items-center">
      <h4 class="h6 mb-0">Activity</h4>

      <!-- Settings Dropdown -->
      <div class="position-relative">
        <a id="activitySettingsDropdownInvoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent" href="javascript:;" role="button"
           aria-controls="activitySettingsDropdown"
           aria-haspopup="true"
           aria-expanded="false"
           data-unfold-event="click"
           data-unfold-target="#activitySettingsDropdown"
           data-unfold-type="css-animation"
           data-unfold-duration="300"
           data-unfold-delay="300"
           data-unfold-hide-on-scroll="true"
           data-unfold-animation-in="slideInUp"
           data-unfold-animation-out="fadeOut">
          <span class="fas fa-ellipsis-h btn-icon__inner"></span>
        </a>

        <div id="activitySettingsDropdown" class="dropdown-menu dropdown-unfold dropdown-menu-right" aria-labelledby="activitySettingsDropdownInvoker" style="min-width: 190px;">
          <a class="dropdown-item" href="#">
            <small class="fas fa-eye dropdown-item-icon"></small>
            Mark as read
          </a>
          <a class="dropdown-item" href="#">
            <small class="fas fa-eye-slash dropdown-item-icon"></small>
            Mark as unread
          </a>
          <a class="dropdown-item" href="#">
            <small class="fas fa-archive dropdown-item-icon"></small>
            Archive
          </a>
        </div>
      </div>
      <!-- End Settings Dropdown -->
    </div>
    <!-- End Title & Settings -->

    <hr class="mt-3 mb-4">

    <div class="overflow-hidden">
      <div class="js-scrollbar pr-3" style="max-height: 300px;">
        <!-- Activity Feed -->
        <ul class="list-unstyled u-indicator-vertical-dashed">
          <li class="media u-indicator-vertical-dashed-item">
            <span class="btn btn-xs btn-icon btn-primary rounded-circle mr-3">
              <span class="btn-icon__inner">A</span>
            </span>
            <div class="media-body">
              <h5 class="font-size-1 mb-1">Amanta Owens</h5>
              <p class="small mb-1">Added new task: <span class="font-weight-medium">Slack home page redesign</span></p>
              <small class="d-block text-muted">30 min ago</small>
            </div>
          </li>

          <li class="media u-indicator-vertical-dashed-item">
            <span class="btn btn-xs btn-icon btn-success rounded-circle mr-3">
              <span class="btn-icon__inner">S</span>
            </span>
            <div class="media-body">
              <h5 class="font-size-1 mb-1">Sebastian Diaz</h5>
              <p class="small mb-1">Added new task: <span class="font-weight-medium">Mapbox logo redesign</span></p>
              <small class="d-block text-muted">44 min ago</small>
            </div>
          </li>

          <li class="media u-indicator-vertical-dashed-item">
            <span class="btn btn-xs btn-icon btn-warning rounded-circle mr-3">
              <span class="btn-icon__inner text-white">F</span>
            </span>
            <div class="media-body">
              <h5 class="font-size-1 mb-1">Eliza Donovan</h5>
              <p class="small mb-1">Added new task: <span class="font-weight-medium">Spotify branding</span></p>
              <small class="d-block text-muted">1 hour ago</small>
            </div>
          </li>

          <li class="media u-indicator-vertical-dashed-item">
            <span class="btn btn-xs btn-icon btn-primary rounded-circle mr-3">
              <span class="btn-icon__inner">C</span>
            </span>
            <div class="media-body">
              <h5 class="font-size-1 mb-1">Cler Lockhart</h5>
              <p class="small mb-1">Added new task: <span class="font-weight-medium">Dropbox home page redesign</span></p>
              <small class="d-block text-muted">15 hours ago</small>
            </div>
          </li>

          <li class="media u-indicator-vertical-dashed-item">
            <span class="btn btn-xs btn-icon btn-danger rounded-circle mr-3">
              <span class="btn-icon__inner">J</span>
            </span>
            <div class="media-body">
              <h5 class="font-size-1 mb-1">James Collins</h5>
              <p class="small mb-1">Added new task: <span class="font-weight-medium">InVison branding</span></p>
              <small class="d-block text-muted">1 day ago</small>
            </div>
          </li>
        </ul>
        <!-- End Activity Feed -->
      </div>
    </div>
  </div>
</div>
<!-- End Indicator -->

<link rel="stylesheet" href="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>

<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.malihu-scrollbar.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));

    // initialization of malihu scrollbar
    $.HSCore.components.HSMalihuScrollBar.init($('.js-scrollbar'));
  });
</script>