• 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

Display

Communicate specialized information

Alerts & Messages
Tooltips
Badges
Status & Progress
Avatars & Logos
App Tiles
Numbers & Pricing

App Tiles

Default

States

<a class="adb-id adb-id__logo adb-id__sq_xlarge adb-id__launchable">
  <img class="adb-id--img" src="../../images/logos/apps/github.png?1625765172" />
</a>
<a class="adb-id adb-id__logo adb-id__sq_xlarge adb-id__launchable">
  <img class="adb-id--img" src="../../images/logos/apps/github.png?1625765172" />
</a>
<a class="adb-id adb-id__logo adb-id__sq_xlarge adb-id__launchable">
  <img class="adb-id--img" src="../../images/logos/apps/github.png?1625765172" />
</a>
<a class="adb-id adb-id__logo adb-id__sq_xlarge adb-id__launchable adb-is-disabled">
  <img class="adb-id--img" src="../../images/logos/apps/github.png?1625765172" />
</a>

Branded

States

<figure class="adb-id adb-id__logo adb-id__sq_xlarge adb-id__launchable adb-id__branded adb-id__ms_office">
  <img class="adb-id--img" src="../../images/logos/apps/msoffice-light-120x120.png?1625765172" />
</figure>
<figure class="adb-id adb-id__logo adb-id__sq_xlarge adb-id__launchable adb-id__branded adb-id__ms_office">
  <img class="adb-id--img" src="../../images/logos/apps/msoffice-light-120x120.png?1625765172" />
</figure>
<figure class="adb-id adb-id__logo adb-id__sq_xlarge adb-id__launchable adb-id__branded adb-id__ms_office">
  <img class="adb-id--img" src="../../images/logos/apps/msoffice-light-120x120.png?1625765172" />
</figure>
<figure class="adb-id adb-id__logo adb-id__sq_xlarge adb-id__launchable adb-id__branded adb-id__ms_office adb-is-disabled">
  <img class="adb-id--img" src="../../images/logos/apps/msoffice-light-120x120.png?1625765172" />
</figure>
<a class="adb-id adb-id__logo adb-id__sq_xlarge adb-id__launchable adb-id__branded adb-id__urban_airship">
  <img class="adb-id--img" src="../../images/logos/apps/urbanairship-120x120.png?1625765172" />
</a>
<a class="adb-id adb-id__logo adb-id__sq_xlarge adb-id__launchable adb-id__branded adb-id__ms_office">
  <img class="adb-id--img" src="../../images/logos/apps/msoffice-light-120x120.png?1625765172" />
</a>
<a class="adb-id adb-id__logo adb-id__sq_xlarge adb-id__launchable adb-id__branded adb-id__mailchimp">
  <img class="adb-id--img" src="../../images/logos/apps/mailchimp-120x120.png?1625765172" />
</a>
<a class="adb-id adb-id__logo adb-id__sq_xlarge adb-id__launchable adb-id__branded adb-id__wordpress">
  <img class="adb-id--img" src="../../images/logos/apps/wordpress-light-120x120.png?1625765173" />
</a>

App Bundles

<p>
    <a class="adb-id_group adb-id_group__linked" href="../../prototype/marketplace/bundle.html"><span class="adb-id adb-id__logo adb-id__sq_medium adb-id_group--item">
    <img class="adb-id--img" src="../../images/logos/apps/yendo-72x72.png?1625765172" />
  </span>
  <span class="adb-id adb-id__logo adb-id__sq_medium adb-id_group--item">
    <img class="adb-id--img" src="../../images/logos/apps/symantec-72x72.png?1625765172" />
  </span>
  </a>

</p>

<p>
    <a class="adb-id_group adb-id_group__linked" href="../../prototype/marketplace/bundle.html"><span class="adb-id adb-id__logo adb-id__sq_medium adb-id_group--item">
    <img class="adb-id--img" src="../../images/logos/apps/wordpress-72x72.png?1625765173" />
  </span>
  <span class="adb-id adb-id__logo adb-id__sq_medium adb-id_group--item">
    <img class="adb-id--img" src="../../images/logos/apps/newrelic-72x72.png?1625765173" />
  </span>
  <span class="adb-id adb-id__logo adb-id__sq_medium adb-id_group--item">
    <img class="adb-id--img" src="../../images/logos/apps/gridly-72x72.png?1625765172" />
  </span>
  </a>

</p>

<p>
    <a class="adb-id_group adb-id_group__linked adb-id_group__overlapping" href="../../prototype/marketplace/bundle.html"><span class="adb-id adb-id__logo adb-id__sq_medium adb-id_group--item">
    <img class="adb-id--img" src="../../images/logos/apps/chownow-72x72.png?1625765172" />
  </span>
  <span class="adb-id adb-id__logo adb-id__sq_medium adb-id_group--item">
    <img class="adb-id--img" src="../../images/logos/apps/urbanairship-72x72.png?1625765173" />
  </span>
  <span class="adb-id adb-id__logo adb-id__sq_medium adb-id_group--item">
    <img class="adb-id--img" src="../../images/logos/apps/formstack-72x72.png?1625765173" />
  </span>
  <span class="adb-id adb-id__logo adb-id__sq_medium adb-id_group--item">
    <img class="adb-id--img" src="../../images/logos/apps/sendgrid-72x72.png?1625765173" />
  </span>
  </a>

</p>
  • Framework
  • Display
  • App Tiles
  • 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%