Documentation v8.1.6

Preview Downloads Purchase

Overview

Pulse is a custom component for highlighting elements.

Basic

Use .pulsewith for any element to provide a user's attentation.
<a href="#" class="btn btn-icon btn-light pulse">
    <span class="svg-icon svg-icon-2><svg>...</svg></span>
    <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-white">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-light">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-secondary">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-success">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-info">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-warning">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-danger">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-dark">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring"></span>
</a>

Border Width

Use the standard .border-{width}class with .pulse-ringto set a pulse ring's border width.
Where widthis 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">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring border-0"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring border-1"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring border-2"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring border-3"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring border-4"></span>
</a>
<a href="#" class="btn btn-icon btn-light pulse pulse-primary">
  <span class="svg-icon svg-icon-1"><svg>...</svg></span>
  <span class="pulse-ring border-5"></span>
</a>
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Video Tutorials
From guides and how-tos, to live demos and code examples to get started right away.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New ?
Latest features and improvements added with our users feedback in mind.
Buy now