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
Activity
HTML:
<!-- 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="u-icon u-icon-secondary--air u-icon--sm u-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="fa fa-ellipsis-h u-icon__inner"></span>
</a>
<div id="activitySettingsDropdown" class="u-unfold right-0 text-left mt-2" aria-labelledby="activitySettingsDropdownInvoker" style="min-width: 190px;">
<a class="u-list__link" href="#">
<span class="fa fa-eye min-width-3 text-center font-size-13 mr-2"></span>
Mark as read
</a>
<a class="u-list__link" href="#">
<span class="fa fa-eye-slash min-width-3 text-center font-size-13 mr-2"></span>
Mark as unread
</a>
<a class="u-list__link" href="#">
<span class="fa fa-archive min-width-3 text-center font-size-13 mr-2"></span>
Archive
</a>
</div>
</div>
<!-- End Settings Dropdown -->
</div>
<!-- End Title & Settings -->
<hr class="mt-3 mb-4">
<div class="js-scrollbar pr-3" style="max-height: 300px;">
<!-- Activity Feed -->
<ul class="list-unstyled">
<li class="media u-indicator-ver-dashed-modern mb-3">
<span class="u-icon u-icon-primary u-icon--xs rounded-circle mr-3">
<span class="u-icon__inner">A</span>
</span>
<div class="media-body">
<h5 class="font-size-14 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-ver-dashed-modern mb-3">
<span class="u-icon u-icon-success u-icon--xs rounded-circle mr-3">
<span class="u-icon__inner">S</span>
</span>
<div class="media-body">
<h5 class="font-size-14 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-ver-dashed-modern mb-3">
<span class="u-icon u-icon-warning u-icon--xs rounded-circle mr-3">
<span class="u-icon__inner text-white">F</span>
</span>
<div class="media-body">
<h5 class="font-size-14 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-ver-dashed-modern mb-3">
<span class="u-icon u-icon-primary u-icon--xs rounded-circle mr-3">
<span class="u-icon__inner">C</span>
</span>
<div class="media-body">
<h5 class="font-size-14 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 mb-3">
<span class="u-icon u-icon-danger u-icon--xs rounded-circle mr-3">
<span class="u-icon__inner">J</span>
</span>
<div class="media-body">
<h5 class="font-size-14 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>
<!-- End Indicator -->
CSS library:
<link rel="stylesheet" href="assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
JS library and initialization:
<!-- 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>
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>