Base by AppDirect | Containers

Containers

By themselves, containers are basic wrappers for content. You must use the container subcomponents, such as container headers and footers, within containers. Use .adb-container_content for generic content that needs padding.

Qui illum ex quis at vitae sapiente sed id odit rerum molestiae voluptas. ut reprehenderit fuga possimus dolores omnis libero. numquam optio est eum itaque velit aliquid aut. accusamus et quas quaerat dolores est veniam. commodi aliquid perferendis commodi mollitia rerum odit dolor

<div class="adb-container">
  <div class="adb-container_content">
    <p>
      Fugit quis delectus molestiae itaque asperiores harum. nisi iste omnis soluta molestias ullam quia sunt qui. atque qui perferendis repellat impedit voluptatum. quo harum quod voluptatem et. suscipit impedit ex quaerat doloremque ad est sed ratione repudiandae eligendi. dolore officia dolorum quaerat consequuntur magnam voluptatem eum nisi perferendis molestias quae quidem dolore
    </p>
  </div>
</div>

Other content housed in containers include: Slats, Tables, Stacks.

Container Headers

Headers include a short title that describes the content of the container.

Header Headline

Architecto quo esse temporibus perferendis necessitatibus voluptatum rerum qui. ut et nihil quisquam quis dolore deleniti esse vel iusto non id. saepe omnis sit autem et hic ipsam incidunt ad sit at maxime. aliquid consequatur rerum eius provident ut. ipsam voluptatem veniam dolor et iusto rerum aut nam vel unde

<div class="adb-container">
  <div class="adb-container_header">
    <h3 class="adb-container_header--title adb-container_header--item">Header Headline</h3>
  </div>
  <div class="adb-container_content">
    <p>
      Sunt sed veritatis dicta velit molestiae quis suscipit et ad consequatur nesciunt. non sit voluptas amet nulla sit. cum culpa qui eum blanditiis voluptatem. in deleniti porro earum facere et ab et sit error est nulla. quisquam atque porro iure quisquam nesciunt nesciunt quia odio tenetur nesciunt necessitatibus ea repudiandae fuga
    </p>
  </div>
</div>

Actionable Headers

Headers can also include a button or toolbar on the right that allow for actions related to the entire container, such as adding content or deleting the container. We call these "actionable" headers and they have different styles to emphasize the container actions.

Header Headline

Sapiente perferendis placeat omnis dolor totam doloribus quasi laboriosam deserunt nostrum deleniti et officia optio. voluptatibus harum alias ex quaerat est molestiae ea repellat corrupti. tenetur enim voluptas eaque quia laboriosam minima eos qui consequatur

<div class="adb-container">
  <div class="adb-container_header adb-container_header__actionable">
    <h3 class="adb-container_header--item">Header Headline</h3>
    <menu class="adb-container_header--item">
      <button class="adb-button__inset adb-button__small" type="button">
        Edit Container
      </button>
    </menu>
  </div>
  <div class="adb-container_content">
    <p>
      Dolorem molestiae labore enim quod labore sunt sed similique nostrum temporibus enim quis expedita aspernatur. ea consequatur nemo et enim sunt aliquid debitis fugiat rem saepe possimus. dolorum et neque vel doloremque doloribus id sapiente reiciendis sunt provident rerum. ex officiis sequi ut dignissimos et iste et quidem nisi est
    </p>
  </div>
</div>

Multiple Headers

You can insert headers anywhere in a container.

Header Headline

Pariatur laborum voluptatem doloremque. et repudiandae sit qui consectetur ex eligendi incidunt blanditiis molestias laboriosam recusandae. at est ut dolorem non id consequuntur occaecati sit consequatur et ut ut cupiditate. vel laboriosam cumque deserunt recusandae amet non eos rerum rem tenetur. saepe adipisci tenetur numquam et reprehenderit doloremque ullam ut autem et. qui aperiam sit illo. cupiditate voluptatum placeat voluptatem consequatur iusto quia odit ipsam impedit sint expedita

Another Header Headline

Quo et qui dolores qui suscipit sed qui deserunt. itaque harum tempora et adipisci facere magnam aliquid qui culpa magnam veritatis maxime omnis. aliquam est sint et excepturi omnis et totam blanditiis molestiae velit voluptas ut quasi. quis nihil dignissimos in recusandae temporibus. in aut qui libero voluptas voluptate ea dolore qui dolorem et

<div class="adb-container">
  <div class="adb-container_header adb-container_header__actionable">
    <h3 class="adb-container_header--item">Header Headline</h3>
    <menu class="adb-container_header--item">
      <button class="adb-button__inset adb-button__small" type="button">
        Edit Container
      </button>
    </menu>
  </div>
  <div class="adb-container_content">
    <p>
      Excepturi ut ut qui ipsa ut velit laudantium est expedita harum natus aut voluptatem. excepturi laudantium enim quia qui est recusandae culpa aliquid distinctio odio. nesciunt sed ipsum et eveniet blanditiis repellendus enim quo et vitae
    </p>
  </div>
  <div class="adb-container_header">
    <h3 class="adb-container_header--title adb-container_header--item">Another Header Headline</h3>
  </div>
  <div class="adb-container_content">
    <p>
      Architecto nesciunt quas expedita rerum numquam nobis ea. ut qui earum aspernatur earum aut perspiciatis laudantium asperiores qui iure. quo maiores saepe ipsum placeat et necessitatibus quaerat quia fugiat quia at minus velit. voluptas aperiam expedita ullam. magnam aut pariatur consequatur eos
    </p>
  </div>
</div>

Container Filters

Filters are a special form of container headers. They come with fields and filters that manipulate container content, such as Slats or Tables. You can use them with headers.

Sort by

Filter by

Voluptas minima nihil rerum perferendis a commodi. aut ut sit explicabo voluptatibus autem rerum. ut perferendis ut repellendus amet. id delectus accusamus adipisci hic repellat ducimus aliquid. placeat unde iure facilis velit. magnam modi et ut nesciunt ut similique dignissimos nesciunt perspiciatis ipsam esse minus nisi

<div class="adb-container">
  <div class="adb-filters" data-filters>
    <menu class="adb-filters--header">
      <menu class="adb-filters--header_item">
        <button class="adb-button__inset adb-button__small adb-filters--filter_button" data-toggle="filters" type="button">
          Show Filters
        </button>
        <button class="adb-button__inset adb-button__small adb-filters--download_button" type="button">
          Download CSV
        </button>
      </menu>
      <div class="adb-filters--header_item">
        <div class="adb-search_field adb-input_row adb-js-input_row">
          <div class="adb-input_row--item adb-input_row--primary">
            <input class="adb-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search" type="search">
          </div>
          <div class="adb-input_row--item">
            <button class="adb-button__square_small adb-button__inset adb-input_row--item_content">
              <i class="adb-icon__search"></i>
            </button>
          </div>
        </div>
      </div>
    </menu>
    <menu class="adb-js-filters adb-filters--content adb-is-visually_hidden">
      <div class="adb-filters--filter">
        <label class="adb-label__small adb-label__inline">Sort by</label>
        <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
          <select>
            <option>Option</option>
            <option>Another option</option>
          </select>
        </div>
      </div>
      <div class="adb-filters--filter">
        <label class="adb-label__small adb-label__inline">Filter by</label>
        <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
          <select>
            <option>Option</option>
            <option>Another option</option>
          </select>
        </div>
      </div>
    </menu>
  </div>
  <div class="adb-container_content">
    <p>
      Et tempora dolorum dolores. aut dolore veniam qui officia saepe eaque eos a. sint nisi quia exercitationem temporibus et eaque tempora atque voluptas. qui ut id vitae error tempore modi quibusdam. dolores nihil omnis non sapiente pariatur dolor vitae ullam iste velit. qui harum ut voluptas. omnis earum sed eius iste optio repellendus
    </p>
  </div>
</div>

Header Headline

Sort by

Filter by

Eius id maxime quo aliquid earum exercitationem placeat reprehenderit maxime. voluptatem molestiae omnis rem. doloremque iusto ut qui maxime at corporis veritatis eum exercitationem ad

<div class="adb-container">
  <div class="adb-container_header">
    <h3 class="adb-container_header--title adb-container_header--item">Header Headline</h3>
  </div>
  <div class="adb-filters" data-filters>
    <menu class="adb-filters--header">
      <menu class="adb-filters--header_item">
        <button class="adb-button__inset adb-button__small adb-filters--filter_button" data-toggle="filters" type="button">
          Show Filters
        </button>
        <button class="adb-button__inset adb-button__small adb-filters--download_button" type="button">
          Download CSV
        </button>
      </menu>
      <div class="adb-filters--header_item">
        <div class="adb-search_field adb-input_row adb-js-input_row">
          <div class="adb-input_row--item adb-input_row--primary">
            <input class="adb-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search" type="search">
          </div>
          <div class="adb-input_row--item">
            <button class="adb-button__square_small adb-button__inset adb-input_row--item_content">
              <i class="adb-icon__search"></i>
            </button>
          </div>
        </div>
      </div>
    </menu>
    <menu class="adb-js-filters adb-filters--content adb-is-visually_hidden">
      <div class="adb-filters--filter">
        <label class="adb-label__small adb-label__inline">Sort by</label>
        <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
          <select>
            <option>Option</option>
            <option>Another option</option>
          </select>
        </div>
      </div>
      <div class="adb-filters--filter">
        <label class="adb-label__small adb-label__inline">Filter by</label>
        <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
          <select>
            <option>Option</option>
            <option>Another option</option>
          </select>
        </div>
      </div>
    </menu>
  </div>
  <div class="adb-container_content">
    <p>
      Aspernatur voluptatem in assumenda nemo. est magni et perspiciatis itaque quaerat quia in. aliquam in iure eius dignissimos
    </p>
  </div>
</div>

Container Footers

Footers are always the last item in a container. They usually contain navigation controls, such as pagination, extra filters or call-to-action buttons.

Aut deserunt aut cumque est fugiat rerum magni aut quas sunt sunt quis a qui. corporis reprehenderit quibusdam et possimus repellat saepe tempora aut qui. sed sed rerum sunt ex. aut expedita rerum deserunt totam suscipit ut

<div class="adb-container">
  <div class="adb-container_content">
    <p>
      Itaque aperiam vero voluptatem deserunt occaecati sed sed voluptatem deleniti aut consectetur. recusandae sit voluptatem nemo quia vitae dolor adipisci voluptates harum quia ipsum est. consequuntur corporis et quidem labore sint in beatae nesciunt. ut quidem dolorem quia atque
    </p>
  </div>
  <div class="adb-container_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>

Header Headline

Quisquam sunt quo fugit eos doloremque error velit ipsum repellendus enim. omnis et dolorum illo id recusandae sunt autem qui quis. neque iste dolorem sint est placeat minima tenetur odit. ipsum qui quia animi praesentium ipsam autem quasi adipisci inventore. minus et praesentium dolores velit magnam dolor similique optio id. laboriosam illum at aut consequatur est magnam est nam quis atque. sunt ipsum quia possimus id nihil error labore laudantium qui ipsum

<div class="adb-container">
  <div class="adb-container_header">
    <h3 class="adb-container_header--title adb-container_header--item">Header Headline</h3>
  </div>
  <div class="adb-container_content">
    <p>
      Amet adipisci esse fugiat ut reiciendis laborum eum sit corrupti et enim. laboriosam sunt rem expedita voluptatem. quibusdam earum cum reiciendis eveniet fugit molestias. id recusandae nobis perspiciatis
    </p>
  </div>
  <div class="adb-container_footer">
    <div class="adb-container_footer--item">
      <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>
    </div>
    <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>

Actionable Footers

Footers with actions that modify content in the container are actionable footers. They look similar to actionable headers.

Consequuntur quod magnam sunt quae unde in libero. ex doloribus dolore autem ad quae recusandae eligendi autem qui nemo. commodi minima voluptatem qui consequuntur fugiat nesciunt dolore

<div class="adb-container">
  <div class="adb-container_content">
    <p>
      Voluptatem ducimus omnis qui iure sed distinctio odit rem numquam ab ut beatae. delectus culpa similique hic laudantium occaecati aliquid sint velit aliquam quasi sunt voluptas minus ut. molestiae laboriosam minima aut dolores ut voluptas non vel nostrum dignissimos ipsa. illo maiores explicabo similique quidem eos quod. unde et nam officia qui consequuntur qui. quibusdam numquam sequi autem dolore voluptatem porro voluptatem totam a reprehenderit possimus. voluptas dolor aut corporis qui inventore
    </p>
  </div>
  <div class="adb-container_footer adb-container_footer__actionable">
    <div class="adb-container_footer--item adb-container_footer--item__last">
      <button class="adb-button__inset adb-button__small" data-target="#edit_category" data-toggle="modal" type="button">
        <i class="adb-icon__add"></i>
        Add Category
      </button>
    </div>
  </div>
</div>

Nested Containers

Typically we use these to denote a repeatable or editable group of content, such as a group of fields you can duplicate, rearrange or delete. For nesting more than 2 levels of containers, we prefer to use collapsible Accordions to help the user quickly identify and navigate through a lot of content.

Header Headline

Est iste aperiam qui sit excepturi mollitia repellat voluptates magni. ab ad est facere sequi sint nostrum. et rem est ipsam dolore vel consequuntur asperiores. sed assumenda nam consectetur et amet vitae inventore deserunt voluptas

Header Headline

Suscipit dignissimos voluptatem facilis asperiores voluptas quibusdam necessitatibus rerum ut velit sequi et ut placeat. dignissimos repellendus asperiores veritatis laborum amet eum ut exercitationem nemo consequuntur magnam. quis facilis itaque sint ipsa consequuntur ut

<div class="adb-container adb-container__nested">
  <div class="adb-container_header adb-container_header__actionable">
    <h3 class="adb-container_header--item">Header Headline</h3>
    <menu class="adb-container_header--item">
      <button class="adb-button__inset adb-button__small" type="button">
        Edit Container
      </button>
    </menu>
  </div>
  <div class="adb-container_content">
    <div class="adb-container">
      <div class="adb-container_header adb-container_header__actionable">
        <h4 class="adb-container_header--item">Header Headline</h4>
        <menu class="adb-container_header--item">
          <button class="adb-button__danger adb-button__square_small" type="button">
            <i class="adb-icon__trash"></i>
          </button>
        </menu>
      </div>
      <div class="adb-container_content">
        <p>
          Omnis et voluptates hic eveniet doloremque qui aut ea eos commodi. aliquid aut earum consequatur non aut expedita occaecati distinctio dolorem. laudantium laborum quam nam dolore adipisci consequatur natus nisi. dolorem sunt quia deserunt blanditiis tenetur
        </p>
        <div class="adb-container">
          <div class="adb-container_header">
            <h5 class="adb-container_header--title adb-container_header--item">Header Headline</h5>
          </div>
          <div class="adb-container_content">
            <p>
              Quos officiis dolorem et dolore autem deserunt magni minus rerum deserunt voluptas omnis quis et. sunt alias aliquam quia totam esse nostrum accusamus neque sit non. et rem saepe vel ipsam consectetur dolores doloribus necessitatibus doloremque. est rerum tempora inventore quo nostrum repellat et ad numquam cum quis qui ut. id cum tempore ut veritatis reprehenderit qui earum quia et illum distinctio est. ea et autem sit
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Repeating Containers

See Container Placeholders below for the initial state.

Header Deadline

Et et cupiditate quos omnis voluptatem quis ea assumenda repellat quod dolorem earum praesentium id. laudantium et minus at qui sunt omnis inventore. debitis praesentium quas iure. aut quo tempora quos repudiandae eos doloremque tempore. consequatur molestiae enim doloremque ut illo odit quod. consequatur sint suscipit voluptatum culpa dolores ea dicta consequatur sequi in et maxime repudiandae ut. rerum asperiores sed dolores molestiae suscipit ea optio et doloribus perspiciatis

Header Deadline

Porro dolorem et quos et ea nesciunt aut beatae molestiae occaecati porro molestias nisi. veniam quia deserunt laborum nihil quisquam voluptatem aut eaque totam. aut occaecati quam facilis aut enim sequi accusantium ratione placeat distinctio eum quis sit repudiandae. perferendis quaerat voluptatem aliquam cupiditate velit atque molestiae sed

<div class="adb-form--container_field">
  <div class="adb-container">
    <div class="adb-container_header adb-container_header__actionable">
      <h3 class="adb-container_header--item">
        Header Deadline
      </h3>
      <menu class="adb-container_header--item">
        <button class="adb-button__danger adb-button__square_small" type="button">
          <i class="adb-icon__trash"></i>
        </button>
      </menu>
    </div>
    <div class="adb-container_content">
      <p>
        Odit est non enim quaerat. quia ut repellendus et dolorem nihil quasi hic. suscipit iusto expedita totam dignissimos odio porro inventore facilis esse. molestiae itaque eveniet qui consequatur sit quos sit laudantium quas et alias sequi. quo optio reiciendis amet consequatur voluptas quasi. quidem ut aut hic dolorem
      </p>
    </div>
  </div>
</div>
<div class="adb-form--container_field">
  <div class="adb-container">
    <div class="adb-container_header adb-container_header__actionable">
      <h3 class="adb-container_header--item">
        Header Deadline
      </h3>
      <menu class="adb-container_header--item">
        <button class="adb-button__danger adb-button__square_small" type="button">
          <i class="adb-icon__trash"></i>
        </button>
      </menu>
    </div>
    <div class="adb-container_content">
      <p>
        Qui corrupti ullam sit nihil maxime eveniet ipsum reiciendis aliquam quaerat quas perspiciatis. necessitatibus nesciunt sequi aut enim doloremque nihil provident vitae consequatur aut dolores qui minima. id repellat sit omnis nulla quod dolorum. dignissimos labore eos unde magnam modi sed vel quo. voluptates corporis dicta molestiae ducimus reprehenderit rerum eum culpa et non rerum odio atque est. non illum asperiores voluptates soluta praesentium architecto aperiam voluptatem quae esse non nostrum. beatae quaerat quia libero aut recusandae non
      </p>
    </div>
  </div>
</div>
<button class="adb-button__small adb-button__secondary" type="button">
  <i class="adb-icon__add"></i>
  Add Container
</button>

Sortable Containers

Use sortable containers to allow users to reorder content on a page. Use Buttons or Placeholder Messages to allow users to add/duplicate a sortable container.

Header Deadline

Nam quas provident expedita dolore fugit maxime. sunt tenetur velit veritatis ut non. voluptatem nam voluptatem omnis labore id ut deserunt enim maxime eos non

Header Deadline

Quod autem esse et. temporibus error blanditiis quia quas labore. nesciunt blanditiis ab praesentium ducimus necessitatibus incidunt sit autem consequatur. non fugiat illum distinctio aliquid quia magnam aut

<div class="adb-js-sortable">
  <div class="adb-form--container_field adb-js-sortable-item">
    <div class="adb-container">
      <div class="adb-container_header adb-container_header__actionable">
        <h3 class="adb-container_header--item">
          <i class="adb-js-sortable-reorder adb-sortable--reorder"></i>
          Header Deadline
        </h3>
        <menu class="adb-container_header--item">
          <button class="adb-button__danger adb-button__square_small" type="button">
            <i class="adb-icon__trash"></i>
          </button>
        </menu>
      </div>
      <div class="adb-container_content">
        <p>
          Eius adipisci nobis earum. autem cupiditate et ratione ut eum aut cumque repudiandae non temporibus quis et officia. dolor commodi dolore nobis officia quam architecto porro consequatur autem quo voluptatem. magni quas dolore deleniti. consequatur atque necessitatibus non sit aperiam sit ullam sed atque perspiciatis culpa ut id deleniti. suscipit aut ducimus totam unde labore molestiae dolorem aut in aspernatur aut dicta voluptatibus odio
        </p>
      </div>
    </div>
  </div>
  <div class="adb-form--container_field adb-js-sortable-item">
    <div class="adb-container">
      <div class="adb-container_header adb-container_header__actionable">
        <h3 class="adb-container_header--item">
          <i class="adb-js-sortable-reorder adb-sortable--reorder"></i>
          Header Deadline
        </h3>
        <menu class="adb-container_header--item">
          <button class="adb-button__danger adb-button__square_small" type="button">
            <i class="adb-icon__trash"></i>
          </button>
        </menu>
      </div>
      <div class="adb-container_content">
        <p>
          Consectetur corrupti autem ut recusandae id eos mollitia enim asperiores ut exercitationem ea tenetur. ex iste odio modi sit exercitationem rerum voluptates. aut distinctio harum et sit dicta est laboriosam doloribus commodi commodi laudantium distinctio. ipsam beatae et dolores qui molestiae molestiae sint omnis non omnis distinctio rerum esse in. sunt omnis eligendi et fugit assumenda et unde commodi temporibus odio
        </p>
      </div>
    </div>
  </div>
  <button class="adb-button__small adb-button__secondary" type="button">
    <i class="adb-icon__add"></i>
    Add Sortable Container
  </button>
</div>

Placeholders

Page and Container Placeholders direct the user to add content in places where content does not exist ("empty" state). By contrast, Placeholder Callouts ask the user to contribute to existing content. Page and Container Placeholders accommodate for more content in order to provide the needed extra context for the desired action.

Page Placeholders

Reviews & Questions

Throw a generic message here, or something specific to this empty page.

<div class="adb-placeholder adb-placeholder__page">
  <figure class="adb-placeholder--image">
    <i class="adb-icon__star"></i>
  </figure>
  <div class="adb-placeholder--content">
    <h2>Reviews &amp; Questions</h2>
    <p>Throw a generic message here, or something specific to this empty page.</p>
  </div>
  <button class="adb-button__primary" type="button">
    Do This Instead
  </button>
</div>

Container Placeholders

Container Placeholders indicate places where you can create and add containers. The call-to-action text is short (limited to one line) because the context for the action should be fairly clear.

Containers go here.

<div class="adb-placeholder adb-placeholder__callout adb-container">
  <div class="adb-placeholder--content">
    Containers go here.
  </div>
  <menu class="adb-placeholder--controls">
    <button class="adb-button__primary" type="button">
      Create a Container
    </button>
  </menu>
</div>

Adding Containers

Once you create a container, you can add more containers by clicking on the left-aligned add button below the container.

Header Deadline

Inventore pariatur incidunt aut dolores eos cum facere ullam similique perspiciatis et molestias facilis nulla. et voluptate voluptates alias quam eius eum iure officia sunt qui rerum quod perspiciatis. alias laboriosam doloremque cum et et accusantium repudiandae enim ipsam sit

Header Deadline

Dolorem eos deserunt blanditiis. maiores saepe temporibus deserunt. possimus voluptas earum id omnis qui assumenda reprehenderit laborum dicta eos officia voluptatem vitae voluptates. illum deleniti natus excepturi laboriosam et alias voluptatem

<div class="adb-form--container_field">
  <div class="adb-container">
    <div class="adb-container_header adb-container_header__actionable">
      <h3 class="adb-container_header--item">
        Header Deadline
      </h3>
      <menu class="adb-container_header--item">
        <button class="adb-button__danger adb-button__square_small" type="button">
          <i class="adb-icon__trash"></i>
        </button>
      </menu>
    </div>
    <div class="adb-container_content">
      <p>
        Soluta culpa architecto voluptas vel recusandae vel accusamus qui vitae vel nulla placeat aliquid necessitatibus. fuga ut tenetur sint. harum cum mollitia eaque doloremque vel possimus unde quos sed. sequi fuga qui voluptas omnis ut consequuntur totam et ducimus facilis distinctio assumenda aut. quia doloribus omnis impedit in cum sapiente nihil mollitia similique
      </p>
    </div>
  </div>
</div>
<div class="adb-form--container_field">
  <div class="adb-container">
    <div class="adb-container_header adb-container_header__actionable">
      <h3 class="adb-container_header--item">
        Header Deadline
      </h3>
      <menu class="adb-container_header--item">
        <button class="adb-button__danger adb-button__square_small" type="button">
          <i class="adb-icon__trash"></i>
        </button>
      </menu>
    </div>
    <div class="adb-container_content">
      <p>
        Sunt aut voluptatem omnis incidunt consequatur laboriosam sunt. ea repellat et reprehenderit non vel. voluptatem quia totam ipsa atque sed ab sunt quod et autem. tempore dolor eos et quaerat in est et hic nisi alias perferendis nobis. id est perspiciatis molestiae debitis sapiente quod eum qui non placeat. qui officiis autem commodi ab beatae consequatur consequatur ut voluptas est non ab culpa explicabo
      </p>
    </div>
  </div>
</div>
<button class="adb-button__small adb-button__secondary" type="button">
  <i class="adb-icon__add"></i>
  Add Container
</button>

Container Content Placeholders

Throw a generic message here, or something specific to this empty container.

Empty Table State

Throw a generic message here, or something specific to this empty container.

<div class="adb-container">
  <div class="adb-filters" data-filters>
    <menu class="adb-filters--header">
      <menu class="adb-filters--header_item">
        <button class="adb-button__inset adb-button__small adb-filters--filter_button" data-toggle="filters" type="button">
          Show Filters
        </button>
      </menu>
      <div class="adb-filters--header_item">
        <div class="adb-search_field adb-input_row adb-js-input_row">
          <div class="adb-input_row--item adb-input_row--primary">
            <input class="adb-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search" type="search">
          </div>
          <div class="adb-input_row--item">
            <button class="adb-button__square_small adb-button__inset adb-input_row--item_content">
              <i class="adb-icon__search"></i>
            </button>
          </div>
        </div>
      </div>
    </menu>
    <menu class="adb-js-filters adb-filters--content adb-is-visually_hidden">
      <div class="adb-filters--filter">
        <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
          <select>
            <option>Option</option>
            <option>Another option</option>
          </select>
        </div>
      </div>
    </menu>
  </div>
  <div class="adb-container_content">
    <div class="adb-placeholder adb-container">
      <div class="adb-placeholder--content">
        <p>Throw a generic message here, or something specific to this empty container.</p>
        <button class="adb-button__primary" type="button">
          Do This Instead
        </button>
      </div>
    </div>
  </div>
</div>
<div class="adb-container">
  <div class="adb-filters" data-filters>
    <menu class="adb-filters--header">
      <menu class="adb-filters--header_item">
        <button class="adb-button__inset adb-button__small adb-filters--filter_button" data-toggle="filters" type="button">
          Show Filters
        </button>
      </menu>
      <div class="adb-filters--header_item">
        <div class="adb-search_field adb-input_row adb-js-input_row">
          <div class="adb-input_row--item adb-input_row--primary">
            <input class="adb-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search" type="search">
          </div>
          <div class="adb-input_row--item">
            <button class="adb-button__square_small adb-button__inset adb-input_row--item_content">
              <i class="adb-icon__search"></i>
            </button>
          </div>
        </div>
      </div>
    </menu>
    <menu class="adb-js-filters adb-filters--content adb-is-visually_hidden">
      <div class="adb-filters--filter">
        <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
          <select>
            <option>Option</option>
            <option>Another option</option>
          </select>
        </div>
      </div>
    </menu>
  </div>
  <div class="adb-container_content">
    <div class="adb-placeholder adb-container">
      <div class="adb-placeholder--content">
        <figure class="adb-placeholder--image">
          <i class="adb-icon__list"></i>
        </figure>
        <h2>Empty Table State</h2>
        <p>Throw a generic message here, or something specific to this empty container.</p>
        <button class="adb-button__primary" type="button">
          Do This Instead
        </button>
      </div>
    </div>
  </div>
</div>

Loading Placeholders

Status	ID	Created	Company	Product	Edition	Frequency	Total Fee
Active	12345	04/19/1993	sed et	impedit natus	Professional Edition	Monthly	$999.99
Active	12345	12/25/2005	laboriosam magni	cum quos	Standard Edition	Yearly	$999.99
Pending	12345	04/29/2004	qui nihil	est incidunt	Basic Edition	Weekly	$999.99
Failed	12345	03/01/2009	distinctio numquam	vel consequatur	Business Edition	Daily	$999.99
Canceled	12345	01/16/2001	vel laboriosam	laudantium labore	Enterprise Edition	Hourly	$999.99

<div class="adb-container">
  <div class="adb-filters" data-filters>
    <menu class="adb-filters--header">
      <menu class="adb-filters--header_item">
        <button class="adb-button__inset adb-button__small adb-filters--filter_button" data-toggle="filters" type="button">
          Show Filters
        </button>
      </menu>
      <div class="adb-filters--header_item">
        <div class="adb-search_field adb-input_row adb-js-input_row">
          <div class="adb-input_row--item adb-input_row--primary">
            <input class="adb-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search" type="search">
          </div>
          <div class="adb-input_row--item">
            <button class="adb-button__square_small adb-button__inset adb-input_row--item_content">
              <i class="adb-icon__search"></i>
            </button>
          </div>
        </div>
      </div>
    </menu>
    <menu class="adb-js-filters adb-filters--content adb-is-visually_hidden">
      <div class="adb-filters--filter">
        <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
          <select>
            <option>Option</option>
            <option>Another option</option>
          </select>
        </div>
      </div>
    </menu>
  </div>
  <div class="adb-container_content adb-js-placeholder">
    <div class="adb-placeholder adb-container">
      <div class="adb-placeholder--content">
        <figure class="adb-placeholder--image">
          <span class="adb-loading">
            <span class="adb-loading--text">Loading...</span>
          </span>
        </figure>
      </div>
    </div>
  </div>
  <div class="adb-table adb-js-placeholder-target adb-is-hidden">
    <table>
      <thead>
        <tr>
          <th class="adb-is-active" data-sort data-sort-order="descending">
            Status
          </th>
          <th>ID</th>
          <th>Created</th>
          <th>Company</th>
          <th>Product</th>
          <th>Edition</th>
          <th>Frequency</th>
          <th>Total Fee</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>12345</td>
          <td>
            12/03/1999
          </td>
          <td>
            et enim
          </td>
          <td>
            veniam et
          </td>
          <td>Professional Edition</td>
          <td>Monthly</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__active">
              <span class="adb-status--gem"></span>
              Active
            </span>
          </td>
          <td>12345</td>
          <td>
            06/28/1994
          </td>
          <td>
            amet consequatur
          </td>
          <td>
            odit atque
          </td>
          <td>Standard Edition</td>
          <td>Yearly</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__pending">
              <span class="adb-status--gem"></span>
              Pending
            </span>
          </td>
          <td>12345</td>
          <td>
            08/05/2008
          </td>
          <td>
            neque ut
          </td>
          <td>
            aut cupiditate
          </td>
          <td>Basic Edition</td>
          <td>Weekly</td>
          <td>$999.99</td>
        </tr>
        <tr>
          <td>
            <span class="adb-status adb-status__error">
              <span class="adb-status--gem"></span>
              Failed
            </span>
          </td>
          <td>12345</td>
          <td>
            12/14/1990
          </td>
          <td>
            quod velit
          </td>
          <td>
            voluptatum rerum
          </td>
          <td>Business Edition</td>
          <td>Daily</td>
          <td>$999.99</td>
        </tr>
        <tr class="adb-is-disabled">
          <td>
            <span class="adb-status adb-status__disabled">
              <span class="adb-status--gem"></span>
              Canceled
            </span>
          </td>
          <td>12345</td>
          <td>
            07/25/2003
          </td>
          <td>
            magni ut
          </td>
          <td>
            aperiam doloremque
          </td>
          <td>Enterprise Edition</td>
          <td>Hourly</td>
          <td>$999.99</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="adb-container_footer adb-js-placeholder-target adb-is-hidden">
    <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>

Placeholders in Tables

Status	ID	Created	Product
Throw a generic message here, or something specific to this empty table.

<div class="adb-container">
  <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>Product</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="adb-table--menu" colspan="4">
            <div class="adb-placeholder adb-container">
              <div class="adb-placeholder--content">
                <p>
                  Throw a generic message here, or something specific to this empty table.
                </p>
                <button class="adb-button__primary" type="button">
                  Do This Instead
                </button>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Overlay Modals

An overlay modal is a traditional modal that overlays all other content on a page. Its position is fixed relative to the browser window. It sits on top of a transparent dark background that helps the modal become the primary focus point. By default, users can click outside the modal (on the modal background) to close it. If the modal requires the user to take an action (such as clicking on the primary action button), the user will not be able to click outside the modal to close it.

Usage

Confirm user action
Put important information into focus
Require the user to make a choice before proceeding
Allow the user to edit simple forms without leaving the page

<div class="adb-modal" id="modal-medium" role="menu">
  <h3 class="adb-modal--header" data-truncate>
    voluptatem amet saepe et illum
    <a class="adb-close" data-dismiss="modal" href="#" title="Close"></a>
  </h3>
  <div class="adb-modal--content">
    <p>
      Minus laborum perspiciatis sed saepe voluptatem fugiat molestiae. rerum a totam non. in consequatur velit fugiat vel harum eum et suscipit eligendi et sit. quidem animi illum quia. et ducimus minima et iste vero
    </p>
  </div>
  <menu class="adb-modal--footer adb-toolbar">
    <button class="adb-toolbar--item adb-button__primary" type="submit">
      Take Action
    </button>
    <button class="adb-toolbar--item adb-button__secret" data-dismiss="modal" type="button">
      Cancel
    </button>
  </menu>
</div>

Other sizes include: Large and X-Large.

Collapsible Containers

Containers

Container Headers

Header Headline

Actionable Headers

Header Headline

Multiple Headers

Header Headline

Another Header Headline

Container Filters

Header Headline

Container Footers

Header Headline

Actionable Footers

Nested Containers

Header Headline

Header Headline

Header Headline

Repeating Containers

Header Deadline

Header Deadline

Sortable Containers

Header Deadline

Header Deadline

Placeholders

Page Placeholders

Reviews & Questions

Container Placeholders

Adding Containers

Header Deadline

Header Deadline

Container Content Placeholders

Empty Table State

Loading Placeholders

Placeholders in Tables

Overlay Modals

Usage

numquam omnis eos sint sit

in laboriosam beatae et fugiat

ipsum qui rerum facilis est

Collapsible Containers