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-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-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-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>