This sample demonstrates the default functionalities of the badge. To apply the badge, add
.e-badge
class to the target element.
The Badge is a component which is developed in pure CSS and designed in
em
relative units, so that badge will always be in relevant to the parent and makes the badge super easy to customize.
For example, to increase the size of the badge, increase the font-size, width, and height.
There are 6 different types of badges as follows:
.e-badge
class to the target element.
.e-badge-notification
class with
.e-badge
and change the wrapper element to
position: relative
property.
.e-badge-circle
class with
.e-badge
.
.e-badge-pill
class with
.e-badge
.
.e-badge-dot
class with
.e-badge
and change the wrapper element to
position: relative
property.
The badge component supports two positions, and this is applicable only to notification and dot badge.
.e-.badge-bottom
class with
.e-badge
.