Badges

Badges

Use badges to show numbers, texts, or just as an icon to get user attention, badges get their size from parent font size either you can set a specific size.

Badge pulse effect

.pulse is a helper class that gives animation to the element ::after so it will get users' attention where is it necessary.

index.html

<p class="size-xs">
  You have got new messages!
  <span class="badge style-green edge-circle pulse">+1</span>
</p>

<p class="size-md">
  You have got new messages!
  <span class="badge style-orange edge-round-md pulse">+50</span>
</p>

<p class="size-2x">
  You have got new messages!
  <span class="badge style-red edge-round-sm">+999</span>
</p>

Overlay badges

Here is an example of badge over button:

index.html

<button class="my-button button bordered">
  Help Us!
  <span class="my-badge badge style-red edge-circle pulse"></span>
</button>
<button class="my-button button bordered">
  New Messages!
  <span class="my-badge badge style-blue edge-circle pulse">20</span>
</button>

style.css

.my-button {
  position: relative;
  min-width: 120px;
  margin: 10px;
}

.my-badge {
  position: absolute;
  top: -2px;
  right: -2px;
}

Customization

These are CSS variables for badges that you can use to customize the default colors or create new kind of badge:

--flatify__badge-txt-color
--flatify__badge-bg-color

index.html

<p>
  You have got new messages!
  <span class="badge custom-badge">+1</span>
</p>

<p>
  You have got new messages!
  <span class="badge custom-badge anim-hue">+1</span>
</p>

style.css

.custom-badge {
  --flatify__badge-txt-color: #fff;
  --flatify__badge-bg-color: linear-gradient(to right, #8a2387, #e94057, #f27121);
}