Badges

Default

Example Class Name Code
Default .adb-badge 
<span class="adb-badge">Default</span>
Success .adb-badge.adb-badge__success 
<span class="adb-badge adb-badge__success">Success</span>
Pending .adb-badge.adb-badge__pending 
<span class="adb-badge adb-badge__pending">Pending</span>
Failure .adb-badge.adb-badge__error 
<span class="adb-badge adb-badge__error">Failure</span>
Information .adb-badge.adb-badge__info 
<span class="adb-badge adb-badge__info">Information</span>

Promotional

Example Class Name Code
Discount .adb-badge.adb-badge__promo 
<span class="adb-badge adb-badge__promo">Discount</span>
Free Trial .adb-badge.adb-badge__free 
<span class="adb-badge adb-badge__free">Free Trial</span>
Coming Soon! .adb-badge.adb-badge__soon 
<span class="adb-badge adb-badge__soon">Coming Soon!</span>

Icon Badges

<p>
  <span class="adb-badge adb-badge__icon">
    <i class="adb-icon__star"></i>
  </span>
  <span class="adb-badge adb-badge__icon">
    <i class="adb-icon__clock"></i>
  </span>
</p>

Number Badges

1 99 100 

<p>
  <span class="adb-badge adb-badge__number">1</span>
  <span class="adb-badge adb-badge__number">99</span>
  <span class="adb-badge adb-badge__number">100</span>
</p>