• 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

Status & Progress

Statuses

Example Class Name Code
Active .adb-status__active
<span class="adb-status adb-status__active">
  <span class="adb-status--gem"></span>
  Active
</span>
Pending .adb-status__pending
<span class="adb-status adb-status__pending">
  <span class="adb-status--gem"></span>
  Pending
</span>
Failed .adb-status__error
<span class="adb-status adb-status__error">
  <span class="adb-status--gem"></span>
  Failed
</span>
Canceled .adb-status__disabled
<span class="adb-status adb-status__disabled">
  <span class="adb-status--gem"></span>
  Canceled
</span>

Abbreviated

If there is not enough space for the status word label, include it as a tooltip on the status gem.

<span class="adb-status adb-status__error">
  <span class="adb-status--gem" data-toggle="tooltip" title="Failed"></span>
</span>
<span class="adb-status adb-status__pending">
  <span class="adb-status--gem" data-toggle="tooltip" title="Pending"></span>
</span>
<span class="adb-status adb-status__active">
  <span class="adb-status--gem" data-toggle="tooltip" title="Success"></span>
</span>
<span class="adb-status adb-status__disabled">
  <span class="adb-status--gem" data-toggle="tooltip" title="Disabled"></span>
</span>

Completion

Shows the status of a task.

<span class="adb-status adb-status__success">
  <i class="adb-icon__check_circle"></i>
</span>
<span class="adb-status adb-status__success">
  <i class="adb-icon__check"></i>
</span>
<span class="adb-status adb-status__neutral">
  <i class="adb-icon__error"></i>
</span>
<span class="adb-status adb-status__error">
  <i class="adb-icon__stop"></i>
</span>

Informative Status Icons with Tooltip on Hover

Displays further details on hover. Works in combination with other Tooltip options.

Notice the opacity change on the System Information Icons on hover.

<i class="adb-icon_alert adb-icon__question" data-toggle="tooltip" title="03/10/2015"></i>

Loading Icons

<button class="adb-button__large" disabled type="button">
  <span>Run Test</span>
  <span class="adb-loading">
    <span class="adb-loading--text">Loading ...</span>
  </span>
</button>
<button disabled type="button">
  <span>Run Test</span>
  <span class="adb-loading">
    <span class="adb-loading--text">Loading ...</span>
  </span>
</button>
<button class="adb-button__small" disabled type="button">
  <span>Run Test</span>
  <span class="adb-loading">
    <span class="adb-loading--text">Loading ...</span>
  </span>
</button>

Colors

Example Class Name Code
Loading ... .adb-loading
<span class="adb-loading">
  <span class="adb-loading--text">Loading ...</span>
</span>
Loading ... .adb-loading__light
<span class="adb-loading adb-loading__light">
  <span class="adb-loading--text">Loading ...</span>
</span>

See Buttons for loading states in buttons.

Progress and Usage Meters

Progress and Usage Meters display a status based on the level of completion. They are used for counting the number of users assigned to an app or show the status of an application before it has been published.

Use Loading Icons or Loading Buttons or Uploading Icons as indeterminate indicators.

Attribute Description
data-percent Format is "<#>", where # is a number between 0 and 100.
data-state Optional Possible values include empty, low, full and error.

Sizes

Example Class Code
65%
.adb-js-meter.adb-meter
<div class="adb-js-meter adb-meter" data-percent="65" data-toggle="tooltip" title="65%">
  <span class="adb-meter--percent">
    65%
  </span>
</div>
65%
.adb-meter__small
<div class="adb-js-meter adb-meter adb-meter__small" data-percent="65" data-toggle="tooltip" title="65%">
  <span class="adb-meter--percent">
    65%
  </span>
</div>

States

0%
<div class="adb-js-meter adb-meter adb-meter" data-percent="0" data-state="empty" data-toggle="tooltip" title="0%">
  <span class="adb-meter--percent">
    0%
  </span>
</div>
10%
<div class="adb-js-meter adb-meter" data-percent="10" data-state="low" data-toggle="tooltip" title="Low">
  <span class="adb-meter--percent">
    10%
  </span>
</div>
50%
<div class="adb-js-meter adb-meter" data-percent="50" data-state="loading" data-toggle="tooltip" title="Pending">
  <span class="adb-meter--percent">50%</span>
</div>
100%
<div class="adb-js-meter adb-meter" data-percent="100" data-state="full" data-toggle="tooltip" title="Full">
  <span class="adb-meter--percent">
    100%
  </span>
</div>
100%
<div class="adb-js-meter adb-meter" data-percent="100" data-state="completed" data-toggle="tooltip" title="Unlimited">
  <span class="adb-meter--percent">
    100%
  </span>
</div>
100%
<div class="adb-js-meter adb-meter" data-percent="100" data-state="full_capacity" data-toggle="tooltip" title="Unlimited">
  <span class="adb-meter--percent">
    100%
  </span>
</div>
0%
<div class="adb-js-meter adb-meter" data-percent="0" data-state="error" data-toggle="tooltip" title="You need to add more users">
  <span class="adb-meter--percent">
    0%
  </span>
</div>

Star Ratings

<div class="adb-rating">
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
</div>
<div class="adb-rating">
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
</div>

Caption

4/5 based on 3 reviews
<div class="adb-rating">
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
  <i class="adb-rating--icon adb-rating--icon__unrated"></i>
</div>
<div class="adb-caption">
  4/5 based on 3 reviews
</div>

Sizes

  • Default
  • Large
<div class="adb-rating">
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
</div>
<div class="adb-rating adb-rating__large">
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
  <i class="adb-rating--icon adb-rating--icon__positive"></i>
</div>
  • Framework
  • Display
  • Status & Progress
  • 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%