Base by AppDirect

Navigate

Guide users through the application

Page Navigation

Tabs

Alias consequatur aut perferendis sit. voluptatem accusantium doloremque aperiam eaque. ipsa quae ab illo inventore. veritatis et quasi architecto beatae. vitae dicta sunt explicabo aspernatur

Aut odit aut fugit sed. quia consequuntur magni dolores eos. qui ratione voluptatem sequi nesciunt. neque dolorem ipsum quia dolor. sit amet consectetur adipisci velit

Sed quia non numquam eius. modi tempora incidunt ut labore. et dolore magnam aliquam quaerat. voluptatem ut enim ad minima. veniam quis nostrum exercitationem ullam

Corporis nemo enim ipsam voluptatem. quia voluptas sit suscipit laboriosam. nisi ut aliquid ex ea. commodi consequatur quis autem vel. eum iure reprehenderit qui in 

<nav class="adb-tabs">
  <ul class="adb-tabs--items">
    <li class="adb-tabs--item active">
      <a class="adb-tabs--link" data-toggle="tab" href="#tabs-example1">
        Overview
      </a>
    </li>
    <li class="adb-tabs--item">
      <a class="adb-tabs--link" data-toggle="tab" href="#tabs-example2">
        Features
      </a>
    </li>
    <li class="adb-tabs--item">
      <a class="adb-tabs--link" data-toggle="tab" href="#tabs-example3">
        Reviews
      </a>
    </li>
    <li class="adb-tabs--item">
      <a class="adb-tabs--link" data-toggle="tab" href="#tabs-example4">
        Editions
      </a>
    </li>
  </ul>
</nav>
<p class="adb-js-tab active" id="tabs-example1">
  Ea voluptate velit esse quam. nihil molestiae et iusto odio. dignissimos ducimus qui blanditiis praesentium. laudantium totam rem voluptatum deleniti. atque corrupti quos dolores et
</p>
<p class="adb-js-tab" id="tabs-example2">
  Quas molestias excepturi sint occaecati. cupiditate non provident sed ut. perspiciatis unde omnis iste natus. error similique sunt in culpa. qui officia deserunt mollitia animi
</p>
<p class="adb-js-tab" id="tabs-example3">
  Id est laborum et dolorum. fuga et harum quidem rerum. facilis est et expedita distinctio. nam libero tempore cum soluta. nobis est eligendi optio cumque
</p>
<p class="adb-js-tab" id="tabs-example4">
  Nihil impedit quo porro quisquam. est qui minus id quod. maxime placeat facere possimus omnis. voluptas assumenda est omnis dolor. repellendus temporibus autem quibusdam et
</p>

Tabbed Tables

<nav class="adb-tabs">
  <ul class="adb-tabs--items">
    <li class="adb-tabs--item active">
      <a class="adb-tabs--link" data-toggle="tab" href="#modal-invoice-charges">
        Charges
      </a>
    </li>
    <li class="adb-tabs--item">
      <a class="adb-tabs--link" data-toggle="tab" href="#modal-invoice-payments">
        Payments
      </a>
    </li>
  </ul>
</nav>
<div class="adb-container adb-container__tabbed">
  <div class="adb-js-tab active" id="modal-invoice-charges">
    <div class="adb-table">
      <table>
        <thead>
          <tr>
            <th>Description</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              Nulla pariatur at vero eos
            </td>
            <td>
              2
            </td>
            <td>
              $999.99
            </td>
            <td>
              $999.99
            </td>
          </tr>
          <tr>
            <td>
              Et accusamus officiis debitis aut
            </td>
            <td>
              2
            </td>
            <td>
              $999.99
            </td>
            <td>
              $999.99
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="adb-js-tab" id="modal-invoice-payments">
    <div class="adb-table">
      <table>
        <thead>
          <tr>
            <th class="adb-is-active" data-sort data-sort-order="descending">Status</th>
            <th>ID</th>
            <th>Created</th>
            <th>Method</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <span class="adb-status adb-status__active">
                <span class="adb-status--gem"></span>
                Completed
              </span>
            </td>
            <td>
              73240
            </td>
            <td>
              03/02/2014
            </td>
            <td>Visa ending in 1111</td>
            <td>
              $999.99
            </td>
          </tr>
          <tr>
            <td>
              <span class="adb-status adb-status__active">
                <span class="adb-status--gem"></span>
                Completed
              </span>
            </td>
            <td>
              67821
            </td>
            <td>
              08/12/2016
            </td>
            <td>Visa ending in 1111</td>
            <td>
              $999.99
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Tabbed Slats

Global Company Roles

Judith Chung
Default

Rerum necessitatibus saepe eveniet ut
Number
117,224
Manage

Local User Roles

Angelo Chen
Default

Et voluptates repudiandae sint et
Number
117,224
Manage 
<nav class="adb-tabs">
  <ul class="adb-tabs--items">
    <li class="adb-tabs--item active">
      <a class="adb-tabs--link" data-toggle="tab" href="#tabbed_slats_company">
        Company Roles
      </a>
    </li>
    <li class="adb-tabs--item">
      <a class="adb-tabs--link" data-toggle="tab" href="#tabbed_slats_roles">
        User Roles
      </a>
    </li>
  </ul>
</nav>
<div class="adb-container adb-container__tabbed adb-js-tab active" id="tabbed_slats_company">
  <div class="adb-container_header">
    <h3 class="adb-container_header--title adb-container_header--item">Global Company Roles</h3>
  </div>
  <div class="adb-slat">
    <div class="adb-slat--row">
      <div class="adb-slat--content adb-slat--column adb-summary">
        <h3 class="adb-summary--title">
          <a>
            Margarita Melton
            <div class="adb-badge">Default</div>
          </a>
        </h3>
        <div class="adb-summary--details">
          <div class="adb-description_line">
            Molestiae non recusandae itaque earum
          </div>
          <div class="adb-description_line">
            <dt>Number</dt>
            <dd>117,224</dd>
          </div>
        </div>
      </div>
      <menu class="adb-slat--toolbar adb-toolbar adb-slat--column">
        <menu class="adb-js-context_menu adb-context_menu adb-toolbar--item" data-placement="right">
          <a class="adb-button adb-button__medium adb-button__neutral adb-toolbar--item">
            Manage
          </a>
        </menu>
      </menu>
    </div>
  </div>
</div>
<div class="adb-container adb-container__tabbed adb-js-tab" id="tabbed_slats_roles">
  <div class="adb-container_header">
    <h3 class="adb-container_header--title adb-container_header--item">Local User Roles</h3>
  </div>
  <div class="adb-slat">
    <div class="adb-slat--row">
      <div class="adb-slat--content adb-slat--column adb-summary">
        <h3 class="adb-summary--title">
          <a>
            Kerry Hill
            <div class="adb-badge">Default</div>
          </a>
        </h3>
        <div class="adb-summary--details">
          <div class="adb-description_line">
            Rerum hic tenetur a sapiente
          </div>
          <div class="adb-description_line">
            <dt>Number</dt>
            <dd>117,224</dd>
          </div>
        </div>
      </div>
      <menu class="adb-slat--toolbar adb-toolbar adb-slat--column">
        <menu class="adb-js-context_menu adb-context_menu adb-toolbar--item" data-placement="right">
          <a class="adb-button adb-button__medium adb-button__neutral adb-toolbar--item">
            Manage
          </a>
        </menu>
      </menu>
    </div>
  </div>
</div>

Tabs with App Icon and Badge Counter and Context Menu

The selected item from the context menu can be appended or prepended to the tab navigation by changing the data-return-method = prepend or data-return-method = append

Delectus ut aut reiciendis voluptatibus. maiores doloribus asperiores repellat repellat. alias consequatur aut perferendis sit. voluptatem accusantium doloremque aperiam eaque. ipsa quae ab illo inventore

Veritatis et quasi architecto beatae. vitae dicta sunt explicabo aspernatur. aut odit aut fugit sed. quia consequuntur magni dolores eos. qui ratione voluptatem sequi nesciunt

Neque dolorem ipsum quia dolor. sit amet consectetur adipisci velit. sed quia non numquam eius. modi tempora incidunt ut labore. et dolore magnam aliquam quaerat

Voluptatem ut enim ad minima. veniam quis nostrum exercitationem ullam. corporis nemo enim ipsam voluptatem. quia voluptas sit suscipit laboriosam. nisi ut aliquid ex ea

Commodi consequatur quis autem vel. eum iure reprehenderit qui in. ea voluptate velit esse quam. nihil molestiae et iusto odio. dignissimos ducimus qui blanditiis praesentium

Laudantium totam rem voluptatum deleniti. atque corrupti quos dolores et. quas molestias excepturi sint occaecati. cupiditate non provident sed ut. perspiciatis unde omnis iste natus

Error similique sunt in culpa. qui officia deserunt mollitia animi. id est laborum et dolorum. fuga et harum quidem rerum. facilis est et expedita distinctio

Nam libero tempore cum soluta. nobis est eligendi optio cumque. nihil impedit quo porro quisquam. est qui minus id quod. maxime placeat facere possimus omnis

Voluptas assumenda est omnis dolor. repellendus temporibus autem quibusdam et. aut consequatur vel illum qui. dolorem eum fugiat quo voluptas. nulla pariatur at vero eos

Et accusamus officiis debitis aut. rerum necessitatibus saepe eveniet ut. et voluptates repudiandae sint et. molestiae non recusandae itaque earum. rerum hic tenetur a sapiente 

<nav class="adb-tabs-icon">
  <ul class="adb-tabs--items">
    <li class="adb-tabs--item active">
      <a class="adb-tabs--link" data-toggle="tab" href="#tabs-icons-example1">
        <span class="adb-id adb-id__linked adb-id__logo adb-id__sq_xsmall32">
          <img class="adb-id--img" src="../../images/logos/apps/urbanairship-72x72.png?1567620427" />
        </span>
        <span class="adb-tabs--link_text">
          Clear Work
        </span>
        <span class="adb-badge adb-badge__number adb-badge__solid">
          12
        </span>
      </a>
    </li>
    <li class="adb-tabs--item">
      <a class="adb-tabs--link" data-toggle="tab" href="#tabs-icons-example2">
        <span class="adb-id adb-id__linked adb-id__logo adb-id__sq_xsmall32">
          <img class="adb-id--img" src="../../images/logos/apps/msoffice-72x72.png?1567620427" />
        </span>
        <span class="adb-tabs--link_text">
          Microsoft Office 360 Personal Edition
        </span>
        <span class="adb-badge adb-badge__number adb-badge__solid">
          16
        </span>
      </a>
    </li>
    <li class="adb-tabs--item adb-context_menu--container">
      <menu class="adb-context_menu adb-js-context_menu" data-placement="right" data-return-method="append">
        <button class="adb-context_menu--trigger adb-js-context_menu--trigger" type="button">
          + 3 more Apps
        </button>
        <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
          <ul class="adb-stack">
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" data-href="#tabs-icons-example3">
                <span class="adb-id adb-id__linked adb-id__logo adb-id__sq_xsmall32">
                  <img class="adb-id--img" src="../../images/logos/apps/msoffice-72x72.png?1567620427" />
                </span>
                <span class="adb-tabs--link_text">
                  Microsoft Office 360 Professional Edition
                </span>
                <span class="adb-badge adb-badge__number adb-badge__solid">
                  16
                </span>
              </a>
            </li>
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" data-href="#tabs-icons-example4">
                <span class="adb-id adb-id__linked adb-id__logo adb-id__sq_xsmall32">
                  <img class="adb-id--img" src="../../images/logos/apps/symantec-72x72.png?1567620427" />
                </span>
                <span class="adb-tabs--link_text">
                  Vita Talk
                </span>
                <span class="adb-badge adb-badge__number adb-badge__solid">
                  3
                </span>
              </a>
            </li>
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" data-href="#tabs-icons-example5">
                <span class="adb-id adb-id__linked adb-id__logo adb-id__sq_xsmall32">
                  <img class="adb-id--img" src="../../images/logos/apps/mcaffee-72x72.png?1567620427" />
                </span>
                <span class="adb-tabs--link_text">
                  Accu Chat
                </span>
                <span class="adb-badge adb-badge__number adb-badge__solid">
                  9
                </span>
              </a>
            </li>
          </ul>
        </div>
      </menu>
    </li>
  </ul>
</nav>
<p class="adb-js-tab active" id="tabs-icons-example1">
  Delectus ut aut reiciendis voluptatibus. maiores doloribus asperiores repellat repellat. alias consequatur aut perferendis sit. voluptatem accusantium doloremque aperiam eaque. ipsa quae ab illo inventore
</p>
<p class="adb-js-tab" id="tabs-icons-example2">
  Veritatis et quasi architecto beatae. vitae dicta sunt explicabo aspernatur. aut odit aut fugit sed. quia consequuntur magni dolores eos. qui ratione voluptatem sequi nesciunt
</p>
<p class="adb-js-tab" id="tabs-icons-example3">
  Neque dolorem ipsum quia dolor. sit amet consectetur adipisci velit. sed quia non numquam eius. modi tempora incidunt ut labore. et dolore magnam aliquam quaerat
</p>
<p class="adb-js-tab" id="tabs-icons-example4">
  Voluptatem ut enim ad minima. veniam quis nostrum exercitationem ullam. corporis nemo enim ipsam voluptatem. quia voluptas sit suscipit laboriosam. nisi ut aliquid ex ea
</p>
<p class="adb-js-tab" id="tabs-icons-example5">
  Commodi consequatur quis autem vel. eum iure reprehenderit qui in. ea voluptate velit esse quam. nihil molestiae et iusto odio. dignissimos ducimus qui blanditiis praesentium
</p>

Drawers

Drawers are similar to tabs in that they allow you to navigate between panels of content within a page. With drawers however, both the sidebar navigation and the content panels are capable of housing more complex content. Drawers are not a replacement for or alternative to Vertical Navigation. Content panels should contain very comparable or similar content, such as lists of users for different products or user roles for different people (see below).

Considerations

  1. The container height depends on the content height. Content panels taller than the defined maximum height become scrollable.
  2. In some cases, there is more content in the sidebar navigation than in the visible content panel. When this happens, the sidebar navigation becomes scrollable.
  3. Because of the complexity of the content it contains, drawers work best in full-width layouts.

Content

Laudantium totam rem voluptatum deleniti. atque corrupti quos dolores et. quas molestias excepturi sint occaecati. cupiditate non provident sed ut. perspiciatis unde omnis iste natus

Error similique sunt in culpa. qui officia deserunt mollitia animi. id est laborum et dolorum. fuga et harum quidem rerum. facilis est et expedita distinctio 

<div class="adb-container adb-drawers">
  <div class="adb-drawers--panel adb-drawers--sidebar adb-drawers--sidebar__category">
    <nav class="adb-stack">
      <div class="adb-stack--item adb-drawers--drawer adb-is-active" data-active="adb-is-active" data-target="#drawers-panel4" data-toggle="panel" data-type="radio">
        <div class="adb-stack--item_content">
          <span class="adb-count adb-stack--affix">2</span>
          Category 1
        </div>
      </div>
      <div class="adb-stack--item adb-drawers--drawer adb-drawers--last" data-active="adb-is-active" data-target="#drawers-panel5" data-toggle="panel" data-type="radio">
        <div class="adb-stack--item_content">
          <span class="adb-count adb-stack--affix">2</span>
          Category 2
        </div>
      </div>
    </nav>
  </div>
  <div class="adb-drawers--panel adb-drawers--content">
    <div class="adb-js-panel-target adb-is-active" id="drawers-panel4">
      <div class="adb-container_header adb-drawers--panel_header">
        <h3 class="adb-container_header--title adb-container_header--item">Content</h3>
      </div>
      <div class="adb-container_content adb-drawers--panel_content">
        <p>
          Nam libero tempore cum soluta. nobis est eligendi optio cumque. nihil impedit quo porro quisquam. est qui minus id quod. maxime placeat facere possimus omnis
        </p>
      </div>
    </div>
    <div class="adb-js-panel-target" id="drawers-panel5">
      <div class="adb-container_content adb-drawers--panel_content">
        <p>
          Voluptas assumenda est omnis dolor. repellendus temporibus autem quibusdam et. aut consequatur vel illum qui. dolorem eum fugiat quo voluptas. nulla pariatur at vero eos
        </p>
      </div>
    </div>
  </div>
</div>

Drawers with Fixed Navigation Header

To add a fixed header element to the sidebar navigation, you must add inline CSS or use JavaScript to account for the space at the top of the sidebar navigation.

Loading...
Loading...

Rackspace Cloud Servers

Available
Single Server

Rackspace Cloud Servers

Available
Single Server

Rackspace Cloud Servers

Available
Multiple Servers

Rackspace Cloud Servers

Available
Multiple Servers
Loading...

Et accusamus officiis debitis aut. rerum necessitatibus saepe eveniet ut. et voluptates repudiandae sint et. molestiae non recusandae itaque earum. rerum hic tenetur a sapiente

Loading...

Delectus ut aut reiciendis voluptatibus. maiores doloribus asperiores repellat repellat. alias consequatur aut perferendis sit. voluptatem accusantium doloremque aperiam eaque. ipsa quae ab illo inventore

Veritatis et quasi architecto beatae. vitae dicta sunt explicabo aspernatur. aut odit aut fugit sed. quia consequuntur magni dolores eos. qui ratione voluptatem sequi nesciunt

Neque dolorem ipsum quia dolor. sit amet consectetur adipisci velit. sed quia non numquam eius. modi tempora incidunt ut labore. et dolore magnam aliquam quaerat

Voluptatem ut enim ad minima. veniam quis nostrum exercitationem ullam. corporis nemo enim ipsam voluptatem. quia voluptas sit suscipit laboriosam. nisi ut aliquid ex ea

Commodi consequatur quis autem vel. eum iure reprehenderit qui in. ea voluptate velit esse quam. nihil molestiae et iusto odio. dignissimos ducimus qui blanditiis praesentium

Laudantium totam rem voluptatum deleniti. atque corrupti quos dolores et. quas molestias excepturi sint occaecati. cupiditate non provident sed ut. perspiciatis unde omnis iste natus

Error similique sunt in culpa. qui officia deserunt mollitia animi. id est laborum et dolorum. fuga et harum quidem rerum. facilis est et expedita distinctio

Nam libero tempore cum soluta. nobis est eligendi optio cumque. nihil impedit quo porro quisquam. est qui minus id quod. maxime placeat facere possimus omnis

Voluptas assumenda est omnis dolor. repellendus temporibus autem quibusdam et. aut consequatur vel illum qui. dolorem eum fugiat quo voluptas. nulla pariatur at vero eos

Et accusamus officiis debitis aut. rerum necessitatibus saepe eveniet ut. et voluptates repudiandae sint et. molestiae non recusandae itaque earum. rerum hic tenetur a sapiente

Delectus ut aut reiciendis voluptatibus. maiores doloribus asperiores repellat repellat. alias consequatur aut perferendis sit. voluptatem accusantium doloremque aperiam eaque. ipsa quae ab illo inventore

Veritatis et quasi architecto beatae. vitae dicta sunt explicabo aspernatur. aut odit aut fugit sed. quia consequuntur magni dolores eos. qui ratione voluptatem sequi nesciunt

Neque dolorem ipsum quia dolor. sit amet consectetur adipisci velit. sed quia non numquam eius. modi tempora incidunt ut labore. et dolore magnam aliquam quaerat

Voluptatem ut enim ad minima. veniam quis nostrum exercitationem ullam. corporis nemo enim ipsam voluptatem. quia voluptas sit suscipit laboriosam. nisi ut aliquid ex ea

Commodi consequatur quis autem vel. eum iure reprehenderit qui in. ea voluptate velit esse quam. nihil molestiae et iusto odio. dignissimos ducimus qui blanditiis praesentium

Laudantium totam rem voluptatum deleniti. atque corrupti quos dolores et. quas molestias excepturi sint occaecati. cupiditate non provident sed ut. perspiciatis unde omnis iste natus

Error similique sunt in culpa. qui officia deserunt mollitia animi. id est laborum et dolorum. fuga et harum quidem rerum. facilis est et expedita distinctio

Nam libero tempore cum soluta. nobis est eligendi optio cumque. nihil impedit quo porro quisquam. est qui minus id quod. maxime placeat facere possimus omnis

Voluptas assumenda est omnis dolor. repellendus temporibus autem quibusdam et. aut consequatur vel illum qui. dolorem eum fugiat quo voluptas. nulla pariatur at vero eos

Et accusamus officiis debitis aut. rerum necessitatibus saepe eveniet ut. et voluptates repudiandae sint et. molestiae non recusandae itaque earum. rerum hic tenetur a sapiente 

<div class="adb-container adb-drawers">
  <div class="adb-drawers--sidebar adb-drawers--panel">
    <div class="adb-filters">
      <div class="adb-search_field adb-search_field__auto">
        <span class="adb-search_field--affix adb-search_field--affix__default"></span>
        <span class="adb-search_field--affix adb-search_field--affix__loading">
          <span class="adb-loading">
            <span class="adb-loading--text">Loading...</span>
          </span>
        </span>
        <input class="adb-js-auto_search--input adb-search_field--input adb-text__small" id="name-search" placeholder="Search" type="search">
        <a class="adb-close adb-search_field--affix adb-search_field--affix__clear adb-js-auto_search--clear"></a>
      </div>
    </div>
    <nav class="adb-stack adb-drawers--sidebar_first">
      <div class="adb-stack--item">
        <a class="adb-link__nav adb-stack--item_content adb-is-selected" data-active="adb-is-active" data-target="#drawers-panel1" data-toggle="panel" data-type="radio">Panel 1</a>
      </div>
      <div class="adb-stack--item">
        <a class="adb-link__nav adb-stack--item_content" data-active="adb-is-active" data-target="#drawers-panel2" data-toggle="panel" data-type="radio">Panel 2</a>
      </div>
      <div class="adb-stack--item">
        <a class="adb-link__nav adb-stack--item_content" data-active="adb-is-active" data-target="#drawers-panel3" data-toggle="panel" data-type="radio">Panel 3</a>
      </div>
      <div class="adb-stack--item">
        <a class="adb-link__nav adb-stack--item_content" data-active="adb-is-active" data-target="#drawers-panel2" data-toggle="panel" data-type="radio">Panel 4</a>
      </div>
      <div class="adb-stack--item">
        <a class="adb-link__nav adb-stack--item_content" data-active="adb-is-active" data-target="#drawers-panel1" data-toggle="panel" data-type="radio">Panel 5</a>
      </div>
      <div class="adb-stack--item">
        <a class="adb-link__nav adb-stack--item_content" data-active="adb-is-active" data-target="#drawers-panel3" data-toggle="panel" data-type="radio">Panel 6</a>
      </div>
    </nav>
  </div>
  <div class="adb-drawers--content adb-drawers--panel">
    <div class="adb-js-panel-target adb-is-active" id="drawers-panel1">
      <div class="adb-drawers--panel_header adb-filters">
        <div class="adb-search_field adb-search_field__auto">
          <span class="adb-search_field--affix adb-search_field--affix__default"></span>
          <span class="adb-search_field--affix adb-search_field--affix__loading">
            <span class="adb-loading">
              <span class="adb-loading--text">Loading...</span>
            </span>
          </span>
          <input class="adb-js-auto_search--input adb-search_field--input adb-text__small" id="name-search" placeholder="Search" type="search">
          <a class="adb-close adb-search_field--affix adb-search_field--affix__clear adb-js-auto_search--clear"></a>
        </div>
      </div>
      <div class="adb-drawers--panel_content adb-table adb-table__actionable">
        <table>
          <colgroup>
            <col span="1">
            <col width="60%">
            <col width="40%">
          </colgroup>
          <tbody>
            <tr class="adb-js-radio">
              <td>
                <input checked id="drawers-option1" name="drawers-options" type="radio">
              </td>
              <td class="adb-table--card">
                <div class="adb-table--card_image">
                  <div class="adb-id adb-id__logo adb-id__hz_small">
                    <img class="adb-id--img" src="../../images/logos/apps/tribehr-192x100.png?1567620427" />
                  </div>
                </div>
                <div class="adb-table--card_text adb-summary">
                  <h4 class="adb-summary--title">Rackspace Cloud Servers</h4>
                  <div class="adb-summary--details">
                    <span class="adb-status adb-status__active">
                      <span class="adb-status--gem"></span>
                      Available
                    </span>
                  </div>
                </div>
              </td>
              <td>Single Server</td>
            </tr>
            <tr class="adb-js-radio">
              <td>
                <input id="drawers-option2" name="drawers-options" type="radio">
              </td>
              <td class="adb-table--card">
                <div class="adb-table--card_image">
                  <div class="adb-id adb-id__logo adb-id__hz_small">
                    <img class="adb-id--img" src="../../images/logos/apps/sendgrid-192x100.png?1567620427" />
                  </div>
                </div>
                <div class="adb-table--card_text adb-summary">
                  <h4 class="adb-summary--title">Rackspace Cloud Servers</h4>
                  <div class="adb-summary--details">
                    <span class="adb-status adb-status__active">
                      <span class="adb-status--gem"></span>
                      Available
                    </span>
                  </div>
                </div>
              </td>
              <td>Single Server</td>
            </tr>
            <tr class="adb-js-radio">
              <td>
                <input id="drawers-option3" name="drawers-options" type="radio">
              </td>
              <td class="adb-table--card">
                <div class="adb-table--card_image">
                  <div class="adb-id adb-id__logo adb-id__hz_small">
                    <img class="adb-id--img" src="../../images/logos/apps/formstack-192x100.png?1567620427" />
                  </div>
                </div>
                <div class="adb-table--card_text adb-summary">
                  <h4 class="adb-summary--title">Rackspace Cloud Servers</h4>
                  <div class="adb-summary--details">
                    <span class="adb-status adb-status__active">
                      <span class="adb-status--gem"></span>
                      Available
                    </span>
                  </div>
                </div>
              </td>
              <td>Multiple Servers</td>
            </tr>
            <tr class="adb-js-radio adb-drawers--last">
              <td>
                <input id="drawers-option4" name="drawers-options" type="radio">
              </td>
              <td class="adb-table--card">
                <div class="adb-table--card_image">
                  <div class="adb-id adb-id__logo adb-id__hz_small">
                    <img class="adb-id--img" src="../../images/logos/apps/mcaffee-192x100.png?1567620427" />
                  </div>
                </div>
                <div class="adb-table--card_text adb-summary">
                  <h4 class="adb-summary--title">Rackspace Cloud Servers</h4>
                  <div class="adb-summary--details">
                    <span class="adb-status adb-status__active">
                      <span class="adb-status--gem"></span>
                      Available
                    </span>
                  </div>
                </div>
              </td>
              <td>Multiple Servers</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="adb-container_footer adb-drawers--panel_footer">
        <div class="adb-container_footer--item adb-container_footer--item__last">
          <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">4</a>
            <a class="adb-pagination--button adb-pagination--button__middle">5</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>
        </div>
      </div>
    </div>
    <div class="adb-js-panel-target" id="drawers-panel2">
      <div class="adb-drawers--panel_header adb-filters">
        <div class="adb-search_field adb-search_field__auto">
          <span class="adb-search_field--affix adb-search_field--affix__default"></span>
          <span class="adb-search_field--affix adb-search_field--affix__loading">
            <span class="adb-loading">
              <span class="adb-loading--text">Loading...</span>
            </span>
          </span>
          <input class="adb-js-auto_search--input adb-search_field--input adb-text__small" id="name-search" placeholder="Search" type="search">
          <a class="adb-close adb-search_field--affix adb-search_field--affix__clear adb-js-auto_search--clear"></a>
        </div>
      </div>
      <div class="adb-container_content adb-drawers--panel_content" style="height: 200px;">
        <p>
          Delectus ut aut reiciendis voluptatibus. maiores doloribus asperiores repellat repellat. alias consequatur aut perferendis sit. voluptatem accusantium doloremque aperiam eaque. ipsa quae ab illo inventore
        </p>
      </div>
      <div class="adb-container_footer adb-drawers--panel_footer">
        <div class="adb-container_footer--item adb-container_footer--item__last">
          <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">4</a>
            <a class="adb-pagination--button adb-pagination--button__middle">5</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>
        </div>
      </div>
    </div>
    <div class="adb-js-panel-target" id="drawers-panel3">
      <div class="adb-drawers--panel_header adb-filters">
        <div class="adb-search_field adb-search_field__auto">
          <span class="adb-search_field--affix adb-search_field--affix__default"></span>
          <span class="adb-search_field--affix adb-search_field--affix__loading">
            <span class="adb-loading">
              <span class="adb-loading--text">Loading...</span>
            </span>
          </span>
          <input class="adb-js-auto_search--input adb-search_field--input adb-text__small" id="name-search" placeholder="Search" type="search">
          <a class="adb-close adb-search_field--affix adb-search_field--affix__clear adb-js-auto_search--clear"></a>
        </div>
      </div>
      <div class="adb-container_content adb-drawers--panel_content" style="height: 200px;">
        <p>
          Veritatis et quasi architecto beatae. vitae dicta sunt explicabo aspernatur. aut odit aut fugit sed. quia consequuntur magni dolores eos. qui ratione voluptatem sequi nesciunt
        </p>
        <p>
          Neque dolorem ipsum quia dolor. sit amet consectetur adipisci velit. sed quia non numquam eius. modi tempora incidunt ut labore. et dolore magnam aliquam quaerat
        </p>
        <p>
          Voluptatem ut enim ad minima. veniam quis nostrum exercitationem ullam. corporis nemo enim ipsam voluptatem. quia voluptas sit suscipit laboriosam. nisi ut aliquid ex ea
        </p>
        <p>
          Commodi consequatur quis autem vel. eum iure reprehenderit qui in. ea voluptate velit esse quam. nihil molestiae et iusto odio. dignissimos ducimus qui blanditiis praesentium
        </p>
        <p>
          Laudantium totam rem voluptatum deleniti. atque corrupti quos dolores et. quas molestias excepturi sint occaecati. cupiditate non provident sed ut. perspiciatis unde omnis iste natus
        </p>
        <p>
          Error similique sunt in culpa. qui officia deserunt mollitia animi. id est laborum et dolorum. fuga et harum quidem rerum. facilis est et expedita distinctio
        </p>
        <p>
          Nam libero tempore cum soluta. nobis est eligendi optio cumque. nihil impedit quo porro quisquam. est qui minus id quod. maxime placeat facere possimus omnis
        </p>
        <p>
          Voluptas assumenda est omnis dolor. repellendus temporibus autem quibusdam et. aut consequatur vel illum qui. dolorem eum fugiat quo voluptas. nulla pariatur at vero eos
        </p>
        <p>
          Et accusamus officiis debitis aut. rerum necessitatibus saepe eveniet ut. et voluptates repudiandae sint et. molestiae non recusandae itaque earum. rerum hic tenetur a sapiente
        </p>
        <p>
          Delectus ut aut reiciendis voluptatibus. maiores doloribus asperiores repellat repellat. alias consequatur aut perferendis sit. voluptatem accusantium doloremque aperiam eaque. ipsa quae ab illo inventore
        </p>
        <p>
          Veritatis et quasi architecto beatae. vitae dicta sunt explicabo aspernatur. aut odit aut fugit sed. quia consequuntur magni dolores eos. qui ratione voluptatem sequi nesciunt
        </p>
        <p>
          Neque dolorem ipsum quia dolor. sit amet consectetur adipisci velit. sed quia non numquam eius. modi tempora incidunt ut labore. et dolore magnam aliquam quaerat
        </p>
        <p>
          Voluptatem ut enim ad minima. veniam quis nostrum exercitationem ullam. corporis nemo enim ipsam voluptatem. quia voluptas sit suscipit laboriosam. nisi ut aliquid ex ea
        </p>
        <p>
          Commodi consequatur quis autem vel. eum iure reprehenderit qui in. ea voluptate velit esse quam. nihil molestiae et iusto odio. dignissimos ducimus qui blanditiis praesentium
        </p>
        <p>
          Laudantium totam rem voluptatum deleniti. atque corrupti quos dolores et. quas molestias excepturi sint occaecati. cupiditate non provident sed ut. perspiciatis unde omnis iste natus
        </p>
        <p>
          Error similique sunt in culpa. qui officia deserunt mollitia animi. id est laborum et dolorum. fuga et harum quidem rerum. facilis est et expedita distinctio
        </p>
        <p>
          Nam libero tempore cum soluta. nobis est eligendi optio cumque. nihil impedit quo porro quisquam. est qui minus id quod. maxime placeat facere possimus omnis
        </p>
        <p>
          Voluptas assumenda est omnis dolor. repellendus temporibus autem quibusdam et. aut consequatur vel illum qui. dolorem eum fugiat quo voluptas. nulla pariatur at vero eos
        </p>
        <p>
          Et accusamus officiis debitis aut. rerum necessitatibus saepe eveniet ut. et voluptates repudiandae sint et. molestiae non recusandae itaque earum. rerum hic tenetur a sapiente
        </p>
        <p>
          Delectus ut aut reiciendis voluptatibus. maiores doloribus asperiores repellat repellat. alias consequatur aut perferendis sit. voluptatem accusantium doloremque aperiam eaque. ipsa quae ab illo inventore
        </p>
      </div>
      <div class="adb-container_footer adb-drawers--panel_footer">
        <div class="adb-container_footer--item adb-container_footer--item__last">
          <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">4</a>
            <a class="adb-pagination--button adb-pagination--button__middle">5</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>
        </div>
      </div>
    </div>
  </div>
</div>

Content Accordion

veritatis et quasi architecto beatae
Vitae dicta sunt explicabo aspernatur. aut odit aut fugit sed. quia consequuntur magni dolores eos. qui ratione voluptatem sequi nesciunt. neque dolorem ipsum quia dolor
Sed quia non numquam eius. modi tempora incidunt ut labore. et dolore magnam aliquam quaerat. voluptatem ut enim ad minima. veniam quis nostrum exercitationem ullam
Quia voluptas sit suscipit laboriosam. nisi ut aliquid ex ea. commodi consequatur quis autem vel. eum iure reprehenderit qui in. ea voluptate velit esse quam 
<div class="adb-accordion adb-container" id="accordion-group">
  <div class="adb-accordion--item">
    <a class="adb-accordion--trigger adb-title__large open" data-parent="#accordion-group" data-toggle="collapse" href="#accordion-item1">
      nihil molestiae et iusto odio
    </a>
    <div class="adb-accordion--target collapse active" id="accordion-item1">
      Dignissimos ducimus qui blanditiis praesentium. laudantium totam rem voluptatum deleniti. atque corrupti quos dolores et. quas molestias excepturi sint occaecati. cupiditate non provident sed ut
    </div>
  </div>
  <div class="adb-accordion--item">
    <a class="adb-accordion--trigger adb-title__large collapsed" data-parent="#accordion-group" data-toggle="collapse" href="#accordion-item2">
      perspiciatis unde omnis iste natus
    </a>
    <div class="adb-accordion--target collapse" id="accordion-item2">
      Error similique sunt in culpa. qui officia deserunt mollitia animi. id est laborum et dolorum. fuga et harum quidem rerum. facilis est et expedita distinctio
    </div>
  </div>
  <div class="adb-accordion--item">
    <a class="adb-accordion--trigger adb-title__large collapsed" data-parent="#accordion-group" data-toggle="collapse" href="#accordion-item3">
      nam libero tempore cum soluta
    </a>
    <div class="adb-accordion--target collapse" id="accordion-item3">
      Nobis est eligendi optio cumque. nihil impedit quo porro quisquam. est qui minus id quod. maxime placeat facere possimus omnis. voluptas assumenda est omnis dolor
    </div>
  </div>
</div>

Complex Accordions

Migrate to the Distributed API

All new marketplaces will use the updated API to sell your product. Only a few small changes are ncessary.

Repellendus temporibus autem quibusdam et. aut consequatur vel illum qui. dolorem eum fugiat quo voluptas. nulla pariatur at vero eos. et accusamus officiis debitis aut
Rerum necessitatibus saepe eveniet ut. et voluptates repudiandae sint et. molestiae non recusandae itaque earum. rerum hic tenetur a sapiente. delectus ut aut reiciendis voluptatibus

Complete the Test

Maiores doloribus asperiores repellat repellat. alias consequatur aut perferendis sit. voluptatem accusantium doloremque aperiam eaque. ipsa quae ab illo inventore. veritatis et quasi architecto beatae 
<div class="adb-accordion adb-container" id="accordion-group2">
  <div class="adb-accordion--item">
    <div class="adb-accordion--trigger open" data-parent="#accordion-group2" data-toggle="collapse" href="#accordion-item4">
      <h3>
        <span class="adb-status adb-status__active" data-toggle="tooltip" title="Completed">
          <span class="adb-status--gem"></span>
        </span>
        Migrate to the Distributed API
      </h3>
      <p class="adb-subtitle">
        All new marketplaces will  use the updated API to sell your product. Only a few small changes are ncessary.
      </p>
    </div>
    <div class="adb-accordion--target collapse active" id="accordion-item4">
      Vitae dicta sunt explicabo aspernatur. aut odit aut fugit sed. quia consequuntur magni dolores eos. qui ratione voluptatem sequi nesciunt. neque dolorem ipsum quia dolor
    </div>
  </div>
  <div class="adb-accordion--item">
    <div class="adb-accordion--trigger collapsed" data-parent="#accordion-group2" data-toggle="collapse" href="#accordion-item5">
      <h3>
        <span class="adb-status adb-status__active" data-toggle="tooltip" title="Completed">
          <span class="adb-status--gem"></span>
        </span>
        Subscribe to the Application
      </h3>
      <p class="adb-subtitle">
        Test the Subscription Order Event.
      </p>
    </div>
    <div class="adb-accordion--target collapse" id="accordion-item5">
      Sit amet consectetur adipisci velit. sed quia non numquam eius. modi tempora incidunt ut labore. et dolore magnam aliquam quaerat. voluptatem ut enim ad minima
    </div>
  </div>
  <div class="adb-accordion--item">
    <div class="adb-accordion--trigger collapsed" data-parent="#accordion-group2" data-toggle="collapse" href="#accordion-item6">
      <h3>
        <span class="adb-status" data-toggle="tooltip" title="Incomplete">
          <span class="adb-status--gem"></span>
        </span>
        Upgrade or Downgrade Editions
      </h3>
      <p class="adb-subtitle">
        Test the Subscription Change Event.
      </p>
    </div>
    <div class="adb-accordion--target collapse" id="accordion-item6">
      <h4>Complete the Test</h4>
      <ul>
        <li>
          <a>Purchase your application.</a>
        </li>
        <li>
          <a>Click on the "Update Subscription" tab on the "Manage Apps" page.</a>
        </li>
        <li>
          Select the desired plan and click "Continue."
        </li>
        <li>
          Complete the checkout process to upgrade/downgrade your application.
        </li>
      </ul>
      <label class="adb-selector adb-js-checkbox" for="accordion-complex-item3">
        <span class="adb-selector--input">
          <input id="accordion-complex-item3" type="checkbox">
        </span>
        <span class="adb-selector--value">
          I have verified the Subscription Change Event and completed this step.
        </span>
      </label>
    </div>
  </div>
  <div class="adb-accordion--item">
    <div class="adb-accordion--trigger collapsed" data-parent="#accordion-group2" data-toggle="collapse" href="#accordion-item7">
      <h3>
        <span class="adb-status adb-status__error" data-toggle="tooltip" title="Failed">
          <span class="adb-status--gem"></span>
        </span>
        Cancel Subscription
      </h3>
      <p class="adb-subtitle">
        Test the Subscription Cancel Event.
      </p>
    </div>
    <div class="adb-accordion--target collapse" id="accordion-item7">
      Veniam quis nostrum exercitationem ullam. corporis nemo enim ipsam voluptatem. quia voluptas sit suscipit laboriosam. nisi ut aliquid ex ea. commodi consequatur quis autem vel
    </div>
  </div>
</div>