Navigation Controls

Pagination

Version 1

<nav class="adb-pagination_v1">
  <a class="adb-pagination_v1--button adb-pagination_v1--button__first"></a>
  <a class="adb-pagination_v1--button adb-pagination_v1--button__prev"></a>
  <a class="adb-pagination_v1--button">1</a>
  <a class="adb-pagination_v1--button">23</a>
  <span class="adb-pagination_v1--current">456</span>
  <a class="adb-pagination_v1--button">7890</a>
  <a class="adb-pagination_v1--button adb-pagination_v1--button__next"></a>
  <a class="adb-pagination_v1--button adb-pagination_v1--button__last"></a>
</nav>

Version 2

<nav class="adb-pagination">
  <a class="adb-pagination--button adb-pagination--button__prev"></a>
  <a class="adb-pagination--button adb-pagination--button__first">1</a>
  <a class="adb-pagination--button">2</a>
  <span class="adb-pagination--current">3</span>
  <a class="adb-pagination--button">45</a>
  <a class="adb-pagination--button adb-pagination--button__middle">678</a>
  <span class="adb-pagination--ellipsis"></span>
  <a class="adb-pagination--button adb-pagination--button__last">90</a>
  <a class="adb-pagination--button adb-pagination--button__next"></a>
</nav>

Pagers

<nav class="adb-pager">
  <div class="adb-pager--pagination">
    <span class="adb-pager--pagination_item adb-is-active"></span>
    <span class="adb-pager--pagination_item"></span>
    <span class="adb-pager--pagination_item"></span>
    <span class="adb-pager--pagination_item"></span>
  </div>
</nav>

<nav class="adb-pager">
  <button class="adb-pager--item adb-pager--button__prev" type="button">
    <i class="adb-icon__arrow_left"></i>
    Previous
  </button>
  <button class="adb-pager--item adb-pager--button__next" type="button">
    Next
    <i class="adb-icon__arrow_right"></i>
  </button>
</nav>

<nav class="adb-pager">
  <button class="adb-pager--item adb-pager--button__prev adb-button__square_small" type="button">
    <i class="adb-icon__arrow_left"></i>
  </button>
  <div class="adb-pager--pagination adb-pager--item">
    <span class="adb-pager--pagination_item adb-is-active"></span>
    <span class="adb-pager--pagination_item"></span>
    <span class="adb-pager--pagination_item"></span>
    <span class="adb-pager--pagination_item"></span>
  </div>
  <button class="adb-pager--item adb-pager--button__next adb-button__square_small" type="button">
    <i class="adb-icon__arrow_right"></i>
  </button>
</nav>

<nav class="adb-pager">
  <button class="adb-pager--item adb-pager--button__prev adb-button__square_small" type="button">
    <i class="adb-icon__arrow_left"></i>
  </button>
  <div class="adb-pager--caption adb-pager--item">1 of 3</div>
  <button class="adb-pager--item adb-pager--button__next adb-button__square_small" type="button">
    <i class="adb-icon__arrow_right"></i>
  </button>
</nav>

Count Filter

 
<menu>
  <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
    <select>
      <option>25 Results</option>
      <option>50 Results</option>
      <option>100 Results</option>
      <option>All Results</option>
    </select>
  </div>
</menu>

Button Toggles

Menu

<menu class="adb-toggle_buttons" data-toggle="buttons-radio">
  <button class="adb-toggle_buttons--button active" type="button">Option 1</button>
  <button class="adb-toggle_buttons--button" type="button">Option 2</button>
  <button class="adb-toggle_buttons--button" type="button">Option 3</button>
  <button class="adb-toggle_buttons--button" type="button">Option 4</button>
</menu>

<menu class="adb-toggle_buttons" data-toggle="buttons-radio">
  <button class="adb-toggle_buttons--button adb-button__small active" type="button">Option 1</button>
  <button class="adb-toggle_buttons--button adb-button__small" type="button">Option 2</button>
  <button class="adb-toggle_buttons--button adb-button__small" type="button">Option 3</button>
  <button class="adb-toggle_buttons--button adb-button__small" type="button">Option 4</button>
</menu>

Single Button

<button class="adb-toggle_button" data-label-active="Hide Settings" data-label-init="Show Settings" data-target="#" data-toggle="panel" type="button">
  Show Settings
</button>

Tags

facilis incidunt soluta
sunt atque similique
rerum aut autem
impedit rerum aut
repellat itaque enim
iure possimus architecto
ut eligendi tempore
voluptatum dicta est
quia unde natus
dolores ut ratione 
<div class="adb-tag">
  <span class="adb-tag--text">
    sunt dolor recusandae
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    sed et atque
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    vitae corrupti facere
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    dolorum et ut
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    laborum harum voluptatem
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    qui accusantium expedita
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    nemo non et
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    et ut eum
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    praesentium sequi assumenda
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    cumque asperiores ipsum
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
veritatis aliquid hic
ipsum recusandae perspiciatis
possimus eligendi suscipit
cum quo atque
iusto et tempora
qui impedit voluptatem
inventore quia voluptatem
repudiandae at vero
nam tempore voluptas
architecto adipisci dolores 
<div class="adb-container adb-tags">
  <div class="adb-tag">
    <span class="adb-tag--text">
      optio a doloribus
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      tempora culpa nobis
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      dolorum libero laudantium
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      dolorem ipsa dolor
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      dicta voluptatum consequatur
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      nostrum explicabo sit
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      perferendis culpa qui
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      in eligendi fuga
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      sunt placeat nesciunt
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      nulla ab est
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
</div>

Videos

<div class="adb-video">
  <img class="adb-video--screenshot" src="../../images/content/sendgrid-preview.png" />
</div>

Sticky

Close