• Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototype
  • Acme Marketplace
  • Guidelines
  • Display
  • Navigate
  • Forms
  • Layout
  • Prototypes
    • Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototypes
    • Release Notes
    • Sass Documentation
    • Gulp Documentation
    • CSS/SASS Stats
    • Preview All Components
Base by AppDirect

Display

Communicate specialized information

Alerts & Messages
Tooltips
Badges
Status & Progress
Avatars & Logos
App Tiles
Numbers & Pricing

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>
  • Framework
  • Display
  • Badges
  • Powered by AppDirect © 2022
  • Contact Support
  • Terms & Conditions
  • Privacy Policy
    • Contact Support
    • Terms & Conditions
    • Privacy Policy
Themes
    Assistant
    • Bonzi
    • Clippy
    • F1
    • Genie
    • Genius
    • Links
    • Merlin
    • Peedy
    • Rocky
    • Rover
    Hide
    4
    1366 × 768
    10.51%
    9
    1024 × 768
    4.02%
    3
    1280 × 800
    11.08%
    1
    1440 × 900
    16.09%
    7
    1600 × 900
    5.59%
    6
    1280 × 1024
    5.77%
    5
    1680 × 1050
    7.48%
    2
    1920 × 1080
    15.99%
    8
    1920 × 1200
    5.39%
    10
    2560 × 1440
    3.23%