Go one step further with our solutions for creating an intuitive, personalized experience.
The badges provide additional information.
To create a badge, add as class h_badge to an HTML tag. Then add to it a value that will correspond to the content of the badges.
<span class="h_badge">This is a badge</span>
You can indicate the style of the badge with primary, accent, danger or success.
This a badge Accent
This a badge
Danger Another badge
This a success badge Success
<button class="h_btn">Button <span class="h_badge primary" style="margin-left:.5rem">Primary</span></button>
<p>This a badge <span class="h_badge accent">Accent</span></p>
<p><span class="h_badge primary"></span> This a badge</p>
<p><span class="h_badge danger">Danger</span> Another badge</p>
<p>This a success badge <span class="h_badge success">Success</span></p>
You can combine several utility classes to customize your badges.
Card with badge
Hello World !
<div class="h_card relative">
<span class="h_badge primary absolute top_0 right_10px translate-y_center">New!</span>
<div class="h_card_body">
<p class="h4">Card with badge</p>
<p class="mb_0">Hello World !</p>
</div>
</div>
This a badge Accent
This a badge
Danger Another badge
This a success badge Success
<button class="h_btn">Button <span class="h_badge primary" style="margin-left:.5rem">Primary</span></button>
<p>This a badge <span class="h_badge accent">Accent</span></p>
<p><span class="h_badge primary"></span> This a badge</p>
<p><span class="h_badge danger">Danger</span> Another badge</p>
<p>This a success badge <span class="h_badge success">Success</span></p>
Card with badge
Hello World !
<div class="h_card relative">
<span class="h_badge primary absolute top_0 right_10px translate-y_center">New!</span>
<div class="h_card_body">
<p class="h4">Card with badge</p>
<p class="mb_0">Hello World !</p>
</div>
</div>
| Class | Definition |
|---|---|
| h_badge | Create a badge. |
| primary | Create a primary badge. |
| accent | Create a accent badge. |
| danger | Create a danger badge. |
Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!
Cookie settings