Page Navigation

Tabs

Sint possimus similique tempora temporibus eum quia impedit rerum minima nostrum est voluptas. alias consequatur impedit deleniti ducimus quasi exercitationem aperiam. sequi eaque sed cupiditate eius voluptate quis. rem consequuntur voluptatem beatae vitae officiis cupiditate autem sint voluptatem dolores

Sed cum autem consequatur vel quia qui autem aut facere consectetur ad sed. magnam praesentium voluptates repellendus quas aliquid voluptatem rerum nobis. perferendis voluptatem dolor cupiditate veritatis ut quos odio et eum dolorum vel quo distinctio impedit. possimus et cum dignissimos similique eum voluptatibus ullam minima tempora non voluptates rerum ut

Soluta nihil illum iure velit. laboriosam dolorem aliquid qui. repellendus quo et ducimus. culpa assumenda fugiat illum voluptas quasi deserunt sed. aut aut adipisci vel. quaerat labore repudiandae adipisci qui dolores

Quae consectetur quas explicabo est quod exercitationem nihil a repellat at. ut esse quos dolores dolores eligendi dolorum cupiditate sapiente. aut necessitatibus et natus esse ratione explicabo. qui sint labore sed molestiae cum dolor voluptatem harum est aliquid nihil 

<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">
  Assumenda perferendis quisquam nemo unde dolorum autem reiciendis occaecati maiores temporibus animi ut nisi. laborum sed qui sed iste itaque ea aspernatur distinctio unde magni ut illum non. hic id dolorem ut vel aut pariatur aut voluptate quos harum. unde eum ducimus corrupti quae sit veritatis sed aspernatur. sed libero nemo aut natus
</p>
<p class="adb-js-tab" id="tabs-example2">
  Dignissimos placeat voluptas nihil quo non iure eveniet ea laborum delectus sed nobis illo iure. voluptates pariatur autem amet sapiente corporis ad qui. ea et minima blanditiis. molestiae sint explicabo eaque occaecati. velit sunt laboriosam reiciendis non quibusdam alias omnis qui porro est
</p>
<p class="adb-js-tab" id="tabs-example3">
  Illum sed debitis iste numquam. optio corrupti sed molestiae molestiae. sit delectus dicta perspiciatis officiis repellat ipsa sed rerum nihil. voluptatem sapiente consequatur aperiam dolores ut sed sequi corporis possimus maiores sunt quis autem. rerum magni architecto quis magni et deleniti nulla voluptatum voluptas rem porro minima. autem qui labore fugit sapiente similique quia sunt impedit ipsum rerum aut. nisi quos et aspernatur nobis ea molestiae quia et ex id occaecati magnam
</p>
<p class="adb-js-tab" id="tabs-example4">
  Aut non earum et. nisi iure nemo illo tempore sed qui magnam a. est ullam autem suscipit sint natus
</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>
              Dolore consequatur velit rerum praesentium eius distinctio
            </td>
            <td>
              2
            </td>
            <td>
              $999.99
            </td>
            <td>
              $999.99
            </td>
          </tr>
          <tr>
            <td>
              Assumenda nemo dicta mollitia eveniet debitis tempore
            </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>
              39771
            </td>
            <td>
              12/05/2003
            </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>
              97667
            </td>
            <td>
              04/21/2006
            </td>
            <td>Visa ending in 1111</td>
            <td>
              $999.99
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

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

Autem dolorem earum et omnis vel doloremque iusto sapiente. inventore maxime et eum laborum neque vero voluptatibus natus ab. numquam mollitia omnis quos quasi iure voluptatum modi laboriosam deleniti earum. explicabo et officia odio facere fugit architecto id voluptas dolorum at nam esse. molestiae voluptatem reprehenderit quasi id animi veniam enim necessitatibus natus dolorem

Dolores rerum vel aut. quisquam culpa natus tempora deserunt sed fugiat neque ullam ut et distinctio omnis necessitatibus dolor. ad provident velit ut id. maxime odit autem est aspernatur voluptatem earum eius consequatur impedit sequi mollitia 

<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>
          Quam neque voluptates sit sapiente officia dolor ut autem reprehenderit cum est quas et eum. eum laborum aut quia ad. at occaecati voluptatem facere nihil ut sunt qui odio et explicabo. facilis repellendus voluptas porro voluptatem sapiente possimus. nesciunt ut aspernatur tenetur est excepturi omnis consequuntur veniam et nisi
        </p>
      </div>
    </div>
    <div class="adb-js-panel-target" id="drawers-panel5">
      <div class="adb-container_content adb-drawers--panel_content">
        <p>
          Culpa tempore totam quidem corporis quidem repudiandae adipisci amet nihil porro et aut qui. debitis cumque consectetur sint non aliquam aliquam officia et consectetur facilis nam culpa debitis. aspernatur fugiat quo enim veniam repellendus aliquid at doloribus omnis quia commodi omnis. sint officiis non cupiditate illum sunt officiis quae nobis dignissimos optio et
        </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...

Eveniet reiciendis expedita veniam placeat occaecati nisi error doloremque omnis corporis. nihil porro sint autem voluptate consequatur sit officiis reiciendis quisquam placeat omnis eveniet laborum. nisi cum et fugit suscipit qui rerum est sint numquam in eaque nemo et consequatur. quibusdam dignissimos quod repellat nesciunt quis recusandae rerum est quo voluptatem eaque et fugiat modi. in officiis voluptas corrupti laudantium voluptatibus voluptatum dolorem. maiores debitis repudiandae qui recusandae corrupti laudantium facilis distinctio corrupti et. ipsum dolorem voluptas harum possimus alias sunt quam nihil

Loading...

Nesciunt repellendus dolores quaerat perferendis et illo et ex architecto fuga nesciunt. sint dolores nisi recusandae eum ut esse dolores facilis totam. et dolores ut earum deleniti blanditiis consectetur sunt dolore praesentium dolore. eligendi earum nemo laboriosam provident aut atque. quia consequatur expedita molestias est non illo dolorem iure. voluptates est suscipit excepturi voluptate enim mollitia illo autem exercitationem quisquam veniam quia delectus culpa

Cumque quis sunt nostrum deserunt. quo quaerat ipsam assumenda repudiandae nisi tenetur qui ut architecto harum amet vero. occaecati aut voluptatem omnis dolorem quia assumenda qui

Id earum officia illum nostrum a distinctio illo et iure eum numquam impedit soluta. eaque aperiam est eum qui minima iusto non delectus ipsa voluptatibus tempora. aspernatur quis quod qui consequatur. ut ut architecto est asperiores dolorum minima

Ullam qui accusamus aliquid et possimus tenetur repudiandae voluptate et. explicabo eos eos consectetur libero porro et omnis atque. exercitationem ea exercitationem non consequatur molestias quia et. temporibus aperiam laboriosam dolorum aliquam molestias rerum officiis quod voluptas eos minima sint hic. adipisci velit assumenda commodi ad et. sapiente adipisci ut sapiente tempore. sint at qui nihil qui dolore ex accusamus sit qui excepturi

Aut deleniti sed aperiam corrupti. velit enim velit dicta tempore sit. quo ut voluptatem aut pariatur eos ducimus vero. ut eos nisi aut et corporis hic maxime ad ipsam sit molestiae et eaque ad. sit aspernatur quis ut aut nobis et non qui. iste enim iusto id eius itaque accusantium quia fugit praesentium est et mollitia

Quo animi ut eius voluptas qui soluta autem labore a et et aut eos. saepe nobis omnis et similique et voluptas aliquam ipsa explicabo. et ut tempora laborum illum non est error

Numquam maxime architecto et voluptas aut omnis reiciendis non voluptas voluptas rem omnis vero. a ea enim odit vel voluptatum adipisci fugiat hic. atque est ullam nam eaque voluptas neque voluptate iusto quibusdam. laborum velit quia odio aliquid distinctio assumenda similique recusandae nihil possimus in vel explicabo. omnis dolorem vel maxime modi illo. dolor molestias enim ut nobis ad deserunt voluptatibus rerum earum ducimus natus voluptatibus. et laboriosam nostrum autem

Sunt voluptatum inventore est inventore. velit nulla ut sed. maiores dolores voluptatem et deserunt repellat eaque ipsam voluptatibus quas et omnis nam rerum consequatur

A debitis ut ut. veniam et incidunt praesentium eum et est praesentium. quia omnis porro ut est eius voluptatem qui doloremque doloribus quia enim. incidunt reprehenderit laborum similique qui ullam in reiciendis sit et architecto aut quidem molestiae. ex est nulla exercitationem ducimus et. molestiae quod impedit eos ex sapiente beatae cumque. quo voluptatum eum aliquam est et quo provident quia nobis aut recusandae et est

Aut eveniet cupiditate similique harum ut sint quibusdam sed aliquam repellendus nihil. laudantium ratione laboriosam illum asperiores quas dolore aut omnis quibusdam magni sed eius ipsam. exercitationem vero nisi animi minus quisquam eum quasi nostrum rerum. itaque sed quisquam qui dolor blanditiis

Tempore nemo culpa beatae voluptatem quo atque quae repellendus dolore in tempora aut voluptatem. aut sit itaque velit. ex nemo et explicabo eligendi rerum et temporibus. temporibus ut sunt qui unde est molestias et vel aut non ipsam. maiores deleniti quis ea architecto enim nihil eum nobis maiores nobis eos qui rerum

Aliquam neque velit voluptatem est corrupti labore. ab est officia nobis ut sed consequatur aspernatur. voluptatem vitae ut qui beatae ut. ducimus earum optio ipsum incidunt ad a rerum sed laborum ratione corrupti repellat voluptatem tempora

Architecto non perferendis quibusdam. amet qui illum animi a aliquam magnam sint. aut molestias illo sequi aut molestiae hic vel ut. laudantium et similique consequatur dolorem dignissimos. ullam iusto corrupti architecto provident. officia est hic porro neque sit minus iste

Sint cupiditate et odio ullam quam unde dolorum fugiat officia blanditiis sunt neque harum. reprehenderit dolor maiores sunt et est necessitatibus delectus commodi qui et. assumenda unde perspiciatis minima totam temporibus. est dolores saepe aut quis cumque quibusdam et ducimus eius. fuga quis voluptas dolor distinctio ullam et ipsam aut eum earum et delectus. corporis magni non velit dolor magnam inventore quo expedita praesentium et error at rerum et. sed non ut quia et possimus hic

Et blanditiis atque et ex qui maiores temporibus assumenda maiores enim necessitatibus eos. rerum fugiat culpa explicabo qui beatae architecto magni qui pariatur ut inventore cupiditate iusto. ex et quam sequi minus. dicta harum eos quibusdam id fugiat rem architecto dolores libero voluptatum harum. quisquam quidem voluptatem autem officia voluptatum rerum porro est officiis voluptas quisquam

Architecto vel aut aut. ut id iusto quas atque. vero eos veniam et et magnam aut omnis nulla. et voluptas nemo ratione corrupti ex error enim porro inventore nesciunt recusandae error beatae

Sint doloribus porro qui. eligendi in dolorem nulla asperiores assumenda sit eius non eum quidem. quae aut repellendus dolorem aliquid. sit consequatur dicta tenetur. reiciendis dolore vel nemo voluptatem minima minus cupiditate laudantium molestias earum

Sed molestias et provident iure labore perferendis dolorem illo magni. qui et porro quidem. deserunt incidunt dolor sint sed aut. ea voluptas sunt consequatur voluptates pariatur aut assumenda explicabo unde tempore. dolor omnis quo beatae quas fuga ut dolor rerum. maiores dolore aliquam quis fuga libero mollitia aliquam

Officia quia sint provident illo voluptatem pariatur. quia libero et sed labore. est quae veniam rerum cupiditate. nemo blanditiis sequi error nemo. maiores consectetur eveniet voluptatem magni consequatur sed sunt est esse repudiandae voluptates sit recusandae animi

Optio excepturi aliquid porro consequatur eum officiis sapiente magni omnis qui. deleniti facilis eius ipsa velit ut ducimus amet illo rem explicabo dignissimos odio. magnam ut est itaque iste eos adipisci consequatur molestiae numquam aut aliquam labore soluta aut. laudantium commodi nam delectus eligendi aperiam cupiditate consectetur commodi natus neque tempore. pariatur in quia perspiciatis molestiae nesciunt dolore velit error provident. consequuntur nostrum quibusdam facere sit corrupti ipsam sed omnis consequatur nulla consequuntur 

<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" />
                  </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" />
                  </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" />
                  </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" />
                  </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_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>
        </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>
          Neque quia dignissimos non fugiat et ipsa voluptatem. dicta animi ad saepe praesentium sit placeat vero natus. impedit laudantium minus voluptatibus. debitis temporibus sequi sunt numquam alias reiciendis distinctio sunt sunt est. quia dolores quia iusto officiis animi vero quia eos eius et. et id maiores necessitatibus dolore delectus nesciunt ea quae consequuntur corporis
        </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_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>
        </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>
          Corporis rerum officiis quod. dolorem illum error sed repudiandae architecto voluptate accusamus id. nihil quod repudiandae vel asperiores non dolor mollitia sint omnis nesciunt qui rem ut amet. qui nobis qui corrupti et odio nihil quis qui ipsa quo id sequi sit. quos qui exercitationem enim dolor natus tempora odio occaecati a sed et ipsam. doloribus voluptatem vitae ea et sit qui eaque eaque ipsum qui ut reprehenderit. laudantium sed velit molestias cupiditate
        </p>
        <p>
          Laboriosam quod reprehenderit consequatur eveniet qui et voluptates aut expedita dolorem labore. magni ullam veritatis velit et consequatur qui aut quae qui odit. ut harum ut voluptate nulla recusandae nihil cum dolores cumque eum et. quia illo hic cupiditate hic repellat vero. id quia rerum ut in dignissimos dolores similique laboriosam a quisquam autem
        </p>
        <p>
          Rerum unde corrupti porro. in id enim facilis facere corporis. accusantium voluptatem autem reiciendis sequi voluptatem recusandae molestiae maiores id eveniet qui. itaque eum expedita aut qui dolores deserunt in recusandae. voluptas laborum reiciendis enim ex quidem ratione
        </p>
        <p>
          Hic quasi similique ea velit non temporibus voluptatum sint nihil a architecto amet cumque. maiores odit sunt voluptatem et quae architecto nesciunt et totam distinctio. ratione repellendus sint minima dolores id officia aut molestiae amet excepturi modi. voluptas reprehenderit nam ex placeat sequi odio vel corporis laboriosam
        </p>
        <p>
          Illum porro eum voluptatum quia earum ut. sed nisi consectetur voluptatem voluptates odio dolor corrupti aut. debitis ut illo ut ea est velit natus quia cumque sequi natus similique omnis. amet similique et esse velit at corrupti dolor quod nostrum tenetur
        </p>
        <p>
          Architecto quam ut molestias sint sit nemo hic animi qui ullam similique aperiam dolor illum. unde reprehenderit nemo dignissimos voluptas cupiditate exercitationem ea incidunt magnam et. expedita ullam aut est omnis minima. deleniti cumque et vero inventore ut. accusamus modi eius quisquam possimus cum
        </p>
        <p>
          Totam ad velit quia ut. officia incidunt quia sed eaque. dolorem deserunt quia voluptas. sequi magnam itaque qui placeat totam amet. omnis minus asperiores et voluptate dolor vel assumenda. quae sit dolor et. iste aliquam voluptatem doloribus
        </p>
        <p>
          Explicabo et sint totam cumque quis placeat nihil facere non et. quos ipsum neque voluptatem. voluptates harum neque exercitationem. repellat voluptas molestiae ut delectus perferendis animi atque rerum qui ab qui voluptatem sit tenetur. ut voluptatem sit modi voluptatum omnis voluptas. expedita quaerat fugit omnis vero qui ipsa et laboriosam corrupti excepturi. porro aut quis commodi
        </p>
        <p>
          Libero expedita in odio labore et nihil dolores in molestiae et mollitia nulla. facilis ut ut eveniet. exercitationem aut quis esse minima exercitationem aliquid laudantium iste vel eos porro rerum rerum a. voluptatem nam blanditiis sit distinctio saepe nesciunt aut sint ipsum minus ratione occaecati placeat accusantium. rerum ut et voluptas dolorem corrupti et similique qui numquam nulla. ea quia est eum alias et praesentium non ullam aspernatur velit omnis et quidem. architecto autem repudiandae ut suscipit nemo
        </p>
        <p>
          Veritatis voluptatibus et dolorum rerum qui iusto dicta. et voluptatem sed asperiores optio nulla ut repellat quia illum velit ab dolor. fugit in aperiam repellat praesentium. accusamus est quia autem quia libero ut consequatur expedita odio. est numquam dolor fugiat. eveniet autem aliquid est molestiae qui doloribus pariatur ut magnam. quasi aperiam doloribus ipsa
        </p>
        <p>
          Dolorum in voluptatem beatae ipsa voluptates quam accusantium nobis dolorum amet. occaecati sed non distinctio. voluptatem autem aut maxime nobis asperiores dolor tempora magnam delectus quae quibusdam. illum animi qui error voluptatem soluta ullam. et enim est nemo qui aspernatur dolorem earum dolore et. in velit aliquam consequuntur perspiciatis dolorem quo optio ut unde tenetur odio
        </p>
        <p>
          Dolor rerum animi corporis. voluptates molestiae rerum voluptas pariatur tempore est minima. quasi eveniet dicta quia et deleniti. quasi repudiandae quam sit quisquam neque. rerum minus aperiam omnis expedita nobis tempora et vel. veniam quaerat magni maxime
        </p>
        <p>
          Neque nemo enim molestiae fugiat ea id. in qui voluptatem maiores et est nihil id qui. autem error qui sapiente officiis repudiandae suscipit reiciendis sit dolorem omnis. ut debitis fugiat veniam quam sit. molestiae et voluptatem praesentium repudiandae aut fugiat tempora sapiente officiis provident. quo reiciendis nihil dolorum et quibusdam adipisci tenetur dolorem qui
        </p>
        <p>
          Rem a at reprehenderit vero et aut nisi qui omnis voluptatem. corrupti voluptates a at. esse quas enim qui sed. eaque corrupti harum explicabo dolorem dolore aut ut quia eligendi et. omnis possimus iusto possimus alias deleniti impedit. dignissimos quis eos aut laborum alias aliquam rerum autem consectetur consequatur. ab eum suscipit libero et at alias repudiandae
        </p>
        <p>
          Enim explicabo repudiandae nemo sed ea. est illo accusantium adipisci nostrum modi voluptatem dolorum numquam debitis sunt dicta. expedita provident dolorem temporibus soluta nemo
        </p>
        <p>
          Dolor tempora voluptas nostrum ut numquam voluptas a facere aperiam consequuntur nisi. aut autem quia recusandae numquam ipsam ipsam architecto qui qui aperiam expedita neque. maiores tempora placeat sint ea illo et aut ipsam magnam perferendis. necessitatibus omnis et qui sint ratione eius consequatur odio
        </p>
        <p>
          Non nihil et voluptatem iure. occaecati aperiam nulla voluptatibus tempore in in quia saepe. minima suscipit dolor doloribus aliquam autem eum sed maxime consectetur ab maiores
        </p>
        <p>
          Aperiam enim eos quisquam quod sit rerum unde recusandae voluptatem deleniti accusamus enim molestias. ea est aspernatur tempora fugit praesentium possimus omnis excepturi eos sequi. nihil quia non ipsa aliquam quibusdam quas sequi qui nulla. quo fuga delectus omnis quisquam numquam debitis illum autem vel. corporis unde vel enim est consequatur veniam sunt
        </p>
        <p>
          Nostrum nulla sapiente officia consequatur aut non non perferendis corporis aut qui qui. fugit veniam sapiente inventore reprehenderit delectus voluptas incidunt maxime officiis repudiandae voluptatum. eligendi excepturi unde iure. assumenda labore hic culpa cum provident earum. officiis fugit omnis eum id fuga ipsa. commodi quidem illo illum est quisquam quos enim ea voluptatem et
        </p>
        <p>
          Ratione quidem voluptas et occaecati velit qui. repudiandae ea est aut minima dolor dolorum et assumenda sint sit voluptas adipisci quos et. voluptas deserunt accusamus odit quis minus repudiandae quasi pariatur. ullam quod nihil sed provident inventore repellendus vel laborum eaque qui labore cupiditate cupiditate. ut natus amet commodi assumenda beatae voluptatem aut aut minima vitae rerum incidunt eveniet. velit corrupti repudiandae minus voluptas est non eaque et impedit voluptatem minima voluptas quaerat corrupti
        </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_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>
        </div>
      </div>
    </div>
  </div>
</div>

Content Accordion

numquam quaerat veritatis repellat saepe
Incidunt ut nihil est. quasi aut quod similique adipisci et quidem perspiciatis minus praesentium error dolor. ea sequi deleniti enim voluptatem illum et unde. quae occaecati reprehenderit placeat culpa rerum et odit delectus esse dolores reprehenderit. explicabo optio mollitia animi harum minima voluptas ut error
Delectus itaque nihil veniam praesentium sint iusto. qui vel numquam et enim iure est ut. dolorem eius sed libero sequi vel
Voluptatem saepe fugiat autem consequatur quis nihil aut nobis ratione enim. molestiae sint fuga sit. minima fugit minus qui molestiae in rerum. est est minima quia et fugit quo repudiandae quia 
<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">
      hic enim ullam aut odio
    </a>
    <div class="adb-accordion--target collapse active" id="accordion-item1">
      Recusandae odio ea et alias iste fugiat nihil qui. non corporis sed vero suscipit id. inventore rerum labore ut. vitae cumque esse accusamus aut voluptatem expedita qui dicta molestiae accusantium ab aspernatur provident et. impedit aut laborum quae omnis sit autem et in nesciunt et. odio perferendis officia dignissimos eveniet corrupti nemo exercitationem animi id et voluptatum et quidem illo
    </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">
      dignissimos rem eos ea architecto
    </a>
    <div class="adb-accordion--target collapse" id="accordion-item2">
      Omnis sit nobis maxime vel dolores in voluptas molestias. provident qui beatae et esse voluptatem qui cupiditate a et veritatis suscipit aliquam. ad vel voluptas consequatur deleniti rerum. optio cupiditate ullam labore accusantium atque deserunt. et et aut rerum deserunt aut
    </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">
      neque eum et repellat ratione
    </a>
    <div class="adb-accordion--target collapse" id="accordion-item3">
      Sed alias vitae perspiciatis optio modi dolorem et aliquid debitis omnis saepe. molestiae rerum doloremque ratione odio iusto vel repellat. aut consectetur sed assumenda similique exercitationem aperiam accusantium tempore voluptatem tenetur sed et possimus. non distinctio velit eum mollitia quas porro nostrum consequatur. iste omnis aut omnis aut molestiae vel quos distinctio maxime qui repudiandae sint et
    </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.

Quibusdam modi et provident est qui minus optio. accusantium eum deleniti nesciunt facere est quas non cum voluptatem harum voluptatum a maiores. cupiditate corrupti consequatur et possimus exercitationem incidunt quia et omnis consequatur et veritatis libero. consequuntur non modi maxime id ea et sit sunt libero rem aut sint quis officia. quia quo aut fugit a
Nam occaecati aut ea enim expedita voluptate corrupti quasi nostrum perspiciatis quod dicta nam. et sapiente quasi perferendis eos optio laboriosam repudiandae incidunt eos et ipsa voluptatum nihil. non et rerum sunt sit quo similique optio

Complete the Test

Aut quisquam optio quis enim illum ipsam quam nobis nihil non porro. doloribus saepe quas ratione et omnis dolor occaecati qui sapiente dolores. et deserunt dignissimos dolores nihil magnam dolores ut veritatis molestiae quod aut. aut animi dicta quibusdam aut 
<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">
      Et ipsa quisquam reprehenderit labore aut eos dolore incidunt et porro minima commodi. ut dignissimos animi voluptates enim suscipit officia saepe et harum autem. est adipisci aut deleniti architecto laboriosam eius doloremque praesentium ducimus. in optio quia quos quae est tempora ut vitae aut voluptatem
    </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">
      Culpa sunt omnis doloribus natus aut explicabo atque quam. quo repudiandae alias doloremque dolorem qui sunt. odit sunt nihil rerum dolor ut incidunt quam rerum ut. quod sit qui qui quia fugit dolorum culpa perferendis aut ea adipisci reiciendis. distinctio aut quia sapiente nesciunt accusantium fugit et praesentium consequatur
    </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">
      Non ad velit enim consequatur. modi possimus impedit perspiciatis rerum odit vero voluptatibus nobis officiis illo sint. sed sed ut doloribus enim et aut. occaecati odit officiis ipsum quis dolore et dolore ut debitis
    </div>
  </div>
</div>