• Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototype
  • Acme Marketplace
  • Guidelines
  • Display
  • Navigate
  • Forms
  • Layout
  • Prototypes
    • Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototypes
    • Release Notes
    • Sass Documentation
    • Gulp Documentation
    • CSS/SASS Stats
    • Preview All Components
Base by AppDirect

Layout

Complex components and layout patterns

Containers
Tables
Modals
Sliders
Slats
Pricing
Feeds

Slats

Default Example

Sample Company Alias consequatur aut perferendis sit

Enabled, 5 Users
  • Join Company
  • Verify Email Domain
  • Disable Company
Company ID:
153011
Created:
03/29/2013
Company Access:
Marketplace Admin
Edit
Company Access
Default User Role:
Vendor
Edit
Default User Role
Domain:
sample-domain.com Verified
Tax Rate:
10%
Edit
Tax Rate
%
23 Free Trials
534 Expired Trials
500,384 Purchased
3 Canceled
1,493 Unpaid Invoices
$10M Total Spent
<div class="adb-container">
  <div class="adb-container_header adb-container_header__actionable adb-slat">
    <div class="adb-slat--image adb-slat--column">
      <div class="adb-id adb-id__sq_small">
        <img class="adb-id--img" src="../../images/avatars/yarunLuon-72x72.png?1625765173" />
      </div>
    </div>
    <div class="adb-slat--content adb-slat--column adb-summary">
      <h3 class="adb-summary--title">
        Sample Company
        Voluptatem accusantium doloremque aperiam eaque
      </h3>
      <span class="adb-status adb-status__active">
        <span class="adb-status--gem"></span>
        Enabled, 5 Users
      </span>
    </div>
    <menu class="adb-slat--column adb-slat--toolbar adb-toolbar">
      <button class="adb-button__emphasis adb-toolbar--item" type="button">
        Make Purchase
      </button>
      <menu class="adb-js-context_menu adb-context_menu adb-toolbar--item" data-placement="right">
        <button class="adb-js-context_menu--trigger adb-context_menu--trigger" type="button">
          Manage
        </button>
        <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
          <ul class="adb-stack">
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Join Company
              </a>
            </li>
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Verify Email Domain
              </a>
            </li>
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Disable Company
              </a>
            </li>
          </ul>
        </div>
      </menu>
    </menu>
  </div>
  <div class="adb-slat">
    <dl class="adb-description_table">
      <table>
        <colgroup>
          <col width="33.33%">
          <col width="33.33%">
          <col width="33.33%">
        </colgroup>
        <tbody>
          <tr>
            <td>
              <div class="adb-description_line">
                <dt>Company ID:</dt>
                <dd>153011</dd>
              </div>
              <div class="adb-description_line">
                <dt>Created:</dt>
                <dd>03/29/2013</dd>
              </div>
            </td>
            <td>
              <div class="adb-description_line">
                <dt>Company Access:</dt>
                <dd>Marketplace Admin</dd>
                <a class="adb-link adb-link__action" data-event="click" data-toggle="dialog" href="#">
                  Edit
                </a>
                <form action="" class="adb-tooltip_form adb-js-dialog">
                  <fieldset class="adb-tooltip_form--fieldset">
                    <div class="adb-tooltip_form--legend">
                      <legend>Company Access</legend>
                    </div>
                    <div class="adb-tooltip_form--field">
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="company-option7">
                        <span class="adb-selector--input">
                          <input id="company-option7" name="company-access" type="checkbox">
                        </span>
                        <span class="adb-selector--value">
                          Vendor on Marketplace
                        </span>
                      </label>
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="company-option8">
                        <span class="adb-selector--input">
                          <input checked id="company-option8" name="company-access" type="checkbox">
                        </span>
                        <span class="adb-selector--value">
                          Marketplace Admin
                        </span>
                      </label>
                    </div>
                  </fieldset>
                  <menu class="adb-toolbar">
                    <button class="adb-button__primary adb-toolbar--item" type="submit">
                      Save
                    </button>
                    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
                      Cancel
                    </button>
                  </menu>
                </form>
              </div>
              <div class="adb-description_line">
                <dt>Default User Role:</dt>
                <dd>Vendor</dd>
                <a class="adb-link adb-link__action" data-event="click" data-toggle="dialog" href="#">
                  Edit
                </a>
                <form action="" class="adb-tooltip_form adb-js-dialog">
                  <fieldset class="adb-tooltip_form--fieldset">
                    <div class="adb-tooltip_form--legend">
                      <legend>Default User Role</legend>
                    </div>
                    <div class="adb-tooltip_form--field">
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="company-option5">
                        <span class="adb-selector--input">
                          <input id="company-option5" name="company-user-role" type="radio">
                        </span>
                        <span class="adb-selector--value">
                          User
                        </span>
                      </label>
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="company-option6">
                        <span class="adb-selector--input">
                          <input checked id="company-option6" name="company-user-role" type="radio">
                        </span>
                        <span class="adb-selector--value">
                          Vendor
                        </span>
                      </label>
                    </div>
                  </fieldset>
                  <menu class="adb-toolbar">
                    <button class="adb-button__primary adb-toolbar--item" type="submit">
                      Save
                    </button>
                    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
                      Cancel
                    </button>
                  </menu>
                </form>
              </div>
            </td>
            <td>
              <div class="adb-description_line">
                <dt>Domain:</dt>
                <dd>
                  <a>
                    sample-domain.com
                  </a>
                  <span class="adb-badge adb-badge__success">
                    Verified
                  </span>
                </dd>
              </div>
              <div class="adb-description_line">
                <dt>Tax Rate:</dt>
                <dd>10%</dd>
                <a class="adb-link adb-link__action" data-event="click" data-toggle="dialog" href="#">
                  Edit
                </a>
                <form action="" class="adb-tooltip_form adb-js-dialog">
                  <fieldset class="adb-tooltip_form--fieldset">
                    <div class="adb-tooltip_form--legend">
                      <legend>Tax Rate</legend>
                    </div>
                    <div class="adb-tooltip_form--field">
                      <input max="100" min="0" type="number" value="10">
                      <span class="adb-affix">%</span>
                    </div>
                  </fieldset>
                  <menu class="adb-toolbar">
                    <button class="adb-button__primary adb-toolbar--item" type="submit">
                      Save
                    </button>
                    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
                      Cancel
                    </button>
                  </menu>
                </form>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </dl>
  </div>
  <div class="adb-slat">
    <div class="adb-stats adb-stats__horizontal">
      <div class="adb-stat">
        <span class="adb-stat--value">23</span>
        <span class="adb-stat--unit">Free Trials</span>
      </div>
      <div class="adb-stat">
        <span class="adb-stat--value">534</span>
        <span class="adb-stat--unit">Expired Trials</span>
      </div>
      <div class="adb-stat">
        <span class="adb-stat--value">500,384</span>
        <span class="adb-stat--unit">Purchased</span>
      </div>
      <div class="adb-stat">
        <span class="adb-stat--value">3</span>
        <span class="adb-stat--unit">Canceled</span>
      </div>
      <div class="adb-stat">
        <span class="adb-stat--value">1,493</span>
        <span class="adb-stat--unit">Unpaid Invoices</span>
      </div>
      <div class="adb-stat">
        <span class="adb-stat--value">$10M</span>
        <span class="adb-stat--unit">Total Spent</span>
      </div>
    </div>
  </div>
</div>

Open Slats

Slats with no outer borders.

Business Operations Bundle

Product 2 of 2
<div class="adb-slats">
  <div class="adb-slat">
    <div class="adb-slat--image adb-slat--column" style="padding-left: 0;">
      <div class="adb-id_group adb-id_group__linked">
        <span class="adb-id adb-id__logo adb-id__sq_small adb-id_group--item">
          <img class="adb-id--img" src="../../images/logos/apps/msoffice-72x72.png?1625765172" />
        </span>
        <span class="adb-id adb-id__logo adb-id__sq_small adb-id_group--item">
          <img class="adb-id--img" src="../../images/logos/apps/googleapps-72x72.png?1625765172" />
        </span>
      </div>
    </div>
    <div class="adb-slat--content adb-slat--column adb-slat--column--centered adb-summary">
      <h1 class="adb-summary--title adb-title--secondary">
        Business Operations Bundle
      </h1>
      <h6 class="adb-summary--details">
        Product 2 of 2
      </h6>
    </div>
  </div>
</div>

2 Reviews

ACME is Great  Featured

Ipsa quae ab illo inventore. veritatis et quasi architecto beatae. vitae dicta sunt explicabo aspernatur. aut odit aut fugit sed. quia consequuntur magni dolores eos

Qui ratione voluptatem sequi nesciunt

Show 2 Comments  ·  Comment  ·  Edit  ·  Delete

Comment on Review

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

Voluptatem ut enim ad minima  ·  Delete

Veniam quis nostrum exercitationem ullam. corporis nemo enim ipsam voluptatem. quia voluptas sit suscipit laboriosam. nisi ut aliquid ex ea. commodi consequatur quis autem vel

Eum iure reprehenderit qui in

<h2>2 Reviews</h2>
<section class="adb-container__open">
  <div class="adb-slat">
    <div class="adb-slat--image adb-slat--column">
      <div class="adb-id__open adb-id__sq_medium">
        <i class="adb-id--placeholder adb-icon__user"></i>
      </div>
    </div>
    <div class="adb-slat--content adb-slat--column">
      <h3>
        ACME is Great&nbsp;
        <span class="adb-badge adb-badge__promo">
          Featured
        </span>
      </h3>
      <div class="adb-rating adb-rating__xlarge">
        <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>
      <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>
      <p class="adb-caption">
        Quas molestias excepturi sint occaecati
      </p>
      <p class="adb-caption">
        <a data-target="#review-comments" data-toggle="panel">Show 2 Comments</a>
        &nbsp;·&nbsp;
        <a data-target="#review-comment" data-toggle="panel">Comment</a>
        &nbsp;·&nbsp;
        <a>Edit</a>
        &nbsp;·&nbsp;
        <a>Delete</a>
      </p>
      <form action="" class="adb-form adb-form__comment adb-js-panel-target" id="review-comment">
        <fieldset>
          <h4>
            <legend>Comment on Review</legend>
          </h4>
          <div class="adb-form--field">
            <textarea id="review-comment-content" maxlength="2048" placeholder="Write your comments here."></textarea>
          </div>
          <menu class="adb-toolbar">
            <button class="adb-button__primary adb-toolbar--item" type="submit">
              Submit Comment
            </button>
            <button class="adb-button__secret adb-toolbar--item" data-dismiss="modal" type="button">
              Cancel
            </button>
          </menu>
        </fieldset>
      </form>
      <div class="adb-js-panel-target adb-slats" id="review-comments">
        <div class="adb-slat">
          <div class="adb-slat--image adb-slat--column">
            <div class="adb-id__open adb-id__sq_medium">
              <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png?1625765173" />
            </div>
          </div>
          <div class="adb-slat--content adb-slat--column">
            <p>
              Cupiditate non provident sed ut. perspiciatis unde omnis iste natus. error similique sunt in culpa. qui officia deserunt mollitia animi. id est laborum et dolorum
            </p>
            <p class="adb-caption">
              Fuga et harum quidem rerum
              &nbsp;·&nbsp;
              <a>Delete</a>
            </p>
          </div>
        </div>
        <div class="adb-slat">
          <div class="adb-slat--image adb-slat--column">
            <div class="adb-id__open adb-id__sq_medium">
              <i class="adb-id--placeholder adb-icon__user"></i>
            </div>
          </div>
          <div class="adb-slat--content adb-slat--column">
            <p>
              Facilis est et expedita distinctio. nam libero tempore cum soluta. nobis est eligendi optio cumque. nihil impedit quo porro quisquam. est qui minus id quod
            </p>
            <p class="adb-subtitle">
              Maxime placeat facere possimus omnis
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Profile Card

Simple Style

Judith Chung

Email:
margarita_melton@gmail.com
Created:
8/26/13
User ID:
153011
Active Enabled
  • Join Company
  • Verify Email Domain
  • Disable Company
<div class="adb-container">
  <div class="adb-slat">
    <div class="adb-slat--image adb-slat--column">
      <div class="adb-id adb-id__sq_small">
        <img class="adb-id--img" src="../../images/avatars/yarunLuon-72x72.png?1625765173" />
      </div>
    </div>
    <div class="adb-slat--content adb-slat--column adb-summary">
      <h3 class="adb-summary--title">
        Kerry Hill
      </h3>
      <dl class="adb-summary--details">
        <div class="adb-description_line">
          <dt>Email:</dt>
          <dd>
            <a>
              lorenzo-song@yahoo.com
            </a>
          </dd>
        </div>
        <div class="adb-description_line">
          <dt>Created:</dt>
          <dd>8/26/13</dd>
        </div>
        <div class="adb-description_line">
          <dt>User ID:</dt>
          <dd>153011</dd>
        </div>
        <div class="adb-description_line">
          <span class="adb-status adb-status__active">
            <span class="adb-status--gem"></span>
            Active
          </span>
          <span class="adb-status adb-status__active">
            <span class="adb-status--gem"></span>
            Enabled
          </span>
        </div>
      </dl>
    </div>
    <menu class="adb-slat--toolbar adb-toolbar adb-slat--column">
      <button class="adb-button__emphasis adb-toolbar--item" type="button">
        Make Purchase
      </button>
      <menu class="adb-js-context_menu adb-context_menu adb-toolbar--item" data-placement="right">
        <button class="adb-js-context_menu--trigger adb-context_menu--trigger" type="button">
          Manage
        </button>
        <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
          <ul class="adb-stack">
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Join Company
              </a>
            </li>
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Verify Email Domain
              </a>
            </li>
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Disable Company
              </a>
            </li>
          </ul>
        </div>
      </menu>
    </menu>
  </div>
</div>

Header Style

Sample Company Voluptas assumenda est omnis dolor

Created:
8/26/13
Company ID:
153011
Verified Email Domain Enabled
  • Join Company
  • Verify Email Domain
  • Disable Company
<div class="adb-container">
  <div class="adb-container_header adb-container_header__actionable adb-slat">
    <div class="adb-slat--image adb-slat--column">
      <div class="adb-id adb-id__logo adb-id__sq_small">
        <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-48x48.png?1625765172" />
      </div>
    </div>
    <div class="adb-slat--content adb-slat--column adb-summary">
      <h3 class="adb-summary--title">
        Sample Company
        Repellendus temporibus autem quibusdam et
      </h3>
      <dl class="adb-summary--details">
        <div class="adb-description_line">
          <dt>Created:</dt>
          <dd>8/26/13</dd>
        </div>
        <div class="adb-description_line">
          <dt>Company ID:</dt>
          <dd>153011</dd>
        </div>
        <div class="adb-description_line">
          <span class="adb-status adb-status__active">
            <span class="adb-status--gem"></span>
            Verified Email Domain
          </span>
          <span class="adb-status adb-status__active">
            <span class="adb-status--gem"></span>
            Enabled
          </span>
        </div>
      </dl>
    </div>
    <menu class="adb-slat--toolbar adb-toolbar adb-slat--column">
      <button class="adb-button__emphasis adb-toolbar--item" type="button">
        Make Purchase
      </button>
      <menu class="adb-js-context_menu adb-context_menu adb-toolbar--item" data-placement="right">
        <button class="adb-js-context_menu--trigger adb-context_menu--trigger" type="button">
          Manage
        </button>
        <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
          <ul class="adb-stack">
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Join Company
              </a>
            </li>
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Verify Email Domain
              </a>
            </li>
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Disable Company
              </a>
            </li>
          </ul>
        </div>
      </menu>
    </menu>
  </div>
</div>

Simple Style

Justice Hamilton

Active
  • Join Company
  • Verify Email Domain
  • Disable Company
<div class="adb-container">
  <div class="adb-slat">
    <div class="adb-slat--image adb-slat--column">
      <div class="adb-id adb-id__sq_small">
        <img class="adb-id--img" src="../../images/avatars/yarunLuon-72x72.png?1625765173" />
      </div>
    </div>
    <div class="adb-slat--content adb-slat--column adb-summary">
      <h3 class="adb-summary--title">
        Doris Bender
      </h3>
      <div class="adb-summary--details">
        <span class="adb-status adb-status__active">
          <span class="adb-status--gem"></span>
          Active
        </span>
      </div>
    </div>
    <menu class="adb-slat--toolbar adb-toolbar adb-slat--column">
      <button class="adb-button__emphasis adb-toolbar--item" type="button">
        Make Purchase
      </button>
      <menu class="adb-js-context_menu adb-context_menu adb-toolbar--item" data-placement="right">
        <button class="adb-js-context_menu--trigger adb-context_menu--trigger" type="button">
          Manage
        </button>
        <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
          <ul class="adb-stack">
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Join Company
              </a>
            </li>
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Verify Email Domain
              </a>
            </li>
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Disable Company
              </a>
            </li>
          </ul>
        </div>
      </menu>
    </menu>
  </div>
</div>

Header Style

Sample Company Aut consequatur vel illum qui

Enabled, 5 Users
  • Join Company
  • Verify Email Domain
  • Disable Company
<div class="adb-container">
  <div class="adb-container_header adb-container_header__actionable adb-slat">
    <div class="adb-slat--image adb-slat--column">
      <div class="adb-id adb-id__logo adb-id__sq_small">
        <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-48x48.png?1625765172" />
      </div>
    </div>
    <div class="adb-slat--content adb-slat--column adb-summary">
      <h3 class="adb-summary--title">
        Sample Company
        Dolorem eum fugiat quo voluptas
      </h3>
      <div class="adb-summary--details">
        <span class="adb-status adb-status__active">
          <span class="adb-status--gem"></span>
          Enabled, 5 Users
        </span>
      </div>
    </div>
    <menu class="adb-slat--toolbar adb-toolbar adb-slat--column">
      <button class="adb-button__emphasis adb-toolbar--item" type="button">
        Make Purchase
      </button>
      <menu class="adb-js-context_menu adb-context_menu adb-toolbar--item" data-placement="right">
        <button class="adb-js-context_menu--trigger adb-context_menu--trigger" type="button">
          Manage
        </button>
        <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
          <ul class="adb-stack">
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Join Company
              </a>
            </li>
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Verify Email Domain
              </a>
            </li>
            <li class="adb-stack--item">
              <a class="adb-link__option adb-stack--item_content" href="#">
                Disable Company
              </a>
            </li>
          </ul>
        </div>
      </menu>
    </menu>
  </div>
</div>

Attributes

Edition:
Gold Edition
Monthly Fee:
$199.99
Owner:
Raul Wagner
Access Rights:
View, Manage
Usage:
Unlimited
<div class="adb-slat">
  <dl class="adb-description_table">
    <table>
      <colgroup>
        <col width="33.33%">
        <col width="33.33%">
        <col width="33.33%">
      </colgroup>
      <tbody>
        <tr>
          <td>
            <div class="adb-description_line">
              <dt>Edition:</dt>
              <dd>Gold Edition</dd>
            </div>
            <div class="adb-description_line">
              <dt>Monthly Fee:</dt>
              <dd>
                <a href="#">$199.99</a>
              </dd>
            </div>
          </td>
          <td>
            <div class="adb-description_line">
              <dt>Owner:</dt>
              <dd>
                <a>
                  Liliana McLaughlin
                </a>
              </dd>
            </div>
            <div class="adb-description_line">
              <dt>Access Rights:</dt>
              <dd>View, Manage</dd>
            </div>
          </td>
          <td>
            <div class="adb-description_line">
              <dt>Usage:</dt>
              <dd>
                Unlimited
              </dd>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </dl>
</div>

Editable Attributes

Company Access
Default User Role
Domain:
sample-domain.com
Tax Rate:
%
Selected Company

View Sample Company Profile

Company Roles
Product Roles
Marketplace Roles
<div class="adb-container">
  <div class="adb-slat">
    <dl class="adb-description_table">
      <table>
        <colgroup>
          <col width="33.33%">
          <col width="33.33%">
          <col width="33.33%">
        </colgroup>
        <tbody>
          <tr>
            <td>
              <dt>Company Access</dt>
              <dd>
                <label class="adb-selector adb-js-checkbox" for="company-option1">
                  <span class="adb-selector--input">
                    <input id="company-option1" type="checkbox">
                  </span>
                  <span class="adb-selector--value">
                    Vendor on Marketplace
                  </span>
                </label>
                <label class="adb-selector adb-js-checkbox" for="company-option2">
                  <span class="adb-selector--input">
                    <input id="company-option2" type="checkbox">
                  </span>
                  <span class="adb-selector--value">
                    Marketplace Admin
                  </span>
                </label>
              </dd>
            </td>
            <td>
              <dt>Default User Role</dt>
              <dd>
                <label class="adb-selector adb-js-radio" for="company-option3">
                  <span class="adb-selector--input">
                    <input id="company-option3" name="company-user-role" type="radio">
                  </span>
                  <span class="adb-selector--value">
                    User
                  </span>
                </label>
                <label class="adb-selector adb-js-radio" for="company-option4">
                  <span class="adb-selector--input">
                    <input checked id="company-option4" name="company-user-role" type="radio">
                  </span>
                  <span class="adb-selector--value">
                    Vendor
                  </span>
                </label>
              </dd>
            </td>
            <td>
              <div class="adb-description_line">
                <dt>Domain:</dt>
                <dd>sample-domain.com</dd>
              </div>
              <div class="adb-description_line">
                <dt>Tax Rate:</dt>
                <dd>
                  <input max="100" min="0" type="number" value="10">
                  <span class="adb-affix">%</span>
                </dd>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </dl>
  </div>
  <div class="adb-slat">
    <dl class="adb-description_table">
      <table>
        <colgroup>
          <col width="33.33%">
          <col width="33.33%">
          <col width="33.33%">
        </colgroup>
        <tbody>
          <tr>
            <td>
              <dt>Selected Company</dt>
              <dd>
                <div class="adb-js-dropdown adb-dropdown adb-dropdown__small">
                  <select id="company" name="company">
                    <option>Sample Company</option>
                    <option>Another Company</option>
                  </select>
                </div>
                <p class="font-small">
                                    <a href="../../prototype/channel/marketplace/company_detail.html">View Sample Company Profile
                  </a>

                </p>
              </dd>
            </td>
            <td>
              <dt>Company Roles</dt>
              <dd>
                <label class="adb-selector adb-js-checkbox" for="billing-admin">
                  <span class="adb-selector--input">
                    <input checked id="billing-admin" type="checkbox">
                  </span>
                  <span class="adb-selector--value">
                    Billing Admin
                  </span>
                </label>
                <label class="adb-selector adb-js-checkbox" for="system-admin">
                  <span class="adb-selector--input">
                    <input checked id="system-admin" type="checkbox">
                  </span>
                  <span class="adb-selector--value">
                    System Admin
                  </span>
                </label>
              </dd>
              <dt>Product Roles</dt>
              <dd>
                <label class="adb-selector adb-js-checkbox" for="tester">
                  <span class="adb-selector--input">
                    <input checked id="tester" type="checkbox">
                  </span>
                  <span class="adb-selector--value">
                    Tester
                  </span>
                </label>
              </dd>
            </td>
            <td>
              <dt>Marketplace Roles</dt>
              <dd>
                <label class="adb-selector adb-js-checkbox" for="product-support">
                  <span class="adb-selector--input">
                    <input checked id="product-support" type="checkbox">
                  </span>
                  <span class="adb-selector--value">
                    Product Support
                  </span>
                </label>
                <label class="adb-selector adb-js-checkbox" for="sales-support">
                  <span class="adb-selector--input">
                    <input checked id="sales-support" type="checkbox">
                  </span>
                  <span class="adb-selector--value">
                    Sales Support
                  </span>
                </label>
                <label class="adb-selector adb-js-checkbox" for="support">
                  <span class="adb-selector--input">
                    <input checked id="support" type="checkbox">
                  </span>
                  <span class="adb-selector--value">
                    Support
                  </span>
                </label>
                <label class="adb-selector adb-js-checkbox" for="admin">
                  <span class="adb-selector--input">
                    <input checked id="admin" type="checkbox">
                  </span>
                  <span class="adb-selector--value">
                    Admin
                  </span>
                </label>
              </dd>
            </td>
          </tr>
        </tbody>
      </table>
    </dl>
  </div>
</div>

Editable Attributes

Company ID:
153011
Created:
03/29/2013
Company Access:
Marketplace Admin
Edit
Company Access
Default User Role:
Vendor
Edit
Default User Role
Domain:
sample-domain.com Verified
Tax Rate:
10%
Edit
Tax Rate
%
Email:
eliseraynor@hotmail.com
User ID:
153011
Created:
08/26/2013
Company:
Sample Company
Company Roles:
System Admin
Edit
Company Roles
Product Roles:
Tester
Edit
Product Roles
Marketplace Roles:
Product Support, Sales Support
Edit
Company Roles
<div class="adb-container">
  <div class="adb-slat">
    <dl class="adb-description_table">
      <table>
        <colgroup>
          <col width="33.33%">
          <col width="33.33%">
          <col width="33.33%">
        </colgroup>
        <tbody>
          <tr>
            <td>
              <div class="adb-description_line">
                <dt>Company ID:</dt>
                <dd>153011</dd>
              </div>
              <div class="adb-description_line">
                <dt>Created:</dt>
                <dd>03/29/2013</dd>
              </div>
            </td>
            <td>
              <div class="adb-description_line">
                <dt>Company Access:</dt>
                <dd>Marketplace Admin</dd>
                <a class="adb-link adb-link__action" data-event="click" data-toggle="dialog" href="#">
                  Edit
                </a>
                <form action="" class="adb-tooltip_form adb-js-dialog">
                  <fieldset class="adb-tooltip_form--fieldset">
                    <div class="adb-tooltip_form--legend">
                      <legend>Company Access</legend>
                    </div>
                    <div class="adb-tooltip_form--field">
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="company-option17">
                        <span class="adb-selector--input">
                          <input id="company-option17" name="company-access" type="checkbox">
                        </span>
                        <span class="adb-selector--value">
                          Vendor on Marketplace
                        </span>
                      </label>
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="company-option18">
                        <span class="adb-selector--input">
                          <input checked id="company-option18" name="company-access" type="checkbox">
                        </span>
                        <span class="adb-selector--value">
                          Marketplace Admin
                        </span>
                      </label>
                    </div>
                  </fieldset>
                  <menu class="adb-toolbar">
                    <button class="adb-button__primary adb-toolbar--item" type="submit">
                      Save
                    </button>
                    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
                      Cancel
                    </button>
                  </menu>
                </form>
              </div>
              <div class="adb-description_line">
                <dt>Default User Role:</dt>
                <dd>Vendor</dd>
                <a class="adb-link adb-link__action" data-event="click" data-toggle="dialog" href="#">
                  Edit
                </a>
                <form action="" class="adb-tooltip_form adb-js-dialog">
                  <fieldset class="adb-tooltip_form--fieldset">
                    <div class="adb-tooltip_form--legend">
                      <legend>Default User Role</legend>
                    </div>
                    <div class="adb-tooltip_form--field">
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="company-option15">
                        <span class="adb-selector--input">
                          <input id="company-option15" name="company-user-role" type="radio">
                        </span>
                        <span class="adb-selector--value">
                          User
                        </span>
                      </label>
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="company-option16">
                        <span class="adb-selector--input">
                          <input checked id="company-option16" name="company-user-role" type="radio">
                        </span>
                        <span class="adb-selector--value">
                          Vendor
                        </span>
                      </label>
                    </div>
                  </fieldset>
                  <menu class="adb-toolbar">
                    <button class="adb-button__primary adb-toolbar--item" type="submit">
                      Save
                    </button>
                    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
                      Cancel
                    </button>
                  </menu>
                </form>
              </div>
            </td>
            <td>
              <div class="adb-description_line">
                <dt>Domain:</dt>
                <dd>
                  <a>
                    sample-domain.com
                  </a>
                  <span class="adb-badge adb-badge__success">
                    Verified
                  </span>
                </dd>
              </div>
              <div class="adb-description_line">
                <dt>Tax Rate:</dt>
                <dd>10%</dd>
                <a class="adb-link adb-link__action" data-event="click" data-toggle="dialog" href="#">
                  Edit
                </a>
                <form action="" class="adb-tooltip_form adb-js-dialog">
                  <fieldset class="adb-tooltip_form--fieldset">
                    <div class="adb-tooltip_form--legend">
                      <legend>Tax Rate</legend>
                    </div>
                    <div class="adb-tooltip_form--field">
                      <input max="100" min="0" type="number" value="10">
                      <span class="adb-affix">%</span>
                    </div>
                  </fieldset>
                  <menu class="adb-toolbar">
                    <button class="adb-button__primary adb-toolbar--item" type="submit">
                      Save
                    </button>
                    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
                      Cancel
                    </button>
                  </menu>
                </form>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </dl>
  </div>
  <div class="adb-slat">
    <dl class="adb-description_table">
      <table>
        <colgroup>
          <col width="33.33%">
          <col width="33.33%">
          <col width="33.33%">
        </colgroup>
        <tbody>
          <tr>
            <td>
              <div class="adb-description_line">
                <dt>Email:</dt>
                <dd>
                  <a href="#">johnnywoodard@email.com</a>
                </dd>
              </div>
              <div class="adb-description_line">
                <dt>User ID:</dt>
                <dd>153011</dd>
              </div>
              <div class="adb-description_line">
                <dt>Created:</dt>
                <dd>08/26/2013</dd>
              </div>
            </td>
            <td>
              <div class="adb-description_line">
                <dt>Company:</dt>
                <dd>
                  <a href="../../prototype/channel/marketplace/company_detail.html">Sample Company</a>
                </dd>
              </div>
              <div class="adb-description_line">
                <dt>Company Roles:</dt>
                <dd>System Admin</dd>
                <a class="adb-link adb-link__action" data-event="click" data-toggle="dialog" href="#">
                  Edit
                </a>
                <form action="" class="adb-tooltip_form adb-js-dialog">
                  <fieldset class="adb-tooltip_form--fieldset">
                    <div class="adb-tooltip_form--legend">
                      <legend>Company Roles</legend>
                    </div>
                    <div class="adb-tooltip_form--field">
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="user-option7">
                        <span class="adb-selector--input">
                          <input id="user-option7" name="user-company-roles" type="checkbox">
                        </span>
                        <span class="adb-selector--value">
                          Billing
                        </span>
                      </label>
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="user-option8">
                        <span class="adb-selector--input">
                          <input checked id="user-option8" name="user-company-roles" type="checkbox">
                        </span>
                        <span class="adb-selector--value">
                          System Admin
                        </span>
                      </label>
                    </div>
                  </fieldset>
                  <menu class="adb-toolbar">
                    <button class="adb-button__primary adb-toolbar--item" type="submit">
                      Save
                    </button>
                    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
                      Cancel
                    </button>
                  </menu>
                </form>
              </div>
            </td>
            <td>
              <div class="adb-description_line">
                <dt>Product Roles:</dt>
                <dd>Tester</dd>
                <a class="adb-link adb-link__action" data-event="click" data-toggle="dialog" href="#">
                  Edit
                </a>
                <form action="" class="adb-tooltip_form adb-js-dialog">
                  <fieldset class="adb-tooltip_form--fieldset">
                    <div class="adb-tooltip_form--legend">
                      <legend>Product Roles</legend>
                    </div>
                    <div class="adb-tooltip_form--field">
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="user-option9">
                        <span class="adb-selector--input">
                          <input checked id="user-option9" name="user-product-roles" type="checkbox">
                        </span>
                        <span class="adb-selector--value">
                          Tester
                        </span>
                      </label>
                    </div>
                  </fieldset>
                  <menu class="adb-toolbar">
                    <button class="adb-button__primary adb-toolbar--item" type="submit">
                      Save
                    </button>
                    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
                      Cancel
                    </button>
                  </menu>
                </form>
              </div>
              <div class="adb-description_line">
                <dt>Marketplace Roles:</dt>
                <dd>Product Support, Sales Support</dd>
                <a class="adb-link adb-link__action" data-event="click" data-toggle="dialog" href="#">
                  Edit
                </a>
                <form action="" class="adb-tooltip_form adb-js-dialog">
                  <fieldset class="adb-tooltip_form--fieldset">
                    <div class="adb-tooltip_form--legend">
                      <legend>Company Roles</legend>
                    </div>
                    <div class="adb-tooltip_form--field">
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="user-option10">
                        <span class="adb-selector--input">
                          <input checked id="user-option10" name="user-channel-roles" type="checkbox">
                        </span>
                        <span class="adb-selector--value">
                          Product Support
                        </span>
                      </label>
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="user-option11">
                        <span class="adb-selector--input">
                          <input checked id="user-option11" name="user-channel-roles" type="checkbox">
                        </span>
                        <span class="adb-selector--value">
                          Sales Support
                        </span>
                      </label>
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="user-option12">
                        <span class="adb-selector--input">
                          <input id="user-option12" name="user-channel-roles" type="checkbox">
                        </span>
                        <span class="adb-selector--value">
                          Support
                        </span>
                      </label>
                      <label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="user-option13">
                        <span class="adb-selector--input">
                          <input id="user-option13" name="user-channel-roles" type="checkbox">
                        </span>
                        <span class="adb-selector--value">
                          Admin
                        </span>
                      </label>
                    </div>
                  </fieldset>
                  <menu class="adb-toolbar">
                    <button class="adb-button__primary adb-toolbar--item" type="submit">
                      Save
                    </button>
                    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
                      Cancel
                    </button>
                  </menu>
                </form>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </dl>
  </div>
</div>

Nested Slats

SendGrid

Active
  • Assign Users
  • View Payment History
  • Request Access
Edition:
Gold Edition
Monthly Fee:
$199.99
Owner:
Moses Desai
Access Rights:
View, Manage
Usage:
Unlimited

Wordpress

Free Trial
  • Assign Users
  • View Payment History
  • Request Access
Edition:
Free Trial Edition
Monthly Fee:
$199.99
Owner:
Davion Wallace
Access Rights:
View
Usage:
20 out of 25 users

80%
<div class="adb-container">
  <div class="adb-slat">
    <div class="adb-slat--row">
      <div class="adb-slat--image adb-slat--column">
                <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-72x72.png?1625765173" />
        </a>

      </div>
      <div class="adb-slat--content adb-slat--column adb-summary">
        <h3 class="adb-summary--title">
                    <a data-truncate="line" href="../../prototype/account/product.html">SendGrid
          </a>

        </h3>
        <div class="adb-summary--details">
          <span class="adb-status adb-status__active">
            <span class="adb-status--gem"></span>
            Active
          </span>
        </div>
      </div>
      <menu class="adb-slat--toolbar adb-toolbar adb-slat--column">
        <button class="adb-button__emphasis adb-toolbar--item" type="button">
          Upgrade Edition
        </button>
        <menu class="adb-js-context_menu adb-context_menu adb-toolbar--item" data-placement="right">
          <button class="adb-js-context_menu--trigger adb-context_menu--trigger" type="button">
            Manage
          </button>
          <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
            <ul class="adb-stack">
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Users
                </a>

              </li>
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/product.html">View Payment History
                </a>

              </li>
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="/">Request Access
                </a>

              </li>
            </ul>
          </div>
        </menu>
      </menu>
    </div>
    <div class="adb-slat--row">
      <dl class="adb-description_table">
        <table>
          <colgroup>
            <col width="33.33%">
            <col width="33.33%">
            <col width="33.33%">
          </colgroup>
          <tbody>
            <tr>
              <td>
                <div class="adb-description_line">
                  <dt>Edition:</dt>
                  <dd>Gold Edition</dd>
                </div>
                <div class="adb-description_line">
                  <dt>Monthly Fee:</dt>
                  <dd>
                    <a href="#">$199.99</a>
                  </dd>
                </div>
              </td>
              <td>
                <div class="adb-description_line">
                  <dt>Owner:</dt>
                  <dd>
                    <a>
                      Penny Lawrence
                    </a>
                  </dd>
                </div>
                <div class="adb-description_line">
                  <dt>Access Rights:</dt>
                  <dd>View, Manage</dd>
                </div>
              </td>
              <td>
                <div class="adb-description_line">
                  <dt>Usage:</dt>
                  <dd>Unlimited</dd>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </dl>
    </div>
  </div>
  <div class="adb-slat">
    <div class="adb-slat--row">
      <div class="adb-slat--image adb-slat--column">
                <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-72x72.png?1625765173" />
        </a>

      </div>
      <div class="adb-slat--content adb-slat--column adb-summary">
        <h3 class="adb-summary--title">
                    <a data-truncate="line" href="../../prototype/account/product.html">Wordpress
          </a>

        </h3>
        <div class="adb-summary--details">
          <span class="adb-status adb-status__active">
            <span class="adb-status--gem"></span>
            Free Trial
          </span>
        </div>
      </div>
      <menu class="adb-slat--toolbar adb-toolbar adb-slat--column">
        <button class="adb-button__emphasis adb-toolbar--item" type="button">
          Upgrade Edition
        </button>
        <menu class="adb-js-context_menu adb-context_menu adb-toolbar--item" data-placement="right">
          <button class="adb-js-context_menu--trigger adb-context_menu--trigger" type="button">
            Manage
          </button>
          <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
            <ul class="adb-stack">
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Users
                </a>

              </li>
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/product.html">View Payment History
                </a>

              </li>
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="/">Request Access
                </a>

              </li>
            </ul>
          </div>
        </menu>
      </menu>
    </div>
    <div class="adb-slat--row">
      <dl class="adb-description_table">
        <table>
          <colgroup>
            <col width="33.33%">
            <col width="33.33%">
            <col width="33.33%">
          </colgroup>
          <tbody>
            <tr>
              <td>
                <div class="adb-description_line">
                  <dt>Edition:</dt>
                  <dd>Free Trial Edition</dd>
                </div>
                <div class="adb-description_line">
                  <dt>Monthly Fee:</dt>
                  <dd>
                    <a href="#">$199.99</a>
                  </dd>
                </div>
              </td>
              <td>
                <div class="adb-description_line">
                  <dt>Owner:</dt>
                  <dd>
                    <a>
                      Mohammed Griffin
                    </a>
                  </dd>
                </div>
                <div class="adb-description_line">
                  <dt>Access Rights:</dt>
                  <dd>View</dd>
                </div>
              </td>
              <td>
                <div class="adb-description_line">
                  <dt>Usage:</dt>
                  <dd>20 out of 25 users</dd>
                  <br>
                  <div class="adb-js-meter adb-meter" data-percent="80" data-toggle="tooltip" title="You can assign 5 more users">
                    <span class="adb-meter--percent">80%</span>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </dl>
    </div>
  </div>
</div>

SendGrid

Expired
  • Assign Users
  • View Payment History
  • Request Access
Edition:
Gold Edition
Monthly Fee:
$199.99
Owner:
Harvey Dougherty
Access Rights:
View, Manage
Usage:
Unlimited

Your subscription to this product has expired. Renew your subscription.

Wordpress

Pending
  • Assign Users
  • View Payment History
  • Request Access
Edition:
Free Trial Edition
Monthly Fee:
$199.99
Owner:
Sheryl Powers
Access Rights:
View
Usage:
20 out of 25 users

80%

Your cancel request for this product is in process. Once the process is complete, this product will be removed.

<div class="adb-container">
  <div class="adb-slat adb-is-disabled">
    <div class="adb-slat--row">
      <div class="adb-slat--image adb-slat--column">
                <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-72x72.png?1625765173" />
        </a>

      </div>
      <div class="adb-slat--content adb-slat--column adb-summary">
        <h3 class="adb-summary--title">
                    <a data-truncate="line" href="../../prototype/account/product.html">SendGrid
          </a>

        </h3>
        <div class="adb-summary--details">
          <span class="adb-status adb-status__error">
            <span class="adb-status--gem"></span>
            Expired
          </span>
        </div>
      </div>
      <menu class="adb-slat--toolbar adb-toolbar adb-slat--column">
        <button class="adb-button__emphasis adb-toolbar--item" type="button">
          Upgrade Edition
        </button>
        <menu class="adb-js-context_menu adb-context_menu adb-toolbar--item" data-placement="right">
          <button class="adb-js-context_menu--trigger adb-context_menu--trigger" type="button">
            Manage
          </button>
          <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
            <ul class="adb-stack">
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Users
                </a>

              </li>
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/product.html">View Payment History
                </a>

              </li>
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="/">Request Access
                </a>

              </li>
            </ul>
          </div>
        </menu>
      </menu>
    </div>
    <div class="adb-slat--row">
      <dl class="adb-description_table">
        <table>
          <colgroup>
            <col width="33.33%">
            <col width="33.33%">
            <col width="33.33%">
          </colgroup>
          <tbody>
            <tr>
              <td>
                <div class="adb-description_line">
                  <dt>Edition:</dt>
                  <dd>Gold Edition</dd>
                </div>
                <div class="adb-description_line">
                  <dt>Monthly Fee:</dt>
                  <dd>
                    <a href="#">$199.99</a>
                  </dd>
                </div>
              </td>
              <td>
                <div class="adb-description_line">
                  <dt>Owner:</dt>
                  <dd>
                    <a>
                      Hudson May
                    </a>
                  </dd>
                </div>
                <div class="adb-description_line">
                  <dt>Access Rights:</dt>
                  <dd>View, Manage</dd>
                </div>
              </td>
              <td>
                <div class="adb-description_line">
                  <dt>Usage:</dt>
                  <dd>Unlimited</dd>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </dl>
    </div>
    <div class="adb-local_alert adb-local_alert__error adb-slat--alert">
      <div class="adb-local_alert--content">
        <p>
          Your subscription to this product has expired.
          <a class="adb-local_alert--link">Renew your subscription.</a>
        </p>
      </div>
    </div>
  </div>
  <div class="adb-slat adb-is-disabled">
    <div class="adb-slat--row">
      <div class="adb-slat--image adb-slat--column">
                <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-72x72.png?1625765173" />
        </a>

      </div>
      <div class="adb-slat--content adb-slat--column adb-summary">
        <h3 class="adb-summary--title">
                    <a data-truncate="line" href="../../prototype/account/product.html">Wordpress
          </a>

        </h3>
        <div class="adb-summary--details">
          <span class="adb-status adb-status__pending">
            <span class="adb-status--gem"></span>
            Pending
          </span>
        </div>
      </div>
      <menu class="adb-slat--toolbar adb-toolbar adb-slat--column">
        <button class="adb-button__emphasis adb-toolbar--item" type="button">
          Upgrade Edition
        </button>
        <menu class="adb-js-context_menu adb-context_menu adb-toolbar--item" data-placement="right">
          <button class="adb-js-context_menu--trigger adb-context_menu--trigger" type="button">
            Manage
          </button>
          <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
            <ul class="adb-stack">
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/assign.html">Assign Users
                </a>

              </li>
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/product.html">View Payment History
                </a>

              </li>
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="/">Request Access
                </a>

              </li>
            </ul>
          </div>
        </menu>
      </menu>
    </div>
    <div class="adb-slat--row">
      <dl class="adb-description_table">
        <table>
          <colgroup>
            <col width="33.33%">
            <col width="33.33%">
            <col width="33.33%">
          </colgroup>
          <tbody>
            <tr>
              <td>
                <div class="adb-description_line">
                  <dt>Edition:</dt>
                  <dd>Free Trial Edition</dd>
                </div>
                <div class="adb-description_line">
                  <dt>Monthly Fee:</dt>
                  <dd>
                    <a href="#">$199.99</a>
                  </dd>
                </div>
              </td>
              <td>
                <div class="adb-description_line">
                  <dt>Owner:</dt>
                  <dd>
                    <a>
                      Brendan Steele
                    </a>
                  </dd>
                </div>
                <div class="adb-description_line">
                  <dt>Access Rights:</dt>
                  <dd>View</dd>
                </div>
              </td>
              <td>
                <div class="adb-description_line">
                  <dt>Usage:</dt>
                  <dd>20 out of 25 users</dd>
                  <br>
                  <div class="adb-js-meter adb-meter" data-percent="80" data-toggle="tooltip" title="You can assign 5 more users">
                    <span class="adb-meter--percent">80%</span>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </dl>
    </div>
    <div class="adb-local_alert adb-local_alert__pending adb-slat--alert">
      <div class="adb-local_alert--content">
        <p>
          Your cancel request for this product is in process. Once the process is complete, this product will be removed.
        </p>
      </div>
    </div>
  </div>
</div>

Complex Slats

3 Reviews

ACME is Great  Featured

Nulla pariatur at vero eos. et accusamus officiis debitis aut. rerum necessitatibus saepe eveniet ut. et voluptates repudiandae sint et. molestiae non recusandae itaque earum

by Nathan Romero on June 24, 2013

Show 2 Comments  ·  Comment  ·  Edit  ·  Delete

Comment on Review

Rerum hic tenetur a sapiente. delectus ut aut reiciendis voluptatibus. maiores doloribus asperiores repellat repellat. alias consequatur aut perferendis sit. voluptatem accusantium doloremque aperiam eaque

by Nathan Romero on June 24, 2013  ·  Delete

Ipsa quae ab illo inventore. veritatis et quasi architecto beatae. vitae dicta sunt explicabo aspernatur. aut odit aut fugit sed. quia consequuntur magni dolores eos

by Nathan Romero on June 24, 2013

 

ACME is Not Great

Qui ratione voluptatem sequi nesciunt. neque dolorem ipsum quia dolor. sit amet consectetur adipisci velit. sed quia non numquam eius. modi tempora incidunt ut labore

by Ryan Boye on July 20, 2012

Show 1 Comment  ·  Comment

 

ACME is Okay

Et dolore magnam aliquam quaerat. voluptatem ut enim ad minima. veniam quis nostrum exercitationem ullam. corporis nemo enim ipsam voluptatem. quia voluptas sit suscipit laboriosam

by Bernhard Schmidt on July 20, 2012

Comment

 

<h2>3 Reviews</h2>
<section class="adb-container">
  <div class="adb-slat">
    <div class="adb-slat--image adb-slat--column">
      <div class="adb-id adb-id__linked adb-id__sq_medium">
        <i class="adb-id--placeholder adb-icon__user"></i>
      </div>
    </div>
    <div class="adb-slat--content adb-slat--column">
      <h3>
        ACME is Great&nbsp;
        <span class="adb-badge adb-badge__promo">
          Featured
        </span>
      </h3>
      <div class="adb-hide-medium-up">
        <div class="adb-rating adb-rating__small">
          <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 class="adb-show-medium-up">
        <div class="adb-rating adb-rating__xlarge">
          <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>
      <p>
        Nisi ut aliquid ex ea. commodi consequatur quis autem vel. eum iure reprehenderit qui in. ea voluptate velit esse quam. nihil molestiae et iusto odio
      </p>
      <p class="adb-caption">
        by Nathan Romero on June 24, 2013
      </p>
      <p class="adb-caption">
        <a data-target="#review-comments" data-toggle="panel">Show 2 Comments</a>
        &nbsp;·&nbsp;
        <a data-target="#review-comment" data-toggle="panel">Comment</a>
        &nbsp;·&nbsp;
        <a>Edit</a>
        &nbsp;·&nbsp;
        <a>Delete</a>
      </p>
      <form action="" class="adb-form adb-form__comment adb-js-panel-target" id="review-comment">
        <fieldset>
          <h4>
            <legend>Comment on Review</legend>
          </h4>
          <div class="adb-form--field">
            <textarea id="review-comment-content" maxlength="2048" placeholder="Write your comments here."></textarea>
          </div>
          <menu class="adb-toolbar">
            <button class="adb-button__primary adb-toolbar--item" type="submit">
              Submit Comment
            </button>
            <button class="adb-button__secret adb-toolbar--item" data-dismiss="modal" type="button">
              Cancel
            </button>
          </menu>
        </fieldset>
      </form>
      <div class="adb-js-panel-target adb-slats" id="review-comments">
        <div class="adb-slat">
          <div class="adb-slat--image adb-slat--column">
            <div class="adb-id adb-id__sq_medium">
              <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png?1625765173" />
            </div>
          </div>
          <div class="adb-slat--content adb-slat--column">
            <p>
              Dignissimos ducimus qui blanditiis praesentium. laudantium totam rem voluptatum deleniti. atque corrupti quos dolores et. quas molestias excepturi sint occaecati. cupiditate non provident sed ut
            </p>
            <p class="adb-caption">
              by Nathan Romero on June 24, 2013
              &nbsp;·&nbsp;
              <a>Delete</a>
            </p>
          </div>
        </div>
        <div class="adb-slat">
          <div class="adb-slat--image adb-slat--column">
            <div class="adb-id adb-id__sq_medium">
              <i class="adb-id--placeholder adb-icon__user"></i>
            </div>
          </div>
          <div class="adb-slat--content adb-slat--column">
            <p>
              Perspiciatis unde omnis iste natus. error similique sunt in culpa. qui officia deserunt mollitia animi. id est laborum et dolorum. fuga et harum quidem rerum
            </p>
            <p class="adb-subtitle">
              by Nathan Romero on June 24, 2013
            </p>
          </div>
        </div>
      </div>
    </div>
    <menu class="adb-slat--toolbar adb-slat--column adb-hide-medium-up">
      <p>&nbsp;</p>
    </menu>
  </div>
  <div class="adb-slat">
    <div class="adb-slat--image adb-slat--column">
      <div class="adb-id adb-id__linked adb-id__sq_medium">
        <i class="adb-id--placeholder adb-icon__user"></i>
      </div>
    </div>
    <div class="adb-slat--content adb-slat--column">
      <h3>
        ACME is Not Great
      </h3>
      <div class="adb-hide-medium-up">
        <div class="adb-rating adb-rating__small">
          <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 class="adb-show-medium-up">
        <div class="adb-rating adb-rating__xlarge">
          <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>
      <p>
        Facilis est et expedita distinctio. nam libero tempore cum soluta. nobis est eligendi optio cumque. nihil impedit quo porro quisquam. est qui minus id quod
      </p>
      <p class="adb-caption">
        by Ryan Boye on July 20, 2012
      </p>
      <p class="adb-caption">
        <a>Show 1 Comment</a>
        &nbsp;·&nbsp;
        <a>Comment</a>
      </p>
    </div>
    <menu class="adb-slat--toolbar adb-slat--column adb-hide-medium-up">
      &nbsp;
    </menu>
  </div>
  <div class="adb-slat">
    <div class="adb-slat--image adb-slat--column">
      <div class="adb-id adb-id__linked adb-id__sq_medium">
        <i class="adb-id--placeholder adb-icon__user"></i>
      </div>
    </div>
    <div class="adb-slat--content adb-slat--column">
      <h3>
        ACME is Okay
      </h3>
      <div class="adb-hide-medium-up">
        <div class="adb-rating adb-rating__small">
          <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 class="adb-show-medium-up">
        <div class="adb-rating adb-rating__xlarge">
          <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>
      <p>
        Maxime placeat facere possimus omnis. voluptas assumenda est omnis dolor. repellendus temporibus autem quibusdam et. aut consequatur vel illum qui. dolorem eum fugiat quo voluptas
      </p>
      <p class="adb-caption">
        by Bernhard Schmidt on July 20, 2012
      </p>
      <p class="adb-caption">
        <a>Comment</a>
      </p>
    </div>
    <menu class="adb-slat--toolbar adb-slat--column adb-hide-medium-up">
      <p>&nbsp;</p>
    </menu>
  </div>
</section>

Complex Slats with Pricing

Mailchimp

Send Better Email

More than 4 million people use MailChimp to create, send, and track email newsletters. Whether you're self-employed, you manage projects for clients, or you work for a Fortune 500 company, MailChimp has features and integrations that will suit your email-marketing needs. … Learn More

Free

View Profile

Yendo

Accounting & CRM for small business

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 … Learn More

Free
+ Premium Plans

View Profile

Cakemail   Discounted

Email Marketing Made Simple.

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

$9.99

View Profile

Wordpress   Free Trial

Software for blogs and websites

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 … Learn More

$99.99
/ mo

View Profile

Chownow   Coming Soon

The online ordering system for restaurants

Custom Mobile Apps | Facebook Ordering | Website Ordering Widgets Learn More

$999.99
/ User / yr

View Profile

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 double-digit … Learn More

Starts at
$9.99

View Profile

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 … Learn More

Starts at
$99.99
/ mo

View Profile

Symantec Endpoint Protection Small Business Edition 2013   Free Trial

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

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 … Learn More

Starts at
$999.99
/ yr

View Profile

FreeAgent   Free Trial

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 … Learn More

Available via Partner

View Profile

Sendgrid   Discounted

Email Delivery. Simplified.

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

Available via Partner

View Profile
<div class="adb-slat">
  <div class="adb-slat--image adb-slat--column">
    <p>
            <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_xlarge" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/mailchimp-120x120.png?1625765172" />
      </a>

    </p>
    <div class="adb-rating adb-rating__small">
      <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 class="adb-slat--content adb-slat--column">
    <h3>
            <a href="../../prototype/marketplace/product.html">Mailchimp
      </a>

    </h3>
    <h4 class="adb-title__small">Send Better Email</h4>
    <p>
      More than 4 million people use MailChimp to create, send, and track email newsletters. Whether you're self-employed, you manage projects for clients, or you work for a Fortune 500 company, MailChimp has features and integrations that will suit your email-marketing needs.
      &hellip;
            <a class="more" href="../../prototype/marketplace/product.html">Learn More
      </a>

    </p>
  </div>
  <menu class="adb-slat--toolbar adb-slat--column">
    <div class="adb-label adb-price--container">
      <p class="adb-price">
        <span class="adb-price--value">Free</span>
      </p>
      <div class="adb-show-small-up">
                <a class="adb-button adb-button__medium adb-button__full_width adb-button__primary" href="../../prototype/marketplace/product.html">View Profile
        </a>

      </div>
    </div>
    <div class="adb-show-medium-up">
      <label class="adb-selector adb-selector__button adb-button__neutral adb-button adb-button__small adb-js-checkbox adb-js-compare" 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>
  </menu>
</div>
<div class="adb-slat">
  <div class="adb-slat--image adb-slat--column">
    <p>
            <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_xlarge" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/yendo-120x120.png?1625765172" />
      </a>

    </p>
    <div class="adb-rating adb-rating__small">
      <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 class="adb-slat--content adb-slat--column">
    <h3>
            <a href="../../prototype/marketplace/product.html">Yendo
      </a>

    </h3>
    <h4 class="adb-title__small">Accounting & CRM for small business</h4>
    <p>
      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
      &hellip;
            <a class="more" href="../../prototype/marketplace/product.html">Learn More
      </a>

    </p>
  </div>
  <menu class="adb-slat--toolbar adb-slat--column">
    <div class="adb-label adb-price--container">
      <p class="adb-price">
        <span class="adb-price--value">Free</span>
        <br>
        <a>+ Premium Plans</a>
      </p>
      <div class="adb-show-small-up">
                <a class="adb-button adb-button__medium adb-button__full_width adb-button__primary" href="../../prototype/marketplace/product.html">View Profile
        </a>

      </div>
    </div>
    <div class="adb-show-medium-up">
      <label class="adb-selector adb-selector__button adb-button__neutral adb-button adb-button__small adb-js-checkbox adb-js-compare" 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>
  </menu>
</div>
<div class="adb-slat">
  <div class="adb-slat--image adb-slat--column">
    <p>
            <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_xlarge" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/cakemail-120x120.png?1625765172" />
      </a>

    </p>
    <div class="adb-rating adb-rating__small">
      <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 class="adb-slat--content adb-slat--column">
    <h3>
            <a class="adb-title--link" href="../../prototype/marketplace/product.html">Cakemail
      </a>

      &nbsp;
      <span class="adb-badge adb-badge__promo">Discounted</span>
    </h3>
    <h4 class="adb-title__small">Email Marketing Made Simple.</h4>
    <p>
      CakeMail makes it easy for business owners to keep in touch with existing customers or market to prospective clients.
      &hellip;
            <a class="more" href="../../prototype/marketplace/product.html">Learn More
      </a>

    </p>
  </div>
  <menu class="adb-slat--toolbar adb-slat--column">
    <div class="adb-label adb-price--container">
      <p class="adb-price">
        <span class="adb-price--value">$9.99</span>
      </p>
      <div class="adb-show-small-up">
                <a class="adb-button adb-button__medium adb-button__full_width adb-button__primary" href="../../prototype/marketplace/product.html">View Profile
        </a>

      </div>
    </div>
    <div class="adb-show-medium-up">
      <label class="adb-selector adb-selector__button adb-button__neutral adb-button adb-button__small adb-js-checkbox adb-js-compare" 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>
  </menu>
</div>
<div class="adb-slat">
  <div class="adb-slat--image adb-slat--column">
    <p>
            <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_xlarge" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/wordpress-120x120.png?1625765173" />
      </a>

    </p>
    <div class="adb-rating adb-rating__small" style="display: none; visibility: hidden;">
      <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 class="adb-slat--content adb-slat--column">
    <h3>
            <a class="adb-title--link" href="../../prototype/marketplace/product.html">Wordpress
      </a>

      &nbsp;
      <span class="adb-badge adb-badge__free">Free Trial</span>
    </h3>
    <h4 class="adb-title__small">Software for blogs and websites</h4>
    <p>
      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
      &hellip;
            <a class="more" href="../../prototype/marketplace/product.html">Learn More
      </a>

    </p>
  </div>
  <menu class="adb-slat--toolbar adb-slat--column">
    <div class="adb-label adb-price--container">
      <p class="adb-price">
        <span class="adb-price--value">$99.99</span>
        <br>
        <span class="adb-price--unit">/ mo</span>
      </p>
      <div class="adb-show-small-up">
                <a class="adb-button adb-button__medium adb-button__full_width adb-button__primary" href="../../prototype/marketplace/product.html">View Profile
        </a>

      </div>
    </div>
    <div class="adb-show-medium-up">
      <label class="adb-selector adb-selector__button adb-button__neutral adb-button adb-button__small adb-js-checkbox adb-js-compare" 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>
  </menu>
</div>
<div class="adb-slat">
  <div class="adb-slat--image adb-slat--column">
    <p>
            <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_xlarge" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/chownow-120x120.png?1625765172" />
      </a>

    </p>
    <div class="adb-rating adb-rating__small">
      <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 class="adb-slat--content adb-slat--column">
    <h3>
            <a class="adb-title--link" href="../../prototype/marketplace/product.html">Chownow
      </a>

      &nbsp;
      <span class="adb-badge adb-badge__soon">Coming Soon</span>
    </h3>
    <h4 class="adb-title__small">The online ordering system for restaurants</h4>
    <p>
      Custom Mobile Apps | Facebook Ordering | Website Ordering Widgets
            <a class="more" href="../../prototype/marketplace/product.html">Learn More
      </a>

    </p>
  </div>
  <menu class="adb-slat--toolbar adb-slat--column">
    <div class="adb-label adb-price--container">
      <p class="adb-price">
        <span class="adb-price--value">$999.99</span>
        <br>
        <span class="adb-price--unit">/ User / yr</span>
      </p>
      <div class="adb-show-small-up">
                <a class="adb-button adb-button__medium adb-button__full_width adb-button__primary" href="../../prototype/marketplace/product.html">View Profile
        </a>

      </div>
    </div>
    <div class="adb-show-medium-up">
      <label class="adb-selector adb-selector__button adb-button__neutral adb-button adb-button__small adb-js-checkbox adb-js-compare" 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>
  </menu>
</div>
<div class="adb-slat">
  <div class="adb-slat--image adb-slat--column">
    <p>
            <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_xlarge" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/urbanairship-120x120.png?1625765172" />
      </a>

    </p>
    <div class="adb-rating adb-rating__small">
      <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 class="adb-slat--content adb-slat--column">
    <h3>
            <a href="../../prototype/marketplace/product.html">Urban Airship
      </a>

    </h3>
    <h4 class="adb-title__small">Global Leader in Push Messaging</h4>
    <p>
      Use unparalleled customer insight—preferences, behaviors, current location and location history—to target mobile messaging that quadruples engagement, doubles retention and drives double-digit
      &hellip;
            <a class="more" href="../../prototype/marketplace/product.html">Learn More
      </a>

    </p>
  </div>
  <menu class="adb-slat--toolbar adb-slat--column">
    <div class="adb-label adb-price--container">
      <p class="adb-price">
        <span class="adb-caption">Starts at</span>
        <br>
        <span class="adb-price--value">$9.99</span>
      </p>
      <div class="adb-show-small-up">
                <a class="adb-button adb-button__medium adb-button__full_width adb-button__primary" href="../../prototype/marketplace/product.html">View Profile
        </a>

      </div>
    </div>
    <div class="adb-show-medium-up">
      <label class="adb-selector adb-selector__button adb-button__neutral adb-button adb-button__small adb-js-checkbox adb-js-compare" 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>
  </menu>
</div>
<div class="adb-slat">
  <div class="adb-slat--image adb-slat--column">
    <p>
            <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_xlarge" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/formstack-120x120.png?1625765173" />
      </a>

    </p>
    <div class="adb-rating adb-rating__small">
      <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 class="adb-slat--content adb-slat--column">
    <h3>
            <a href="../../prototype/marketplace/product.html">Formstack
      </a>

    </h3>
    <h4 class="adb-title__small">Customize, brand & launch an online form in seconds.</h4>
    <p>
      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
      &hellip;
            <a class="more" href="../../prototype/marketplace/product.html">Learn More
      </a>

    </p>
  </div>
  <menu class="adb-slat--toolbar adb-slat--column">
    <div class="adb-label adb-price--container">
      <p class="adb-price">
        <span class="adb-caption">Starts at</span>
        <br>
        <span class="adb-price--value">$99.99</span>
        <br>
        <span class="adb-price--unit">/ mo</span>
      </p>
      <div class="adb-show-small-up">
                <a class="adb-button adb-button__medium adb-button__full_width adb-button__primary" href="../../prototype/marketplace/product.html">View Profile
        </a>

      </div>
    </div>
    <div class="adb-show-medium-up">
      <label class="adb-selector adb-selector__button adb-button__neutral adb-button adb-button__small adb-js-checkbox adb-js-compare" 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>
  </menu>
</div>
<div class="adb-slat">
  <div class="adb-slat--image adb-slat--column">
    <p>
            <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_xlarge" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/symantec-120x120.png?1625765173" />
      </a>

    </p>
    <div class="adb-rating adb-rating__small">
      <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 class="adb-slat--content adb-slat--column">
    <h3>
            <a class="adb-title--link" href="../../prototype/marketplace/product.html">Symantec Endpoint Protection Small Business Edition 2013
      </a>

      &nbsp;
      <span class="adb-badge adb-badge__free">Free Trial</span>
    </h3>
    <h4 class="adb-title__small">Simple, fast cloud-managed protection against viruses and malware.</h4>
    <p>
      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
      &hellip;
            <a class="more" href="../../prototype/marketplace/product.html">Learn More
      </a>

    </p>
  </div>
  <menu class="adb-slat--toolbar adb-slat--column">
    <div class="adb-label adb-price--container">
      <p class="adb-price">
        <span class="adb-caption">Starts at</span>
        <br>
        <span class="adb-price--value">$999.99</span>
        <br>
        <span class="adb-price--unit">/ yr</span>
      </p>
      <div class="adb-show-small-up">
                <a class="adb-button adb-button__medium adb-button__full_width adb-button__primary" href="../../prototype/marketplace/product.html">View Profile
        </a>

      </div>
    </div>
    <div class="adb-show-medium-up">
      <label class="adb-selector adb-selector__button adb-button__neutral adb-button adb-button__small adb-js-checkbox adb-js-compare" 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>
  </menu>
</div>
<div class="adb-slat">
  <div class="adb-slat--image adb-slat--column">
    <p>
            <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_xlarge" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/freeagent-120x120.png?1625765173" />
      </a>

    </p>
    <div class="adb-rating adb-rating__small">
      <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 class="adb-slat--content adb-slat--column">
    <h3>
            <a class="adb-title--link" href="../../prototype/marketplace/product.html">FreeAgent
      </a>

      &nbsp;
      <span class="adb-badge adb-badge__free">Free Trial</span>
    </h3>
    <h4 class="adb-title__small">Small Business Accounting Software. Simplified.</h4>
    <p>
      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
      &hellip;
            <a class="more" href="../../prototype/marketplace/product.html">Learn More
      </a>

    </p>
  </div>
  <menu class="adb-slat--toolbar adb-slat--column">
    <div class="adb-label adb-price--container">
      <p class="adb-caption">Available via Partner</p>
      <div class="adb-show-small-up">
                <a class="adb-button adb-button__medium adb-button__full_width adb-button__primary" href="../../prototype/marketplace/product.html">View Profile
        </a>

      </div>
    </div>
    <div class="adb-show-medium-up">
      <label class="adb-selector adb-selector__button adb-button__neutral adb-button adb-button__small adb-js-checkbox adb-js-compare" 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>
  </menu>
</div>
<div class="adb-slat">
  <div class="adb-slat--image adb-slat--column">
    <p>
            <a class="adb-id adb-id__linked adb-id__logo adb-id__sq_xlarge" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/sendgrid-120x120.png?1625765173" />
      </a>

    </p>
    <div class="adb-rating adb-rating__small" style="display: none; visibility: hidden;">
      <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 class="adb-slat--content adb-slat--column">
    <h3>
            <a class="adb-title--link" href="../../prototype/marketplace/product.html">Sendgrid
      </a>

      &nbsp;
      <span class="adb-badge adb-badge__promo">Discounted</span>
    </h3>
    <h4 class="adb-title__small">Email Delivery. Simplified.</h4>
    <p>
      Sendgrid's cloud-based email infrastructure relieves businesses of the cost and complexity of maintaining email systems.
            <a class="more" href="../../prototype/marketplace/product.html">Learn More
      </a>

    </p>
  </div>
  <menu class="adb-slat--toolbar adb-slat--column">
    <div class="adb-label adb-price--container">
      <p class="adb-caption">Available via Partner</p>
      <div class="adb-show-small-up">
                <a class="adb-button adb-button__medium adb-button__full_width adb-button__primary" href="../../prototype/marketplace/product.html">View Profile
        </a>

      </div>
    </div>
    <div class="adb-show-medium-up">
      <label class="adb-selector adb-selector__button adb-button__neutral adb-button adb-button__small adb-js-checkbox adb-js-compare" 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>
  </menu>
</div>

Numbered Slats

1

Create Marketing Profile

Add images, marketing copy, and resources. A thorough profile sells.

65%
Edit
2

Create Editions and Pricing

At least one edition is required for users to buy your product.

100%
Edit
3

Create your Integration Report

Healthy endpoints make it possible for users to buy, cancel and upgrade.

45%
Edit
4

Add to Marketplaces

Select the marketplace where you'd like to sell your product.

Add to Marketplaces
<div class="adb-container">
  <div class="adb-slat adb-slat__actionable" data-url="/prototype/developer/editor/profile.html">
    <div class="adb-slat--column adb-slat--number">1</div>
    <div class="adb-slat--column adb-slat--content">
      <h3>Create Marketing Profile</h3>
      <p>Add images, marketing copy, and resources. A thorough profile sells.</p>
      <span class="adb-js-meter adb-meter" data-percent="65" data-title="65%" data-toggle="tooltip">
        <span class="adb-meter--percent"></span>
      </span>
      <span class="adb-affix">65%</span>
    </div>
    <div class="adb-slat--column adb-slat--actions">
            <a class="adb-button__neutral adb-button adb-button__medium" href="../../prototype/developer/editor/integration_report.html">Edit
      </a>

    </div>
  </div>
  <div class="adb-slat adb-slat__actionable" data-url="/prototype/developer/editor/add_edition.html">
    <div class="adb-slat--column adb-slat--number">2</div>
    <div class="adb-slat--column adb-slat--content">
      <h3>Create Editions and Pricing</h3>
      <p>At least one edition is required for users to buy your product.</p>
      <span class="adb-js-meter adb-meter" data-percent="100" data-placement="top" data-state="completed" data-title="Complete" data-toggle="tooltip">
        <span class="adb-meter--percent"></span>
      </span>
      <span class="adb-affix">100%</span>
    </div>
    <div class="adb-slat--column adb-slat--actions">
            <a class="adb-button__neutral adb-button adb-button__medium" href="../../prototype/developer/editor/integration_report.html">Edit
      </a>

    </div>
  </div>
  <div class="adb-slat adb-slat__actionable" data-url="/prototype/developer/editor/integration_report.html">
    <div class="adb-slat--column adb-slat--number">3</div>
    <div class="adb-slat--column adb-slat--content">
      <h3>Create your Integration Report</h3>
      <p>Healthy endpoints make it possible for users to buy, cancel and upgrade.</p>
      <span class="adb-js-meter adb-meter" data-percent="45" data-title="45%" data-toggle="tooltip">
        <span class="adb-meter--percent"></span>
      </span>
      <span class="adb-affix">45%</span>
    </div>
    <div class="adb-slat--column adb-slat--actions">
            <a class="adb-button__neutral adb-button adb-button__medium" href="../../prototype/developer/editor/integration_report.html">Edit
      </a>

    </div>
  </div>
  <div class="adb-slat adb-slat__actionable" data-url="/prototype/developer/editor/marketplaces.html">
    <div class="adb-slat--column adb-slat--number">4</div>
    <div class="adb-slat--column adb-slat--content">
      <h3>Add to Marketplaces</h3>
      <p>Select the marketplace where you'd like to sell your product.</p>
    </div>
    <div class="adb-slat--column adb-slat--actions">
            <a class="adb-button__secondary adb-button adb-button__medium" href="../../prototype/developer/editor/marketplaces.html">Add to Marketplaces
      </a>

    </div>
  </div>
</div>

Order Configuration Slats

Product Slats above an Order Configuration card.

Microsoft Office 365

Microsoft Office 365

Microsoft
Remove

Search everything, in one shot. Easily find youir emails, documents, meeting invites all in one place.

$12 / users / month
A minimum of 1 user license must be purchased
$10 / user / month
Setup fee   $20
<div class="adb-container__open">
  <div class="">
    <div class="adb-slat">
      <div class="adb-slat-container">
        <div class="adb-slat">
          <div class="adb-slat--image adb-slat--column" style="padding-left: 0px;">
            <div class="adb-hide-medium-up">
              <span class="adb-id adb-id__logo adb-id__sq_xsmall adb-id_group--item">
                <img class="adb-id--img" src="../../images/logos/apps/msoffice-72x72.png?1625765172" />
              </span>
            </div>
            <div class="adb-show-medium-up">
              <span class="adb-id adb-id__logo adb-id__sq_medium adb-id_group--item">
                <img class="adb-id--img" src="../../images/logos/apps/msoffice-72x72.png?1625765172" />
              </span>
            </div>
          </div>
          <div class="adb-slat--content adb-slat--column adb-slat--column--centered adb-summary">
            <div class="adb-hide-medium-up">
              <h4 class="adb-summary--title adb-title--secondary">
                Microsoft Office 365
              </h4>
            </div>
            <div class="adb-show-medium-up">
              <h1 class="adb-summary--title adb-title--secondary">
                Microsoft Office 365
              </h1>
            </div>
            <h6 class="adb-summary--details">
              Microsoft
            </h6>
          </div>
        </div>
      </div>
      <!-- // Remove Button or LInk -->
      <menu class="adb-slat--toolbar adb-slat--column adb-slat--column--centered">
        <div class="adb-price--container">
                    <a data-price="0" class="" href="">Remove
          </a>

        </div>
      </menu>
    </div>
    <div class="adb-slat adb-is-hidden">
      <div class="adb-slat--content adb-slat--column">
        <p>
          Search everything, in one shot. Easily find youir emails, documents, meeting invites all in one place.
        </p>
        <p>
        </p>
      </div>
      <menu class="adb-slat--toolbar adb-slat--column">
        <div class="adb-title__medium" style="font-weight: normal;">
          $12 / users / month
        </div>
      </menu>
    </div>
  </div>
  <div class=" adb-container adb-container__elevated ">
    <div class="adb-container_content  adb-is-active " id="microsoft-pricing">
      <form class="adb-form">
        <div class="adb-form--field">
          <label class="adb-label__inline" for="plan">
            <span class="adb-label__large">Plan &nbsp;</span>
            <a class="adb-button adb-button__medium adb-button__link" href="/prototype/marketplace/product.html">Show and compare plans</a>
          </label>
          <div class="adb-receipt--line">
            <div class="adb-receipt--item adb-receipt-dropdown">
              <div class="adb-js-dropdown adb-dropdown adb-dropdown__sized_xlarge adb-dropdown__full_width">
                <select id="microsoft-pricing--option-select">
                  <option data-url="">
                    Office 365 Enterprise E3
                  </option>
                  <option data-url="" selected>
                    Office 365 Enterprise E5
                  </option>
                  <option data-url="">
                    Office 365 Enterprise E8
                  </option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="adb-form--field adb-form-field--section adb-receipt--section__open">
          <div class="adb-form--field adb-receipt--section__open">
            <div class="adb-receipt--line">
              <div class="adb-receipt--item">
                <label class="adb-label__large" for="total_rooms">
                  Total Users
                </label>
                <input class="total_rooms adb-text__sized_xlarge" min="1" placeholder="1" type="number" value="1">
                <div class="adb-caption adb-form--caption">
                  A minimum of 1 user license must be purchased
                </div>
              </div>
              <div class="adb-receipt--item">
                <div class="adb-receipt--line">
                  <div class="adb-receipt--item adb-receipt--item__label adb-receipt--item__subheading">
                    <label class="adb-subtitle">
                      
                    </label>
                  </div>
                  <div class="adb-receipt--item">
                    $10 / user / month
                  </div>
                </div>
                <div class="adb-receipt--line">
                  <div class="adb-receipt--item"></div>
                  <div class="adb-receipt--item--inline">
                    <span class="adb-subtitle">
                      Setup fee
                      &nbsp;
                    </span>
                    $20
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

G Suite

G Suite

Google
Remove

Search everything, in one shot. Easily find youir emails, documents, meeting invites all in one place.

$12 / users / month
$150.00
/ month
Setup Fee  
$10
A minimum of 1 user license must be purchased
$10 / user / month
Setup fee   $20

  30 Day Free Trial

<div class="adb-container__open">
  <div class="">
    <div class="adb-slat">
      <div class="adb-slat-container">
        <div class="adb-slat">
          <div class="adb-slat--image adb-slat--column" style="padding-left: 0px;">
            <div class="adb-hide-medium-up">
              <span class="adb-id adb-id__logo adb-id__sq_xsmall adb-id_group--item">
                <img class="adb-id--img" src="../../images/logos/apps/googleapps-72x72.png?1625765172" />
              </span>
            </div>
            <div class="adb-show-medium-up">
              <span class="adb-id adb-id__logo adb-id__sq_medium adb-id_group--item">
                <img class="adb-id--img" src="../../images/logos/apps/googleapps-72x72.png?1625765172" />
              </span>
            </div>
          </div>
          <div class="adb-slat--content adb-slat--column adb-slat--column--centered adb-summary">
            <div class="adb-hide-medium-up">
              <h4 class="adb-summary--title adb-title--secondary">
                G Suite
              </h4>
            </div>
            <div class="adb-show-medium-up">
              <h1 class="adb-summary--title adb-title--secondary">
                G Suite
              </h1>
            </div>
            <h6 class="adb-summary--details">
              Google
            </h6>
          </div>
        </div>
      </div>
      <!-- // Remove Button or LInk -->
      <menu class="adb-slat--toolbar adb-slat--column adb-slat--column--centered">
        <div class="adb-price--container">
                    <a data-price="0" class="" href="">Remove
          </a>

        </div>
      </menu>
    </div>
    <div class="adb-slat adb-is-hidden">
      <div class="adb-slat--content adb-slat--column">
        <p>
          Search everything, in one shot. Easily find youir emails, documents, meeting invites all in one place.
        </p>
        <p>
        </p>
      </div>
      <menu class="adb-slat--toolbar adb-slat--column">
        <div class="adb-title__medium" style="font-weight: normal;">
          $12 / users / month
        </div>
      </menu>
    </div>
  </div>
  <div class=" adb-container adb-container__elevated ">
    <div class="adb-container_content  adb-is-active " id="microsoft-pricing">
      <form class="adb-form">
        <div class="adb-form--field">
          <label class="adb-label__inline" for="plan">
            <span class="adb-label__large">Plan &nbsp;</span>
            <a class="adb-button adb-button__medium adb-button__link" href="/prototype/marketplace/product.html">Show and compare plans</a>
          </label>
          <div class="adb-receipt--line">
            <div class="adb-receipt--item adb-receipt-dropdown">
              <div class="adb-js-dropdown adb-dropdown adb-dropdown__sized_xlarge adb-dropdown__full_width">
                <select id="microsoft-pricing--option-select">
                  <option data-url="">
                    Google Tier 1
                  </option>
                  <option data-url="" selected>
                    Google Tier 2
                  </option>
                  <option data-url="">
                    Google Tier 3
                  </option>
                </select>
              </div>
            </div>
            <div class="adb-receipt--item">
              <div class="adb-receipt--item__total">
                $150.00
              </div>
              <div class="adb-receipt--item__label">
                / month
              </div>
              <div class="adb-receipt--line">
                <div class="adb-receipt--item adb-receipt--item__label adb-subtitle">
                  Setup Fee
                  &nbsp;
                </div>
                <div class="adb-receipt--item">
                  $10
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="adb-form--field adb-form-field--section adb-receipt--section__open">
          <div class="adb-form--field adb-receipt--section__open">
            <div class="adb-receipt--line">
              <div class="adb-receipt--item">
                <label class="adb-label__large" for="total_rooms">
                  Total Users
                </label>
                <input class="total_rooms adb-text__sized_xlarge" min="1" placeholder="1" type="number" value="1">
                <div class="adb-caption adb-form--caption">
                  A minimum of 1 user license must be purchased
                </div>
              </div>
              <div class="adb-receipt--item">
                <div class="adb-receipt--line">
                  <div class="adb-receipt--item adb-receipt--item__label adb-receipt--item__subheading">
                    <label class="adb-subtitle">
                      
                    </label>
                  </div>
                  <div class="adb-receipt--item">
                    $10 / user / month
                  </div>
                </div>
                <div class="adb-receipt--line">
                  <div class="adb-receipt--item"></div>
                  <div class="adb-receipt--item--inline">
                    <span class="adb-subtitle">
                      Setup fee
                      &nbsp;
                    </span>
                    $20
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="adb-container_backgrounded__info">
      <div class="adb-container_content">
        <p>
          <i class="adb-icon__info"></i>
          <strong>
            &nbsp;
            30 Day Free Trial
          </strong>
        </p>
      </div>
    </div>
  </div>
</div>
  • Framework
  • Layout
  • Slats
  • Powered by AppDirect © 2022
  • Contact Support
  • Terms & Conditions
  • Privacy Policy
    • Contact Support
    • Terms & Conditions
    • Privacy Policy
Themes
    Assistant
    • Bonzi
    • Clippy
    • F1
    • Genie
    • Genius
    • Links
    • Merlin
    • Peedy
    • Rocky
    • Rover
    Hide
    4
    1366 × 768
    10.51%
    9
    1024 × 768
    4.02%
    3
    1280 × 800
    11.08%
    1
    1440 × 900
    16.09%
    7
    1600 × 900
    5.59%
    6
    1280 × 1024
    5.77%
    5
    1680 × 1050
    7.48%
    2
    1920 × 1080
    15.99%
    8
    1920 × 1200
    5.39%
    10
    2560 × 1440
    3.23%