Base by AppDirect

Layout

Complex components and layout patterns

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.

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 

<div class="adb-container">
  <div class="adb-container_content">
    <p>
      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
    </p>
  </div>
</div>

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

Open, Borderless Containers

Borderless container with padding.

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 

<div class="adb-container__open">
  <div class="adb-container_content">
    <p>
      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
    </p>
  </div>
</div>

Elevated Containers

Borderless container with a drop-shadow.

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 

<div class="adb-container__elevated">
  <div class="adb-container_content">
    <p>
      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>
  </div>
</div>

Backgrounded Containers

Similar like Alerts and Help Messages, the standard container may also feature a distinctive background color emphasising the container content.

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 

<div class="adb-container__backgrounded">
  <div class="adb-container_content">
    <p>
      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>
  </div>
</div>

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 

<div class="adb-container_backgrounded__error">
  <div class="adb-container_content">
    <p>
      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
    </p>
  </div>
</div>

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 

<div class="adb-container_backgrounded__warning">
  <div class="adb-container_content">
    <p>
      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
    </p>
  </div>
</div>

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 

<div class="adb-container_backgrounded__success">
  <div class="adb-container_content">
    <p>
      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
    </p>
  </div>
</div>

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 

<div class="adb-container_backgrounded__info">
  <div class="adb-container_content">
    <p>
      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>
  </div>
</div>

Container Headers

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

Header Headline

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 

<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>
      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>
  </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

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 

<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>
      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
    </p>
  </div>
</div>

Multiple Headers

You can insert headers anywhere in a container.

Header Headline

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

Another Header Headline

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 

<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>
      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
    </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>
      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
    </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.

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 

<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>
      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>
  </div>
</div>

Header Headline

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 

<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>
      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>
  </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 consequatur vel illum qui. dolorem eum fugiat quo voluptas. nulla pariatur at vero eos. et accusamus officiis debitis aut. rerum necessitatibus saepe eveniet ut 

<div class="adb-container">
  <div class="adb-container_content">
    <p>
      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
    </p>
  </div>
  <div class="adb-container_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>

Header Headline

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 

<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>
      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
    </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">
        <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>

Actionable Footers

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

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 

<div class="adb-container">
  <div class="adb-container_content">
    <p>
      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
    </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

Header Headline

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

Header Headline

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 

<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>
          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>
        <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>
              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>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Repeating Containers

See Container Placeholders below for the initial state.

Header Deadline

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

Header Deadline

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 

<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>
        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
      </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>
        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
      </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

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

Header Deadline

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 

<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>
          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>
      </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>
          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>
      </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

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

Header Deadline

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 

<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>
        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
      </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>
        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
      </p>
    </div>
  </div>
</div>
<button class="adb-button__small adb-button__secondary" type="button">
  <i class="adb-icon__add"></i>
  Add Container
</button>

Tiled Containers

Box

Simple, secure sharing from anywhere

Box® provides a secure, scalable content sharing and collaboration platform that both users and IT love and adopt, including 92% of the Fortune 500. Box's dynamic, flexible content management

Free

Yendo

Accounting & CRM for small business Discounted

CRM and Accounting software for small/medium sized businesses. Smartphone compatible, works on iPhone, Blackberry etc. Branded Sales Invoices, Purchase Orders, Custom Invoice Design Templates, Send

Free + Premium Plans

Cakemail

Email Marketing Made Simple. Free Trial

CakeMail makes it easy for business owners to keep in touch with existing customers or market to prospective clients.

$9.99

Wordpress

Software for blogs and websites Coming Soon

WordPress started as just a blogging system, but has evolved to be used as full content management system and so much more through the thousands of plugins and widgets and themes

$99.99 / mo

Chownow

The online ordering system for restaurants

Custom Mobile Apps | Facebook Ordering | Website Ordering Widgets

$999.99 / User / yr

Urban Airship

Global Leader in Push Messaging

Use unparalleled customer insight—preferences, behaviors, current location and location history—to target mobile messaging that quadruples engagement, doubles retention and drives

Starts at $9.99

Formstack

Customize, brand & launch an online form in seconds

Formstack helps you create powerful online forms within minutes, allowing you to collect information, payments, registrations, etc., in one centralized location. All form submissions are

Starts at $99.99 / mo

Symantec Endpoint Protection Small Business Edition 2013

Simple, fast cloud-managed protection against viruses and malware. Free Trial

The new and simpler way to deliver critical protection to laptops, desktops and file servers for your small business. Includes automatic updates that protect against the latest batch of viruses or

Starts at $999.99 / User / yr

FreeAgent

Small Business Accounting Software. Simplified.

FreeAgent is an online accounting application used by thousands of freelancers and small businesses. It was recently voted Best Small Business Accounting Application in the 2010 Software

Starts at $99.00

Sendgrid

Email Delivery. Simplified. Discount

Sendgrid's cloud-based email infrastructure relieves businesses of the cost and complexity of maintaining email systems.

Available via Partner

Microsoft Office 365

Online Software Hosted in the Cloud

Microsoft Office 365 takes the industry's most recognized set of productivity and collaboration tools and delivers them as a subscription service. With our cloud services, your organization can lower overall costs and deliver the right set of tools for the right users, all with appropriate layers of security and compliance.

Available via Partner

Google Apps

Web-Based Email, Calendar, and Documents for Teams

Google Apps offers simple, powerful communication and collaboration tools for your small or medium business – all hosted by Google to streamline setup, minimize maintenance, and reduce IT costs.

$999.99 

<div class="adb-tiles adb-tiles__three adb-tiles__grid">
  <div class="adb-tile adb-js-tile">
    <div class="adb-card">
      <div class="adb-card--image">
                <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_small" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/box-120x120.png?1567620427" />
        </a>

      </div>
      <div class="adb-card--content adb-summary">
        <h4 class="adb-summary--title">
          <a data-truncate="line" href="../../prototype/marketplace/product.html">Box
          </a>
        </h4>
        <div class="adb-rating adb-summary--details">
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
        </div>
      </div>
    </div>
    <div class="adb-js-tile-basic">
      <p>
        Simple, secure sharing from anywhere
        <span class="adb-badges">
          <span class="adb-badge adb-badge__icon">
            <i class="adb-icon__star"></i>
          </span>
          <span class="adb-badge adb-badge__icon">
            <i class="adb-icon__clock"></i>
          </span>
        </span>
      </p>
    </div>
    <p class="adb-js-tile-extended" data-lines="3" data-truncate="paragraph">
      Box® provides a secure, scalable content sharing and collaboration platform that both users and IT love and adopt, including 92% of the Fortune 500. Box's dynamic, flexible content management
    </p>
    <div class="adb-tile--details">
      <div class="adb-tile--details_item">
        <p class="adb-caption">
          Free
        </p>
      </div>
      <div class="adb-tile--details_item">
        <label class="adb-selector adb-selector__inline adb-selector__small adb-js-checkbox" data-placement="bottom" data-title="Select to Compare" data-toggle="tooltip">
          <span class="adb-selector--input">
            <input type="checkbox">
          </span>
          <span class="adb-selector--value">
            Compare
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tile adb-js-tile">
    <div class="adb-card">
      <div class="adb-card--image">
                <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_small" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/yendo-120x120.png?1567620427" />
        </a>

      </div>
      <div class="adb-card--content adb-summary">
        <h4 class="adb-summary--title">
          <a data-truncate="line" href="../../prototype/marketplace/product.html">Yendo
          </a>
        </h4>
        <div class="adb-rating adb-summary--details">
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        </div>
      </div>
    </div>
    <div class="adb-js-tile-basic">
      <p>
        Accounting & CRM for small business
        <span class="adb-badges">
          <span class="adb-badge adb-badge__promo">Discounted</span>
          <span class="adb-badge adb-badge__icon">
            <i class="adb-icon__star"></i>
          </span>
          <span class="adb-badge adb-badge__icon">
            <i class="adb-icon__clock"></i>
          </span>
        </span>
      </p>
    </div>
    <p class="adb-js-tile-extended" data-lines="3" data-truncate="paragraph">
      CRM and Accounting software for small/medium sized businesses. Smartphone compatible, works on iPhone, Blackberry etc. Branded Sales Invoices, Purchase Orders, Custom Invoice Design Templates, Send
    </p>
    <div class="adb-tile--details">
      <div class="adb-tile--details_item">
        <p class="adb-caption">
          Free + Premium Plans
        </p>
      </div>
      <div class="adb-tile--details_item">
        <label class="adb-selector adb-selector__inline adb-selector__small adb-js-checkbox" data-placement="bottom" data-title="Select to Compare" data-toggle="tooltip">
          <span class="adb-selector--input">
            <input type="checkbox">
          </span>
          <span class="adb-selector--value">
            Compare
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tile adb-js-tile">
    <div class="adb-card">
      <div class="adb-card--image">
                <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_small" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/cakemail-120x120.png?1567620427" />
        </a>

      </div>
      <div class="adb-card--content adb-summary">
        <h4 class="adb-summary--title">
          <a data-truncate="line" href="../../prototype/marketplace/product.html">Cakemail
          </a>
        </h4>
        <div class="adb-rating adb-summary--details">
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        </div>
      </div>
    </div>
    <div class="adb-js-tile-basic">
      <p>
        Email Marketing Made Simple.
        <span class="adb-badges">
          <span class="adb-badge adb-badge__free">Free Trial</span>
        </span>
      </p>
    </div>
    <p class="adb-js-tile-extended" data-lines="3" data-truncate="paragraph">
      CakeMail makes it easy for business owners to keep in touch with existing customers or market to prospective clients.
    </p>
    <div class="adb-tile--details">
      <div class="adb-tile--details_item">
        <p class="adb-caption">
          $9.99
        </p>
      </div>
      <div class="adb-tile--details_item">
        <label class="adb-selector adb-selector__inline adb-selector__small adb-js-checkbox" data-placement="bottom" data-title="Select to Compare" data-toggle="tooltip">
          <span class="adb-selector--input">
            <input type="checkbox">
          </span>
          <span class="adb-selector--value">
            Compare
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tile adb-js-tile">
    <div class="adb-card">
      <div class="adb-card--image">
                <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_small" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/wordpress-120x120.png?1567620427" />
        </a>

      </div>
      <div class="adb-card--content adb-summary">
        <h4 class="adb-summary--title">
          <a data-truncate="line" href="../../prototype/marketplace/product.html">Wordpress
          </a>
        </h4>
        <div class="adb-rating adb-summary--details">
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        </div>
      </div>
    </div>
    <div class="adb-js-tile-basic">
      <p>
        Software for blogs and websites
        <span class="adb-badges">
          <span class="adb-badge adb-badge__soon">Coming Soon</span>
        </span>
      </p>
    </div>
    <p class="adb-js-tile-extended" data-lines="3" data-truncate="paragraph">
      WordPress started as just a blogging system, but has evolved to be used as full content management system and so much more through the thousands of plugins and widgets and themes
    </p>
    <div class="adb-tile--details">
      <div class="adb-tile--details_item">
        <p class="adb-caption">
          $99.99 / mo
        </p>
      </div>
      <div class="adb-tile--details_item">
        <label class="adb-selector adb-selector__inline adb-selector__small adb-js-checkbox" data-placement="bottom" data-title="Select to Compare" data-toggle="tooltip">
          <span class="adb-selector--input">
            <input type="checkbox">
          </span>
          <span class="adb-selector--value">
            Compare
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tile adb-js-tile">
    <div class="adb-card">
      <div class="adb-card--image">
                <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_small" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/chownow-120x120.png?1567620427" />
        </a>

      </div>
      <div class="adb-card--content adb-summary">
        <h4 class="adb-summary--title">
          <a data-truncate="line" href="../../prototype/marketplace/product.html">Chownow
          </a>
        </h4>
        <div class="adb-rating adb-summary--details">
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        </div>
      </div>
    </div>
    <div class="adb-js-tile-basic">
      <p>
        The online ordering system for restaurants
        <span class="adb-badges">
          <span class="adb-badge adb-badge__icon">
            <i class="adb-icon__star"></i>
          </span>
          <span class="adb-badge adb-badge__icon">
            <i class="adb-icon__clock"></i>
          </span>
        </span>
      </p>
    </div>
    <p class="adb-js-tile-extended" data-lines="3" data-truncate="paragraph">
      Custom Mobile Apps | Facebook Ordering | Website Ordering Widgets
    </p>
    <div class="adb-tile--details">
      <div class="adb-tile--details_item">
        <p class="adb-caption">
          $999.99 / User / yr
        </p>
      </div>
      <div class="adb-tile--details_item">
        <label class="adb-selector adb-selector__inline adb-selector__small adb-js-checkbox" data-placement="bottom" data-title="Select to Compare" data-toggle="tooltip">
          <span class="adb-selector--input">
            <input type="checkbox">
          </span>
          <span class="adb-selector--value">
            Compare
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tile adb-js-tile">
    <div class="adb-card">
      <div class="adb-card--image">
                <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_small" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/urbanairship-120x120.png?1567620427" />
        </a>

      </div>
      <div class="adb-card--content adb-summary">
        <h4 class="adb-summary--title">
          <a data-truncate="line" href="../../prototype/marketplace/product.html">Urban Airship
          </a>
        </h4>
        <div class="adb-rating adb-summary--details">
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
        </div>
      </div>
    </div>
    <p class="adb-js-tile-basic">
      Global Leader in Push Messaging
    </p>
    <p class="adb-js-tile-extended" data-lines="3" data-truncate="paragraph">
      Use unparalleled customer insight—preferences, behaviors, current location and location history—to target mobile messaging that quadruples engagement, doubles retention and drives
    </p>
    <div class="adb-tile--details">
      <div class="adb-tile--details_item">
        <p class="adb-caption">
          Starts at $9.99
        </p>
      </div>
      <div class="adb-tile--details_item">
        <label class="adb-selector adb-selector__inline adb-selector__small adb-js-checkbox" data-placement="bottom" data-title="Select to Compare" data-toggle="tooltip">
          <span class="adb-selector--input">
            <input type="checkbox">
          </span>
          <span class="adb-selector--value">
            Compare
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tile adb-js-tile">
    <div class="adb-card">
      <div class="adb-card--image">
                <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_small" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/formstack-120x120.png?1567620427" />
        </a>

      </div>
      <div class="adb-card--content adb-summary">
        <h4 class="adb-summary--title">
          <a data-truncate="line" href="../../prototype/marketplace/product.html">Formstack
          </a>
        </h4>
        <div class="adb-rating adb-summary--details">
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        </div>
      </div>
    </div>
    <p class="adb-js-tile-basic">
      Customize, brand & launch an online form in seconds
    </p>
    <p class="adb-js-tile-extended" data-lines="3" data-truncate="paragraph">
      Formstack helps you create powerful online forms within minutes, allowing you to collect information, payments, registrations, etc., in one centralized location. All form submissions are
    </p>
    <div class="adb-tile--details">
      <div class="adb-tile--details_item">
        <p class="adb-caption">
          Starts at $99.99 / mo
        </p>
      </div>
      <div class="adb-tile--details_item">
        <label class="adb-selector adb-selector__inline adb-selector__small adb-js-checkbox" data-placement="bottom" data-title="Select to Compare" data-toggle="tooltip">
          <span class="adb-selector--input">
            <input type="checkbox">
          </span>
          <span class="adb-selector--value">
            Compare
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tile adb-js-tile">
    <div class="adb-card">
      <div class="adb-card--image">
                <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_small" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/symantec-120x120.png?1567620427" />
        </a>

      </div>
      <div class="adb-card--content adb-summary">
        <h4 class="adb-summary--title">
          <a data-truncate="line" href="../../prototype/marketplace/product.html">Symantec Endpoint Protection Small Business Edition 2013
          </a>
        </h4>
        <div class="adb-rating adb-summary--details">
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        </div>
      </div>
    </div>
    <div class="adb-js-tile-basic">
      <p>
        Simple, fast cloud-managed protection against viruses and malware.
        <span class="adb-badges">
          <span class="adb-badge adb-badge__free">Free Trial</span>
        </span>
      </p>
    </div>
    <p class="adb-js-tile-extended" data-lines="3" data-truncate="paragraph">
      The new and simpler way to deliver critical protection to laptops, desktops and file servers for your small business. Includes automatic updates that protect against the latest batch of viruses or
    </p>
    <div class="adb-tile--details">
      <div class="adb-tile--details_item">
        <p class="adb-caption">
          Starts at $999.99 / User / yr
        </p>
      </div>
      <div class="adb-tile--details_item">
        <label class="adb-selector adb-selector__inline adb-selector__small adb-js-checkbox" data-placement="bottom" data-title="Select to Compare" data-toggle="tooltip">
          <span class="adb-selector--input">
            <input type="checkbox">
          </span>
          <span class="adb-selector--value">
            Compare
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tile adb-js-tile">
    <div class="adb-card">
      <div class="adb-card--image">
                <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_small" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/freeagent-120x120.png?1567620427" />
        </a>

      </div>
      <div class="adb-card--content adb-summary">
        <h4 class="adb-summary--title">
          <a data-truncate="line" href="../../prototype/marketplace/product.html">FreeAgent
          </a>
        </h4>
        <div class="adb-rating adb-summary--details">
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        </div>
      </div>
    </div>
    <p class="adb-js-tile-basic">
      Small Business Accounting Software. Simplified.
    </p>
    <p class="adb-js-tile-extended" data-lines="3" data-truncate="paragraph">
      FreeAgent is an online accounting application used by thousands of freelancers and small businesses. It was recently voted Best Small Business Accounting Application in the 2010 Software
    </p>
    <div class="adb-tile--details">
      <div class="adb-tile--details_item">
        <p class="adb-caption">
          Starts at $99.00
        </p>
      </div>
      <div class="adb-tile--details_item">
        <label class="adb-selector adb-selector__inline adb-selector__small adb-js-checkbox" data-placement="bottom" data-title="Select to Compare" data-toggle="tooltip">
          <span class="adb-selector--input">
            <input type="checkbox">
          </span>
          <span class="adb-selector--value">
            Compare
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tile adb-js-tile">
    <div class="adb-card">
      <div class="adb-card--image">
                <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_small" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/sendgrid-120x120.png?1567620427" />
        </a>

      </div>
      <div class="adb-card--content adb-summary">
        <h4 class="adb-summary--title">
          <a data-truncate="line" href="../../prototype/marketplace/product.html">Sendgrid
          </a>
        </h4>
        <div class="adb-rating adb-summary--details">
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        </div>
      </div>
    </div>
    <div class="adb-js-tile-basic">
      <p>
        Email Delivery. Simplified.
        <span class="adb-badges">
          <span class="adb-badge adb-badge__promo">Discount</span>
        </span>
      </p>
    </div>
    <p class="adb-js-tile-extended" data-lines="3" data-truncate="paragraph">
      Sendgrid's cloud-based email infrastructure relieves businesses of the cost and complexity of maintaining email systems.
    </p>
    <div class="adb-tile--details">
      <div class="adb-tile--details_item">
        <p class="adb-caption">
          Available via Partner
        </p>
      </div>
      <div class="adb-tile--details_item">
        <label class="adb-selector adb-selector__inline adb-selector__small adb-js-checkbox" data-placement="bottom" data-title="Select to Compare" data-toggle="tooltip">
          <span class="adb-selector--input">
            <input type="checkbox">
          </span>
          <span class="adb-selector--value">
            Compare
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tile adb-js-tile">
    <div class="adb-card">
      <div class="adb-card--image">
                <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_small" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/msoffice-120x120.png?1609890721" />
        </a>

      </div>
      <div class="adb-card--content adb-summary">
        <h4 class="adb-summary--title">
          <a data-truncate="line" href="../../prototype/marketplace/product.html">Microsoft Office 365
          </a>
        </h4>
        <div class="adb-rating adb-summary--details">
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        </div>
      </div>
    </div>
    <p class="adb-js-tile-basic">
      Online Software Hosted in the Cloud
    </p>
    <p class="adb-js-tile-extended" data-lines="3" data-truncate="paragraph">
      Microsoft Office 365 takes the industry's most recognized set of productivity and collaboration tools and delivers them as a subscription service. With our cloud services, your organization can lower overall costs and deliver the right set of tools for the right users, all with appropriate layers of security and compliance.
    </p>
    <div class="adb-tile--details">
      <div class="adb-tile--details_item">
        <p class="adb-caption">
          Available via Partner
        </p>
      </div>
      <div class="adb-tile--details_item">
        <label class="adb-selector adb-selector__inline adb-selector__small adb-js-checkbox" data-placement="bottom" data-title="Select to Compare" data-toggle="tooltip">
          <span class="adb-selector--input">
            <input type="checkbox">
          </span>
          <span class="adb-selector--value">
            Compare
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tile adb-js-tile">
    <div class="adb-card">
      <div class="adb-card--image">
                <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_small" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/googleapps-120x120.png?1567620427" />
        </a>

      </div>
      <div class="adb-card--content adb-summary">
        <h4 class="adb-summary--title">
          <a data-truncate="line" href="../../prototype/marketplace/product.html">Google Apps
          </a>
        </h4>
        <div class="adb-rating adb-summary--details">
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__positive"></i>
          <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        </div>
      </div>
    </div>
    <p class="adb-js-tile-basic">
      Web-Based Email, Calendar, and Documents for Teams
    </p>
    <p class="adb-js-tile-extended" data-lines="3" data-truncate="paragraph">
      Google Apps offers simple, powerful communication and collaboration tools for your small or medium business – all hosted by Google to streamline setup, minimize maintenance, and reduce IT costs.
    </p>
    <div class="adb-tile--details">
      <div class="adb-tile--details_item">
        <p class="adb-caption">
          $999.99
        </p>
      </div>
      <div class="adb-tile--details_item">
        <label class="adb-selector adb-selector__inline adb-selector__small adb-js-checkbox" data-placement="bottom" data-title="Select to Compare" data-toggle="tooltip">
          <span class="adb-selector--input">
            <input type="checkbox">
          </span>
          <span class="adb-selector--value">
            Compare
          </span>
        </label>
      </div>
    </div>
  </div>
</div>