Avatars & Logos
Avatars
Placeholder
The default state is the "placeholder" state, for users who have received invitations but have not activated their accounts.
<div class="adb-id adb-id__sq_medium"> <i class="adb-id--placeholder adb-icon__user"></i> </div>
Pending
Add .adb-id__pending class to avatars for users who have activated their accounts but have not uploaded a custom user image yet.
AZ
<div class="adb-id adb-id__sq_medium adb-id__pending"> <span class="adb-id--placeholder">AZ</span> </div>
Fluid Size
<div class="adb-id"> <img class="adb-id--img" src="../../images/avatars/nathanRomero-48x48.png" /> </div> <div class="adb-id"> <img class="adb-id--img" src="../../images/avatars/nathanRomero-72x72.png" /> </div> <div class="adb-id"> <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" /> </div>
Fixed Sizes
<div class="adb-id adb-id__sq_xsmall"> <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" /> </div>
<div class="adb-id adb-id__sq_small"> <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" /> </div>
<div class="adb-id adb-id__sq_medium"> <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" /> </div>
<div class="adb-id adb-id__sq_xlarge"> <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png" /> </div>
Logos
Placeholder
Use the .adb-id--placeholder class for companies who have not uploaded a logo yet.
<div class="adb-id adb-id__logo adb-id__sq_medium"> <i class="adb-id--placeholder adb-icon__star"></i> </div>
Fluid Size
<div class="adb-id adb-id__logo"> <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-48x48.png" /> </div> <div class="adb-id adb-id__logo"> <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-72x72.png" /> </div> <div class="adb-id adb-id__logo"> <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-120x120.png" /> </div>
Linked Logos
States
<div class="adb-id adb-id__logo adb-id__linked"> <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-72x72.png" /> </div>
<div class="adb-id adb-id__logo adb-id__linked"> <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-72x72.png" /> </div>
Fixed Sizes
<div class="adb-id adb-id__logo adb-id__sq_xsmall"> <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-192x192.png" /> </div>
<div class="adb-id adb-id__logo adb-id__sq_small"> <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-192x192.png" /> </div>
<div class="adb-id adb-id__logo adb-id__sq_medium"> <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-192x192.png" /> </div>
<div class="adb-id adb-id__logo adb-id__sq_xlarge"> <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-192x192.png" /> </div>
<div class="adb-id adb-id__logo adb-id__sq_xxxlarge"> <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-192x192.png" /> </div>
Horizontal Logos
We use the square shape for product/application icons and the horizontal shape for company logos.
<div class="adb-id adb-id__logo adb-id__hz"> <img class="adb-id--img" src="../../images/logos/appdirect/1-color/appdirect-logo-1c-light-xsmall.png" /> </div>
Horizontal Fixed Sizes
<div class="adb-id adb-id__logo adb-id__hz_xsmall"> <img class="adb-id--img" src="../../images/logos/appdirect/1-color/appdirect-logo-1c-light-large.png" /> </div>
<div class="adb-id adb-id__logo adb-id__hz_small"> <img class="adb-id--img" src="../../images/logos/appdirect/1-color/appdirect-logo-1c-light-large.png" /> </div>
<div class="adb-id adb-id__logo adb-id__hz_medium"> <img class="adb-id--img" src="../../images/logos/appdirect/1-color/appdirect-logo-1c-light-large.png" /> </div>
<div class="adb-id adb-id__logo adb-id__hz_xlarge"> <img class="adb-id--img" src="../../images/logos/appdirect/1-color/appdirect-logo-1c-light-large.png" /> </div>
<div class="adb-id adb-id__logo adb-id__hz_xxxlarge"> <img class="adb-id--img" src="../../images/logos/appdirect/1-color/appdirect-logo-1c-light-large.png" /> </div>
<div class="adb-id adb-id__logo adb-id__hz_medium"> <i class="adb-icon__marketplace adb-id--placeholder"></i> </div> <div class="adb-id adb-id__logo adb-id__hz_medium"> <i class="adb-icon__company adb-id--placeholder"></i> </div>
Logo 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" /> </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" /> </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" /> </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" /> </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" /> </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" /> </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" /> </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" /> </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" /> </span> </a> </p>