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>
Open Avatars, Icons & Logos
Avatars, Icons and Logos can free-float without borders and backgrounds.
<div class="adb-id__open 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?1567620427" /> </div> <div class="adb-id"> <img class="adb-id--img" src="../../images/avatars/nathanRomero-72x72.png?1567620427" /> </div> <div class="adb-id"> <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png?1567620427" /> </div>
Fixed Sizes
<div class="adb-id adb-id__sq_xsmall"> <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png?1567620427" /> </div>
<div class="adb-id adb-id__sq_small"> <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png?1567620427" /> </div>
<div class="adb-id adb-id__sq_medium"> <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png?1567620427" /> </div>
<div class="adb-id adb-id__sq_xlarge"> <img class="adb-id--img" src="../../images/avatars/nathanRomero-120x120.png?1567620427" /> </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?1567620427" /> </div> <div class="adb-id adb-id__logo"> <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-72x72.png?1567620427" /> </div> <div class="adb-id adb-id__logo"> <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-120x120.png?1567620427" /> </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?1567620427" /> </div>
<div class="adb-id adb-id__logo adb-id__linked"> <img class="adb-id--img" src="../../images/logos/appdirect/square/ad-72x72.png?1567620427" /> </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?1567620427" /> </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?1567620427" /> </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?1567620427" /> </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?1567620427" /> </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?1567620427" /> </div>
Horizontal Logos & Images
We use the square shape for product/application icons and the horizontal shape for company logos and sometimes images that require a pre-defined sizing option. They can also be combined with Open Containers.
<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-xsmall.png?1567620427" /> </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?1567620427" /> </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?1567620427" /> </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?1567620427" /> </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?1567620427" /> </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?1567620427" /> </div>
Placeholder images inside the horizontal shape.
<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>
Vertical Logos & Images
Pre-defined vertical shapes and sizes like the Horizontal Logos.
<div class="adb-id adb-id__logo adb-id__vertical_medium"> <img class="adb-id--img" src="../../images/logos/marketplaces/acme_logo_vertical@4x.png?1567620427" /> </div>
Vertical Fixed Sizes
The example below inherits Open Containers.
<div class="adb-id adb-id__open adb-id__vertical_xsmall"> <img class="adb-id--img" src="../../images/assets/iphone-wide-space-grey.png?1567620427" /> </div>
<div class="adb-id adb-id__open adb-id__vertical_small"> <img class="adb-id--img" src="../../images/assets/iphone-wide-space-grey.png?1567620427" /> </div>
<div class="adb-id adb-id__open adb-id__vertical_medium"> <img class="adb-id--img" src="../../images/assets/iphone-wide-space-grey.png?1567620427" /> </div>
<div class="adb-id adb-id__open adb-id__vertical_large"> <img class="adb-id--img" src="../../images/assets/iphone-wide-space-grey.png?1567620427" /> </div>
<div class="adb-id adb-id__open adb-id__vertical_xlarge"> <img class="adb-id--img" src="../../images/assets/iphone-wide-space-grey.png?1567620427" /> </div>