Alert Message Box
Avatar
Growl
Icon Circle
Linkable Tablerow
Message Pill
Modal
Navigation switch
Notification Dot
Number Circle
Tabs
Pro Tip
Progress Indicator
Task List Badge
Task List Card
Tip in a Box
Popover-Style Tips Sidebar
Header Decoration
Usage Chart

Alert Message Box

Info message
I think we're alone now. There doesn't seem to be anyone around.
Warning message
It appears that my distraction worked. Carry on.
Danger message

      Walmart is closing in five minutes.
   
Success message
Nuclear weapon disarmed and kitchen restocked.

          <h4>Info message</h4>
<div class="alert-message-box info">
 <div><i class="fa fa-info-circle"></i></div>
 <div>
   <div>I think we're alone now. There doesn't seem to be anyone around.</div>
 </div>
</div>

<h4>Warning message</h4>
<div class="alert-message-box warning">
 <div><i class="fa fa-warning"></i></div>
 <div>
   <div>It appears that my distraction worked. Carry on.</div>
 </div>
</div>

<h4>Danger message</h4>
<div class="alert-message-box danger">
 <div><i class="fa fa-warning"></i></div>
 <div>
   <div>
      Walmart is closing in five minutes.
   </div>
 </div>
</div>

<h4>Success message</h4>
<div class="alert-message-box success">
 <div><i class="fa fa-check"></i></div>
 <div>
   <div>Nuclear weapon disarmed and kitchen restocked.</div>
 </div>
</div>
        

Avatar

.avatar will expand to take up as much room as its parent will allow. .avatar .avatar-sm is limited to 30px width/height. .avatar .avatar-md is limited to 50px width/height.

avatar
    
avatar-smavatar-md

          <h4>avatar</h4>
<div style="width: 100px;">
    <img class="avatar" src="data:image/png;base64,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">
</div>

<h4>avatar-sm</h4>
<img class="avatar avatar-sm" src="http://cdn.marketplaceimages.windowsphone.com/v8/images/dd108095-338b-4da2-94d4-553cde3339d3?imageType=ws_icon_large">

<h4>avatar-md</h4>
<img class="avatar avatar-md" src="http://cdn.marketplaceimages.windowsphone.com/v8/images/dd108095-338b-4da2-94d4-553cde3339d3?imageType=ws_icon_large">
        

Growl

Use .growl for notification messages. 4 variants are: .growl-success, .growl-info, .growl-warn, .growl-danger.

growl success
      
  

      
    

      One time I went to a craft fair, and I see a jar of jellybeans, it said "Guess how many jellybeans are in the jar,
      and you win a prize." Aw, come on, man. Let me just have some. I'll tell you what, you guess how many I want,
      if you said "a handful" you are right.
    
 
growl info
      
  

      
    

       In England, Smokey the Bear is not the forest fire prevention representative. They have Smacky the Frog.
       It's a lot like a bear, but it's a frog. I think that's a better system. I think we should adopt it.
       Because bears can be mean, but frogs are always cool. Never has there been a frog hopping toward me, and
       I thought "Man, I'd better play dead. Here comes that frog." I would never say "Here comes that frog" in a
       horrifying manner. It's always, like, optimistic. Like, "Hey, here comes that frog, all right. Maybe he will
       settle near me and I can pet him, and put him in a mayonnaise jar, with a stick and a leaf, to recreate what
       he's used to."
    
 
growl warn
      
  

      
    

      I have no problem not listening to The Temptations, which is weird.
    
 
growl danger
      
  

      
    

      It's very dangerous to wave to someone you don't know because, what if they don't have hands? They'll think you're cocky.
    
 

          <h4>growl success</h4>
<div role="alert" class="growl growl-success">
  <div class="header-box">
    &nbsp; <button type="button" class="close">&times;</button>
  </div>
  <div class="media">
    <div class="media-left media-middle">
      <i class="media-object fa fa-check"></i>
    </div>
    <div class="media-body">
      One time I went to a craft fair, and I see a jar of jellybeans, it said "Guess how many jellybeans are in the jar,
      and you win a prize." Aw, come on, man. Let me just have some. I'll tell you what, you guess how many I want,
      if you said "a handful" you are right.
    </div>
  </div>
  <div class="footer-box">&nbsp;</div>
</div>

<h4>growl info</h4>
<div role="alert" class="growl growl-info">
  <div class="header-box">
    &nbsp; <button type="button" class="close">&times;</button>
  </div>
  <div class="media">
    <div class="media-left media-middle">
      <i class="media-object fa fa-info-circle"></i>
    </div>
    <div class="media-body">
       In England, Smokey the Bear is not the forest fire prevention representative. They have Smacky the Frog.
       It's a lot like a bear, but it's a frog. I think that's a better system. I think we should adopt it.
       Because bears can be mean, but frogs are always cool. Never has there been a frog hopping toward me, and
       I thought "Man, I'd better play dead. Here comes that frog." I would never say "Here comes that frog" in a
       horrifying manner. It's always, like, optimistic. Like, "Hey, here comes that frog, all right. Maybe he will
       settle near me and I can pet him, and put him in a mayonnaise jar, with a stick and a leaf, to recreate what
       he's used to."
    </div>
  </div>
  <div class="footer-box">&nbsp;</div>
</div>

<h4>growl warn</h4>
<div role="alert" class="growl growl-warn">
  <div class="header-box">
    &nbsp; <button type="button" class="close">&times;</button>
  </div>
  <div class="media">
    <div class="media-left media-middle">
      <i class="media-object fa fa-warning"></i>
    </div>
    <div class="media-body">
      I have no problem not listening to The Temptations, which is weird.
    </div>
  </div>
  <div class="footer-box">&nbsp;</div>
</div>

<h4>growl danger</h4>
<div role="alert" class="growl growl-danger">
  <div class="header-box">
    &nbsp; <button type="button" class="close">&times;</button>
  </div>
  <div class="media">
    <div class="media-left media-middle">
      <i class="media-object fa fa-warning"></i>
    </div>
    <div class="media-body">
      It's very dangerous to wave to someone you don't know because, what if they don't have hands? They'll think you're cocky.
    </div>
  </div>
  <div class="footer-box">&nbsp;</div>
</div>
        

Icon Circle

Displays a icon in a large colored circle

        
          <span class="icon-circle blue">
  <i class="fa fa-print"></i>
</span>
<span class="icon-circle green">
  <i class="fa fa-print"></i>
</span>
<span class="icon-circle orange">
  <i class="fa fa-print"></i>
</span>
<span class="icon-circle purple">
  <i class="fa fa-pk-pkman"></i>
</span>
<span class="icon-circle red">
  <i class="fa fa-space-shuttle"></i>
</span>

Linkable Tablerow

Make a row in a table look more link-like when hover is triggered. (Note: do not use this with table-hover on the table element, as it will cause a conflicting style to load.

        

    Tables
    Are
    Awesome
  


    click
    this
    yo
  

    not
    this
    yo
  



      

          <table class='table'>
<thead>
  <tr>
    <th>Tables</th>
    <th>Are</th>
    <th>Awesome</th>
  </tr>
</thead>
<tbody>
  <tr class='linkable-tablerow'>
    <td>click</td>
    <td>this</td>
    <td>yo</td>
  </tr>
  <tr>
    <td>not</td>
    <td>this</td>
    <td>yo</td>
  </tr>
</tbody>
</table>
        

Tables	Are	Awesome
click	this	yo
not	this	yo

Message Pill

      
    
This expense will be
tax-free

      
    
This expense will be
tax-advantaged

      
    

          <div class="message-pill">
    <div class="message-pill-icon">
      <i class="fa fa-check-circle"></i>
    </div>
    <div class="message-content">
      <div class="small-message">This expense will be</div>
      <div class="large-message">tax-free</div>
    </div>
  </div>

  <div class="message-pill blue">
    <div class="message-pill-icon">
      <i class="fa fa-check-circle-o"></i>
    </div>
    <div class="message-content">
      <div class="small-message">This expense will be</div>
      <div class="large-message">tax-advantaged</div>
    </div>
    <div class="help-icon">
      <i class="fa fa-question-circle"></i>
    </div>
  </div>
        

        
      
If you were an animal, which animal would you be?
          Etruscan Shrew
        

          Spiny Lumpsucker
        

          Tasseled Wobbegong
        

        
        
      

          <div class="pk-modal modal">
    <div class="modal-content">
      <div class="modal-header">
        <a ng-click="$hide()"><i class="fa fa-pk-close-X"></i></a>
      </div>
      <div class="modal-body">
        <h2>If you were an animal, which animal would you be?</h2>

        <div class="radio">
          <label><input type="radio">Etruscan Shrew</label>
        </div>
        <div class="radio">
          <label><input type="radio">Spiny Lumpsucker</label>
        </div>
        <div class="radio">
          <label><input type="radio">Tasseled Wobbegong</label>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Submit</button>
        <button type="button" class="btn btn-default">Cancel</button>
      </div>
    </div>
  </div>


  <!-- This is just for making it show up right in context; don't copy this -->
  <style>.pk-modal.modal{display: block; position: static; padding: 10px} </style>
        

Creates navigation tab buttons.

        
        
      

          <div class="row nav-buttons">
    <div class="col-lg-12 text-center">
      <div class="btn-group" role="group">
        <button class="btn btn-sm primary">Personal</button>
        <button class="btn btn-sm">Company</button>
      </div>
    </div>
  </div>
        

When used in angular with ui-router, the primary class is added using ui-sref-active attribute:

    <div class="row nav-buttons">
    <div class="col-lg-12 text-center">
      <div class="btn-group" role="group">
        <button ui-sref-active="primary" class="btn btn-sm" ui-sref="personal">Personal</button>
        <button ui-sref-active="primary" class="btn btn-sm" ui-sref="company">Company</button>
      </div>
    </div>
  </div>
  

Notification Dot

  
        Friends
      
        Enemies
      
Inline, if that's how you roll. !

          <div>
  <button style="width:120px"  class="btn btn-primary notification-dot" data-notification="!">YOLO</button>
</div>

<ul class="nav pk-tabs" style="margin: 20px 0 20px">
    <li class="active">
      <a data-toggle="tab" href="#">
        Friends
      </a>
    </li>
    <li class="notification-dot" data-notification="!">
      <a data-toggle="tab" href="#">
        Enemies
      </a>
    </li>
</ul>

Inline, if that's how you roll. <div class="notification-dot-inline">!</div>

Number Circle

1

    Throw away your Android phone
  
2

    Buy an iPhone
  
3

    Give thanks
  

          <div>
    <div class="number-circle">1</div>
    Throw away your Android phone
  </div>
  <div>
    <div class="number-circle">2</div>
    Buy an iPhone
  </div>
  <div>
    <div class="number-circle">3</div>
    Give thanks
  </div>
        

Tabs

        
          2018
        
      

        
          2017
        
      

   Transaction history
 

  

          <ul class="nav pk-tabs">
      <li class="active">
        <a data-toggle="tab" href="#">
          2018
        </a>
      </li>
      <li>
        <a data-toggle="tab" href="#">
          2017
        </a>
      </li>
 </ul>
 <div class="ibox ibox-shadow">
  <div class="ibox-title">
   <h3>Transaction history</h3>
 </div>
  <div class="ibox-content ibox-loading">
  </div>
 </div>
        

Pro Tip

Adds the theme's pro-tip color to an element.

         Don't eat yellow snow.

          <i class="fa fa-info-circle pro-tip"></i> Don't eat yellow snow.

Progress Indicator

Progress indicator to show steps in a wizard and current position. Class previous, active, future are used to indicate the status of each step. The horizontal line underneath the progress boxes is a bit of a hack and requires adding a class line lineX where X is the number of steps in the wizard.

Note: long step names that wrap to the next line are not currently supported

Collect Underpants

Step Two?

Profit

          <div class="progress-indicator">
  <div class="line line3"></div>
  <div class="step previous">
    <span></span>
    <p>Collect Underpants</p>
  </div>
  <div class="step active">
    <span></span>
    <p>Step Two?</p>
  </div>
  <div class="step future">
    <span></span>
    <p>Profit</p>
  </div>
</div>
        

With 4 steps

Eat

Drink

Be Merry

Die

          <div class="progress-indicator">
  <div class="line line4"></div>
  <div class="step previous">
    <span></span>
    <p>Eat</p>
  </div>
  <div class="step previous">
    <span></span>
    <p>Drink</p>
  </div>
  <div class="step active">
    <span></span>
    <p>Be Merry</p>
  </div>
  <div class="step future">
    <span></span>
    <p>Die</p>
  </div>
</div>
        

With 7 steps

Denial

Guilt

Anger

Depression

Drinking

Apathy

Acceptance

          <div class="progress-indicator">
  <div class="line line7"></div>
  <div class="step previous">
    <span></span>
    <p>Denial</p>
  </div>
  <div class="step previous">
    <span></span>
    <p>Guilt</p>
  </div>
  <div class="step previous">
    <span></span>
    <p>Anger</p>
  </div>
  <div class="step active">
    <span></span>
    <p>Depression</p>
  </div>
  <div class="step future">
    <span></span>
    <p>Drinking</p>
  </div>
  <div class="step future">
    <span></span>
    <p>Apathy</p>
  </div>
  <div class="step future">
    <span></span>
    <p>Acceptance</p>
  </div>
</div>
        

Task List Badge

.task-list-badge is intended to be inside a ul.task-list li. It has 3 states.

Default task-list-badge

Warning task-list-badge warn

Danger task-list-badge danger (allows fa-exclamation-triangle to be shown, other states hide the triangle)

        
                Health Insurance
              

                15 Days
              

                Open enrollment begins 
              

                Health Insurance
              

                10 Days
              

                Open enrollment begins 
              

                Health Insurance
              

                5 Days 
              

                Open enrollment begins 
              

      

          <div class="row" style="background: #f5f5f6; padding: 20px;">
      <div class="col-sm-4">
        <ul class="task-list">
          <li>
            <div class="task-list-badge">
              <div class="hd">
                Health Insurance
              </div>
              <div class="bd">
                <span>15</span> Days
              </div>
              <div class="ft">
                Open enrollment begins <i class="fa fa-question-circle"></i>
              </div>
            </div>
          </li>
          <li>
            <div class="task-list-badge warn">
              <div class="hd">
                Health Insurance
              </div>
              <div class="bd">
                <span>10</span> Days
              </div>
              <div class="ft">
                Open enrollment begins <i class="fa fa-question-circle"></i>
              </div>
            </div>
          </li>
          <li>
            <div class="task-list-badge danger">
              <div class="hd">
                Health Insurance
              </div>
              <div class="bd">
                <span>5</span> Days <i class="fa fa-exclamation-triangle"></i>
              </div>
              <div class="ft">
                Open enrollment begins <i class="fa fa-question-circle"></i>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
        

Task List Card

.task-list-card is intended to be inside a ul.task-list li. It has 2 states.

Default task-list-card has an orange heading and shows a step number

Success task-list-card success has a green heading and shows a checkmark instead of the step number

Set up 2018 health benefit

Choose next year's allowance

Here's what you offered in 2017
Set up 2018 health benefit

Choose next year's allowance

Here's what you offered in 2017
Sign benefit documents

Print and sign your documents

Your benefit document is ready.

To comply with federal regulation please print and sign the document.

You can view and print other important benefit documents at any time on the Manage reimbursements page.
Sign benefit documents

Print and sign your documents

Your benefit document is ready.

To comply with federal regulation please print and sign the document.

You can view and print other important benefit documents at any time on the Manage reimbursements page.

          <div class="row" style="background: #f5f5f6; padding: 20px;">
      <div class="col-sm-4">
        <ul class="task-list">
          <li>
            <div class="task-list-card">
              <div class="hd">
                <i class="fa fa-pk-circle-1"></i> <i class="fa fa-check-circle"></i> Set up 2018 health benefit
              </div>
              <div class="bd">
                <h3>Choose next year's allowance</h3>
                <p>Here's what you offered in 2017</p>

              </div>

              <div class="ft ">
                <button class="btn btn-default center-block">Make Changes</button>
              </div>
            </div>
          </li>
          <li>
            <div class="task-list-card success">
              <div class="hd">
                <i class="fa fa-pk-circle-1"></i> <i class="fa fa-check-circle"></i> Set up 2018 health benefit
              </div>
              <div class="bd">
                <h3>Choose next year's allowance</h3>
                <p>Here's what you offered in 2017</p>

              </div>

              <div class="ft ">
                <button class="btn btn-default center-block">Make Changes</button>
              </div>
            </div>
          </li>

          <li>
            <div class="task-list-card">
              <div class="hd">
                <i class="fa fa-pk-circle-2"></i> <i class="fa fa-check-circle"></i> Sign benefit documents
              </div>
              <div class="bd">
                <h3>Print and sign your documents</h3>
                <p>Your benefit document is ready.</p>
                <p>To comply with federal regulation please print and sign the document.</p>

              </div>

              <div class="ft">
                <button class="btn btn-primary center-block">Print and sign</button>

                <p class="disclaimer">You can view and print other important benefit documents at any time on the Manage
                  reimbursements page.</p>
              </div>
            </div>
          </li>

          <li>
            <div class="task-list-card success">
              <div class="hd">
                <i class="fa fa-pk-circle-2"></i> <i class="fa fa-check-circle"></i> Sign benefit documents
              </div>
              <div class="bd">
                <h3>Print and sign your documents</h3>
                <p>Your benefit document is ready.</p>
                <p>To comply with federal regulation please print and sign the document.</p>

              </div>

              <div class="ft">
                <button class="btn btn-primary center-block">Print and sign</button>

                <p class="disclaimer">You can view and print other important benefit documents at any time on the Manage
                  reimbursements page.</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
        

Tip in a Box

Render a box with a colored border featuring a matching header that includes a large font awesome icon. Content inside the box usually has either a step number or perhaps a checkmark in a circle, as well as a button to go to the action the box is advertising to the user.

It's worth noting that the repeated font-awesome icon (i tags) in the markup below are indeed deliberate: to get the effect of an outline you need to render a white instance of the icon with a larger colored instance of the icon behind it.

Due to the variance in styles that exist, there are a few different types of boxes. You can specify blue ~~, purple, green or orange~~ (tentatively only use blue going forward) as the color of the box, and you can also add completed to change the color of the buttons and make them appear as disabled (ex purple completed as shown below). This will change the number in the step to a checkmark.

You can change the height with the small class being added as well.

Specifying disabled will gray out everything in the box.

Specifying inaccessible will make the entire box lighter and display the cursor: not-allowed styling on the cursor and disable links from being clicked as well.

Make it render a box!

Put some text in that box!

Have them click in the box!

          <div class="row">
  <div class="col-sm-4">
    <div class="tip-in-a-box blue">
      <header>
        <i class="fa fa-pencil-square-o"></i>
        <i class="fa fa-pencil-square-o"></i>
      </header>
      <section>
        <div class="inner-box-text">
          <span>1</span>
          <span><i class="fa fa-check"></i></span>
          <p>Make it render a box!</p>
        </div>
        <button class="btn btn-tip-primary btn-block">I'm not sure</button>
        <button class="btn btn-tip-default btn-block">I'm uncertain</button>
      </section>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="tip-in-a-box blue completed">
      <header>
        <i class="fa fa-gift"></i>
        <i class="fa fa-gift"></i>
      </header>
      <section>
        <div class="inner-box-text">
          <span>2</span>
          <span><i class="fa fa-check"></i></span>
          <p>Put some text in that box!</p>
        </div>
        <button class="btn btn-tip-primary btn-block">Yarp</button>
        <button class="btn btn-tip-default btn-block">Narp</button>
      </section>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="tip-in-a-box disabled small">
      <header>
        <i class="fa fa-dropbox"></i>
        <i class="fa fa-dropbox"></i>
      </header>
      <section>
        <div class="inner-box-text">
          <span>3</span>
          <span><i class="fa fa-check"></i></span>
          <p>Have them click in the box!</p>
        </div>
        <button class="btn btn-tip-primary btn-block">I can haz click event?</button>
      </section>
    </div>
  </div>
</div>
        

Weak attempt! Do better!
Type Your New Password

          <div class="row">
<div class="col-sm-6">
<div class="form-group tips-popover-container">
  <div class="popover am-fade right hidden-xs" tabindex="-1">
    <div class="arrow"></div>
    <div class="popover-content" >
      <div>Weak attempt! Do better!</div>
    </div>
  </div>
  <label class="control-label">Type Your New Password</label>
  <input type="text" class="form-control" placeholder="password">
</div>
</div>
</div>
        

Header Decoration

Used to be the Triple Rainbow but is now simplified to just be a green background.

    

          <!-- full on triple rainbow no content -->
<div class="row">
  <div class="col-sm-12">
    <div class="header-decoration">
    </div>
  </div>
</div>
        

      
    

          <!-- full on triple rainbow with a stacked logo -->
<div class="row">
  <div class="col-sm-12">
    <div class="header-decoration">
      <i class="fa fa-pk-logostacked"></i>
    </div>
  </div>
</div>
        

Using in a modal header?

If you're using within a .modal-header you'll want to add .modal-header-plain to get rid of the padding and border.

      
    

          <!-- ....... modal markup ...... -->
<div class="modal-header modal-header-plain">
  <div class="header-decoration">
      <i class="fa fa-pk-logostacked"></i>
    </div>
</div>
<!-- ....... modal markup ...... -->
        

Usage Chart

The .usage-chart style can be used to express a bar chart that reflects an amount used (.usage-bar-used) and an amount available (.usage-bar-available). Generally the "total" amount of resources will be the combined amounts shown in .usage-bar-used plus .usage-bar-available, but this css is easily extensible to show other colors by adjusting the background color.

In real world applications, an Angular controller will need to calculate the heights of the respective portions of the bars, meaning that the height of the element will need to be known. The default is set at 500px. In the example below, a style="height: ..." attribute is used, but in real world application this will likely be ng-style="{ height: $ctrl.usedHeight }".

Another case that can be represented is overuse. In this case, a line is drawn above the lower bar which is rendered in @zb-orange-dark. Similar to the prior case the "total" amount will often be the used amount plus the overused amount, meaning a total that graphically will imply more than was originally available (which matches the notion of overuse).

The bars are rendered within a .usage-block element encapsulating a .usage-bar with an additional style specified to alter the background color. A .usage-details element can also be added within the .usage-block to provide details (or "deets") about the amount represented (.usage-amount) and some subtext (.usage-amount-subtext) if more information is needed to convey type of unit of the amount.

In the event that the remaining amount is less than 10%, you should add the .usage-block-low-percentage class to the .usage-block class'd element and .usage-details-low-percentage class to the usage-details class'd element. This is because having less than 10% remaining will generally cause the text to render below the bottom axis.

Percentage of Ryan's on call issues that are normal
Very few
(and even some of those are suspect)
Amount of misfortune that strikes Ryan
Actual typical maximum
What Ryan goes through
(in fact, something else is probably happening right now)
Percent chance things work out in Ryan's favor
Everything is peachy
Everything is Ryan
(most of these are likely Comcast related)

          <h2>Percentage of Ryan's on call issues that are normal</h2>
<div class="usage-chart">
  <div class="usage-block" style="height: 450px;">
    <div class="usage-bar usage-bar-used"></div>
  </div>
  <div class="usage-block" style="height: 50px;">
    <div class="usage-bar usage-bar-available"></div>
    <div class="usage-details">
      <div class="usage-amount">Very few</div>
      <div class="usage-amount-subtext">(and even some of those are suspect)</div>  
    </div>
  </div>
</div>

<h2>Amount of misfortune that strikes Ryan</h2>
<div class="usage-chart">
  <div class="usage-block" style="height: 100px;">
    <div class="usage-bar usage-bar-used"></div>
    <div class="usage-details">
      <div class="usage-amount">Actual typical maximum</div>
    </div>
  </div>
  <div class="usage-block-overused" style="height: 400px;">
    <div class="usage-bar usage-bar-overused"></div>
    <div class="usage-details">
      <div class="usage-amount">What Ryan goes through</div>
      <div class="usage-amount-subtext">(in fact, something else is probably happening <i>right now</i>)</div>  
    </div>
  </div>
</div>

<h2>Percent chance things work out in Ryan's favor</h2>
<div class="usage-chart">
  <div class="usage-block" style="height: 490px;">
    <div class="usage-bar usage-bar-used"></div>
    <div class="usage-details">
      <div class="usage-amount">Everything is peachy</div>
    </div>
  </div>
  <div class="usage-block usage-block-low-percent" style="height: 10px;">
    <div class="usage-bar usage-bar-available"></div>
    <div class="usage-details usage-details-low-percent">
      <div class="usage-amount">Everything is Ryan</div>
      <div class="usage-amount-subtext">(most of these are likely Comcast related)</div>  
    </div>
  </div>
</div>
        

Style Guide - - v1.4.85

Latest Production Latest Stage

Alert Message Box

Info message

Warning message

Danger message

Success message

Avatar

avatar

avatar-sm

avatar-md

Growl

growl success

growl info

growl warn

growl danger

Icon Circle

Linkable Tablerow

Message Pill

Modal

If you were an animal, which animal would you be?

Navigation switch

Notification Dot

Number Circle

Tabs

Transaction history

Pro Tip

Progress Indicator

With 4 steps

With 7 steps

Task List Badge

Task List Card

Choose next year's allowance

Choose next year's allowance

Print and sign your documents

Print and sign your documents

Tip in a Box

Popover-Style Tips Sidebar

Header Decoration

Using in a modal header?

Usage Chart

Percentage of Ryan's on call issues that are normal

Amount of misfortune that strikes Ryan

Percent chance things work out in Ryan's favor