tidle UI

Avatar

Avatars are user profile pictures, usually found in circular shapes. Avatars can be used for 'container' objects — projects, spaces, repositories, etcetera — to give them a recognisable visual identity.

Avatar

avatar 
            
              <img class="avatar" src="..." alt="..." />
              <div class="avatar bg-default"><span class="fas fa-users fa-lg"></span></div>

Avatar Sizes

avatar avatar avatar
AV
AV
AV
            
              <img class="avatar avatar-lg" src="..." alt="..." />
              <img class="avatar" src="..." alt="..." />
              <img class="avatar avatar-sm" src="..." alt="..." />

              <div class="avatar bg-default avatar-lg"></div>
              <div class="avatar"bg-default ></div>
              <div class="avatar bg-default avatar-sm"></div>

Square Avatars

avatar avatar avatar
AV
AV
AV
            
              <img class="avatar square avatar-lg" src="..." alt="..." />
              <img class="avatar square" src="..." alt="..." />
              <img class="avatar square avatar-sm" src="..." alt="..." />

              <div class="avatar square bg-default avatar-lg"></div>
              <div class="avatar square bg-default"></div>
              <div class="avatar square bg-default avatar-sm"></div>