Badges

Badges serve as informative labels and play an integral role in DeveloperHub's inline blocks.

How to add a Badge?

To add a badge, start typing "/" and choose Badge from the inline block list.

Badge Examples

Primary Success Warning Info Error Custom

Advanced Configuration

The custom badge can be easily modified via Custom CSS to adopt any color of your choice. Additionally, you can adjust its color dynamically based on the content it contains:

.customise .cbadge.custom[data-text="Pink Badge"] {

  color: white !important;

  background: #ff536b !important;

}

​

.customise .cbadge.custom[data-text="Purple Badge"] {

  color: white !important;

  background: #6d53ff !important;

}

Would yield Pink Badge and Purple Badge .