Example of Default in ASP.NET Core Badge Control
This sample demonstrates the default functionalities of the badge. To apply the badge, add
.e-badge class to the target element.
DEMO
SOURCE
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:
-
Default badge: To get the default badge, add the
.e-badgeclass to the target element. -
Notification badge: To get the notification badge, add the
.e-badge-notificationclass with.e-badgeand change the wrapper element toposition: relativeproperty. -
Circle badge: To get the circle badge, add the
.e-badge-circleclass with.e-badge. -
Pill badge: To get the pill badge, add the
.e-badge-pillclass with.e-badge. -
Dot badge: To get the dot badge, add the
.e-badge-dotclass with.e-badgeand change the wrapper element toposition: relativeproperty.
The badge component supports two positions, and this is applicable only to notification and dot badge.
- Top: It is the default position, so there is no additional class needed for the top position.
-
Bottom: To get the bottom badge, add the
.e-.badge-bottomclass with.e-badge.