Logo

Documentation v8.2.7

Downloads Preview
Light
Dark
System

Overview

Pulse is a custom component for highlighting elements.

Basic

Use .pulse with for any element to provide a user's attentation. 
<a href="#" class="btn btn-icon btn-light pulse">
    <i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i> 
    <span class="pulse-ring"></span>
</a>

Colors

Use .pulse-{color} class to set a pulse's color: 
<a href="#" class="btn btn-icon btn-light pulse pulse-light">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-secondary">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-success">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-info">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-warning">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-danger">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-dark">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring"></span>
</a>

Border Width

Use the standard .border-{width} class with .pulse-ring to set a pulse ring's border width.
Where width is one of:
  • 0 - for classes that set border width to 0px
  • 1 - for classes that set border width to 1px
  • 2 - for classes that set border width to 2px
  • 3 - for classes that set border width to 3px
  • 4 - for classes that set border width to 4px
  • 5 - for classes that set border width to 5px
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring border-0"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring border-1"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring border-2"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring border-3"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring border-4"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
<i class="ki-duotone ki-element-11 fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
  <span class="pulse-ring border-5"></span>
</a>
buy metronic buy mega bundle
Preview Get Help Buy Now