Base by AppDirect

Display

Communicate specialized information

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>
Solid .adb-badge.adb-badge__solid 
<span class="adb-badge adb-badge__solid">Solid</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 .adb-badge.adb-badge__add 
<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>
Hot Deal! .adb-badge.adb-badge__hot 
<span class="adb-badge adb-badge__hot">Hot Deal!</span>
Consider this .adb-badge.adb-badge__neutral 
<span class="adb-badge adb-badge__neutral">Consider this</span>

Notificational

Example Class Name Code
6 .adb-badge.adb-badge__notification 
<span class="adb-badge adb-badge__notification">6</span>
6 .adb-badge.adb-badge--large.adb-badge__notification 
<span class="adb-badge adb-badge__large adb-badge__notification">6</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>