States: Base
close-icon Created with Sketch.
High fives! You have successfully completed an action.
close-icon Created with Sketch.
Well this is awkward. That action didn't go as planned.
close-icon Created with Sketch.
Oh snap! That wasn't suppose to happen. Give it another try.
Sample Code
  <figure class="alert alert--success">
    <a class="alert__icon-trigger" role="button" href="#">
      <svg x="0px" y="0px" viewBox="0 0 16 16" class="alert__icon">
        <g>
          <path id="app-icon" class="st0" d="M0.8,1.7l13.2,13.2c0.4,0.4,1,0.4,1.4,0c0.4-0.4,0.4-1,0-1.4L2.2,0.3c-0.4-0.4-1-0.4-1.4,0 S0.4,1.4,0.8,1.7L0.8,1.7z M1.7,15.2L15.2,1.7c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L0.3,13.8c-0.4,0.4-0.4,1,0,1.4 C0.7,15.6,1.3,15.6,1.7,15.2L1.7,15.2z"></path>
        </g>
      </svg>
    </a>
    <h5 class="alert__title">High fives! You have successfully completed an action.</h5>
  </figure>
Component Usage

Alerts are to be used when a user needs to be notified of an action they took. For example, if a user creates a new account in the system, they should be notified if the action succeeds or fails. There are three styles of alerts: Success, warning and danger / failure. Depending on the action, the user should receive the appropriate response.

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create alerts.

Class Name Usage
.alert This should be applied to the element you are styling to look like an alert. It is used to target alerts and hide them when the close icon is clicked. 
<figure class"alert"></figure>
.alert--success This should be applied to the element you are styling to look like an alert. It provides the correct styles for the message being returned. 
<figure class"alert--success"></figure>
[aria-hidden="true"] Set this on the alert when it is hidden from the view.
[aria-hidden="false"] Set this on the alert when it is visible in the view.
States: Base
Sample Code
  <ul class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a href="#" class="breadcrumb__link breadcrumb__link--active">Account Name</a>
    </li>
    <li class="breadcrumb__item">
      <a href="#" class="breadcrumb__link breadcrumb__link--active">Site Name Goes Here</a>
    </li>
    <li class="breadcrumb__item">
      <a href="#" class="breadcrumb__link breadcrumb__link--not-active">Pool Name Goes Here</a>
    </li>
  </ul>
Component Usage

Breadcrumbs are used to allow the user to move back up the account, site or pool tree. As the user dives deeper into an account's details, we need to provide a way for them move back to different levels without having to go back to the dashboard and then traverse back down.

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create a breadcrumb list.

Class Name Usage
.breadcrumb__list This class name should be applied to an unordered list tag. It is the parent of the breadcrumb items. 
<ul class="breadcrumb__list"> <!-- breadcrumb items here --> </ul>
.breadcrumb__item This should be set on a list item. It requires a parent unordered list. 
<li class="breadcrumb__item"> <!-- breadcrumb link here --> </li>
.breadcrumb__link This should be set on an anchor tag and should be wrapped by a parent list item. 
<a href="#" class="breadcrumb__link"> <!-- breadcrumb text --> </a>
.breadcrumb__link--active Apply this state to breadcrumb links that take the user back up the tree. 
<a href="#" class="breadcrumb__link breadcrumb__link--active"> <!-- breadcrumb text --> </a>
.breadcrumb__link--not-active Apply this state to the current breadcrumb link. This will give the user a visual indication of where they are at in the tree. 
<a href="#" class="breadcrumb__link breadcrumb__link--active"> <!-- breadcrumb text --> </a>
States: Base, Hover
Sample Code
  <button class="button--primary">Action Title Here</button>
  <button class="button--secondary">Action Title Here</button>
  <button class="button--warning">Action Title Here</button>
  <button class="button--disabled">Action Title Here</button>
  <a href="#" role="button" class="button--primary">Action Title Here</a>
  <a href="#" role="button" class="button--secondary">Action Title Here</a>
  <a href="#" role="button" class="button--warning">Action Title Here</a>
  <a href="#" role="button" class="button--disabled">Action Title Here</a>
Component Usage

Buttons should be used sparingly throughout the design of the application. They must serve a specific purpose or action. For instance, if the user is going to be creating a new site or pool, it is in our best interest to show them where they can do that in a bold way. However, if a user will not be preforming the action repeatedly or does not need to be warned of their actions, a link is best used. For example, creating a new account. This happens less frequently then creating sites and pools. It shouldn't draw as much attention.

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create buttons.

Class Name Usage
.button--primary This class name should be applied to either an anchor tag or a button tag. 
<button class="button--primary">Action Title Here</button>
[role="button"] Set this role on an anchor tag styled to behave like a button. 
<button role="button">Action Title Here</button>
States: Base, Hover, Active
Sample Code
  <!-- Standard Text Input -->
  <label class="label">Standard Input</label>
  <input type="text" name="text" placeholder="Placeholder text goes here" class="input--text">

  <!-- Search Input -->
  <label class="label">Search Input</label>
  <input type="text" name="text" placeholder="Placeholder text goes here" class="input--text">

  <!-- Disabled Input -->
  <label class="label">Disabled Input</label>
  <input type="text" name="text" placeholder="Can't type here" disabled="true" class="input--text">

  <!-- Standard Select -->
  <label class="label">Select Input</label>
  <select>
    <option>Select Option 1</option>
    <option>Select Option 2</option>
    <option>Select Option 3</option>
    <option>Select Option 4</option>
    <option>Select Option 5</option>
  </select>

  <!-- Disabled Select -->
  <label class="label">Disabled Select Input</label>
  <select class="select" disabled>
    <option>Select Option 1</option>
    <option>Select Option 2</option>
    <option>Select Option 3</option>
    <option>Select Option 4</option>
    <option>Select Option 5</option>
  </select>

  <!-- Standard Radio Input -->
  <label class="label label--radio-input">
    <input type="radio" name="name" />
    Standard Radio Input
  </label>
Component Usage

There are a few different input types. The first is a standard input. This should be used for most form inputs. The type role might change, but the overall design stays the same. The second type is a search input. This type should be used when a user is preforming a search on a view or the application. Lastly, a select. This element should be used when a user needs to select one object from many.

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create the standard form elements.

Class Name Usage
.label All standard form inputs should have a label to explain what data is expected. 
<label class="label">Label Text Here</label>
input[type="text"] This is the standard input type. 
<input type="text" name="name" value="" placeholder="Add text here" />
input[type="search"] Set the input type to search for search inputs. 
<input type="search" placeholder="Search for an item" />
select This is the standard select input type. 
<select ><!-- select options --> </select>
input[type="radio"] This is the standard radio input type. 
<input type="radio" name="name" />
States: Base, Hover
Sample Code
  <a href="#" class="link--primary">Link Title Here</a>
  <a href="#" class="link--secondary">Link Title Here</a>
  <a href="#" class="link--warning">Link Title Here</a>
  <a href="#" class="link--disabled">Link Title Here</a>
Component Usage

Links should be used to move a user from one page to another. The primary link is suggested in most cases. The exception to the rule is if a user is adding an item. Because we want to maintain a level of consistency, the secondary link (purple color) should be used. This will ensure it is the same color as the primary add button.

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create links.

Class Name Usage
.link--primary This class name should be applied to an anchor tag. 
<a href="#" class="link--primary">Link Title Here</a>
States: Normal, Active
Sample Code
  <button class="button--primary modal__trigger">Click for Modal</button>
  <div class="modal">
    <div class="modal__overlay" aria-hidden="true">
      <div class="modal__container">
        <a href="#" role="button" class="modal__close">
          <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="modal__close-icon">
    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
    <title>close-icon</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M6.58578645,7.53566887 L0.792893219,1.74277563 C0.402368927,1.35225134 0.402368927,0.719086361 0.792893219,0.328562069 C1.18341751,-0.061962223 1.81658249,-0.061962223 2.20710678,0.328562069 L7.99999997,6.12145525 L13.8285616,0.292893244 C14.2190858,-0.0976310618 14.8522508,-0.0976310841 15.2427751,0.292893194 C15.6332994,0.683417472 15.6332995,1.31658245 15.2427752,1.70710676 L9.41421353,7.53566882 L15.3600533,13.4815085 C15.7505775,13.8720328 15.7505775,14.5051978 15.3600533,14.8957221 C14.969529,15.2862464 14.336364,15.2862464 13.9458397,14.8957221 L8.00000002,8.94988243 L1.70710681,15.2427761 C1.31658253,15.6333004 0.683417549,15.6333004 0.292893244,15.2427761 C-0.0976310618,14.8522519 -0.0976310841,14.2190869 0.292893194,13.8285626 L6.58578645,7.53566887 Z" id="app-icon" fill="#ACACB4"></path>
    </g>
</svg>
        </a>
        <div class="modal__body">
          <header class="modal__header">
            <h3 class="title">Modal Title</h3>
          </header>
          <p>Body text lorem ipsum dolor ipsum dolor sit sit possimus amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias eriam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam. Body text lorem ipsum dolor ipsum dolor sit sit possimus amet.</p>
        </div>
      </div>
    </div>
  </div>
Component Usage

Modals are used as a way for the user to interact with the view without leaving it. For example, if the user clicks on an add site button from an account page, a modal should be revealed that allows the user to input data and create a new site. Modals should be single actions. Never use a modal as a step action or multi-part form.

States: Base, Active
Table Header Table Header Table Header Table Header Action
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 10,000 12,220 View Delete
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 10,000 12,220 View Delete
Sample Code
  <table class="table table-alpha">
    <thead>
      <th>Table Header <i class="table__header__icon"><img src="../images/icons/functional/sort-icon.svg" /></i></th>
      <th>Table Header <i class="table__header__icon"><img src="../images/icons/functional/sort-icon.svg" /></i></th>
      <th>Table Header <i class="table__header__icon"><img src="../images/icons/functional/sort-icon.svg" /></i></th>
      <th>Table Header <i class="table__header__icon"><img src="../images/icons/functional/sort-icon.svg" /></i></th>
      <th>Action</th>
      <th></th>
    </thead>
    <tbody>
      <tr class="table__row">
        <td>Lorem ipsum dolor sit amet.</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>10,000</td>
        <td>12,220</td>
        <td>
          <a href="#" class="link--primary margin-right--charlie">View</a>
          <a href="#" class="link--warning">Delete</a>
        </td>
        <td class="table__expand">
          <a href="#" class="table__expand-trigger">
            <img class="table__expand-icon" src="../images/icons/functional/arrow-icon.svg" />
          </a>
        </td>
      </tr>
      <tr class="table__hidden" aria-hidden="true">
        <td colspan="6" class="reset-padding">
          <table class="table table-bravo">
            <thead>
              <th>Table Header</th>
              <th>Table Header</th>
              <th>Table Header</th>
              <th>Table Header</th>
              <th>Action</th>
            </thead>
            <tbody>
              <tr>
                <td>Lorem ipsum dolor sit amet</td>
                <td>Lorem ipsum dolor sit</td>
                <td>Lorem ipsum dolor sit</td>
                <td>Lorem ipsum dolor sit</td>
                <td>
                  <a href="#" class="link--primary margin-right--charlie">View</a>
                  <a href="#" class="link--warning">Delete</a>
                </td>
              </tr>
              <tr>
                <td>Lorem ipsum dolor sit amet</td>
                <td>Lorem ipsum dolor sit</td>
                <td>Lorem ipsum dolor sit</td>
                <td>Lorem ipsum dolor sit</td>
                <td>
                  <a href="#" class="link--primary margin-right--charlie">View</a>
                  <a href="#" class="link--warning">Delete</a>
                </td>
              </tr>
              <tr>
                <td>Lorem ipsum dolor sit amet</td>
                <td>Lorem ipsum dolor sit</td>
                <td>Lorem ipsum dolor sit</td>
                <td>Lorem ipsum dolor sit</td>
                <td>
                  <a href="#" class="link--primary margin-right--charlie">View</a>
                  <a href="#" class="link--warning">Delete</a>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr class="table__row">
        <td>Lorem ipsum dolor sit amet.</td>
        <td>Lorem ipsum dolor sit amet.</td>
        <td>10,000</td>
        <td>12,220</td>
        <td>
          <a href="#" class="link--primary margin-right--charlie">View</a>
          <a href="#" class="link--warning">Delete</a>
        </td>
        <td class="table__expand">
          <a href="#" class="table__expand-trigger">
            <img class="table__expand-icon" src="../images/icons/functional/arrow-icon.svg" />
          </a>
        </td>
      </tr>
      <tr class="table__hidden" aria-hidden="true">
        <td colspan="6" class="reset-padding">
          <table class="table table-bravo">
            <thead>
              <th>Table Header</th>
              <th>Table Header</th>
              <th>Table Header</th>
              <th>Table Header</th>
              <th>Action</th>
            </thead>
            <tbody>
              <tr>
                <td>Lorem ipsum dolor sit amet</td>
                <td>Lorem ipsum dolor sit</td>
                <td>Lorem ipsum dolor sit</td>
                <td>Lorem ipsum dolor sit</td>
                <td>
                  <a href="#" class="link--primary margin-right--charlie">View</a>
                  <a href="#" class="link--warning">Delete</a>
                </td>
              </tr>
              <tr>
                <td>Lorem ipsum dolor sit amet</td>
                <td>Lorem ipsum dolor sit</td>
                <td>Lorem ipsum dolor sit</td>
                <td>Lorem ipsum dolor sit</td>
                <td>
                  <a href="#" class="link--primary margin-right--charlie">View</a>
                  <a href="#" class="link--warning">Delete</a>
                </td>
              </tr>
              <tr>
                <td>Lorem ipsum dolor sit amet</td>
                <td>Lorem ipsum dolor sit</td>
                <td>Lorem ipsum dolor sit</td>
                <td>Lorem ipsum dolor sit</td>
                <td>
                  <a href="#" class="link--primary margin-right--charlie">View</a>
                  <a href="#" class="link--warning">Delete</a>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
Component Usage

Tables are to be used for tabular data in the application. Tables are one of the most widely used components in the application. Additionally, as a way to peek inside of a site or pool without having to drill inside, the user can expand the table and see a layer down.

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create a table.

Class Name Usage
.table Set this class on the table element. This class applies the base styles that all tables inherit. 
<table class="table"><!-- Table Content --></table>
.table-alpha Set this class on the table element. This is the primary table class and should accompany the standard table class attribute. 
<table class="table table-alpha"><!-- Table Content --></table>
.table-bravo Set this class on the table element. This class should only be used for tables within tables. It applies slightly darker features.
<table class="table table-bravo"><!-- Table Content --></table>
.table__row Set this class on the table row element of the parent table.
<tr class="table__row"><!-- Table Content --></tr>
.table__hidden Set this class on the table row element that contains a nested table.
<tr class="table__hidden"><!-- Table Content --></tr>
[aria-hidden="true"] Set this attribute on the table row element that contains a nested table that is current inactive.
<tr class="table__hidden" aria-hidden="true"><!-- Table Content --></tr>
[aria-hidden="false"] Set this attribute on the table row element that contains the nested table when it is active.
<tr class="table__hidden" aria-hidden="false"><!-- Table Content --></tr>
.table__header__icon Set this attribute on the table header element that contains an icon. For example a sort trigger. 
<th>Table Header <i class="table__header__icon"><img src="../images/icons/functional/sort-icon.svg" /></i></th>
States: Base, Active
Sample Code
  <ul class="tab__list">
    <li class="tab__item">
      <a href="#" class="tab__link tab__link--active">Tab Link One</a>
    </li>
    <li class="tab__item">
      <a href="#" class="tab__link">Tab Link Two</a>
    </li>
    <li class="tab__item">
      <a href="#" class="tab__link">Tab Link Three</a>
    </li>
  </ul>
Component Usage

Tabs should be used to separate views within views. The content should be related in some way. For example, the account view should be made up of three tabs: Account Details, Permaleased Numbers and Edit Account. The goal is to allow users to move from one section of an account, site or pool fluidly without having to search for navigation items or drill deep into the application.

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create tabs.

Class Name Usage
.tab__list This class name should be applied to an unordered list element. It is the main wrapper to a tab list. 
<ul class="tab__list"><!-- Tab List Items --></ul>
.tab__item Set this on the list item. It must be nested inside of a tab list. 
<li class="tab__item"><!-- Tab List Anchor --></li>
.tab__link Set this class on the anchor item nested inside of a tab item. 
<a href="#" class="tab__link"><!-- Tab Name --></a>
.tab__link--active Set this on the anchor item that is currently active. It applies the active tab link styles. 
<a href="#" class="tab__link tab__link--active"><!-- Tab Name --></a>
States: Base
25%
65%
95%
Sample Code
  <div class="status-bar--normal">
    <h5 class="status-bar__title">25%</h5>
  </div>
  <div class="status-bar--caution">
    <h5 class="status-bar__title">65%</h5>
  </div>
  <div class="status-bar--warning">
    <h5 class="status-bar__title">95%</h5>
  </div>
Component Usage

Status bars should be used to indicate the total number of phone numbers in use for an account. This component should give the user an indication of what accounts need attention and what ones are fine.

HTML Guidelines

This table gives you a quick overview of the CSS classes that can be applied to create status bars.

Class Name Usage
.status-bar--normal This class should be applied to a block level element. 
<div class="status-bar--normal"> <!-- status-bar__title --> </div>
.status-bar__title This class should be applied to a header element and must be nested within the status bar element. 
<h5 class="status-bar__title">95%</h5>