Avatar
The Avatar control is pure CSS which is used to represent a user’s profile picture, initials or icons.
The Avatar control is pure CSS which is used to represent a user’s profile picture, initials or icons.
<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Extra Small</label>
<div class="col-lg-8">
<div class="a-avatar a-avatar-xs image"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Small</label>
<div class="col-lg-8">
<div class="a-avatar a-avatar-sm image"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Default</label>
<div class="col-lg-8">
<div class="a-avatar image"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Large</label>
<div class="col-lg-8">
<div class="a-avatar a-avatar-lg image"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Extra Large</label>
<div class="col-lg-8">
<div class="a-avatar a-avatar-xl image"></div>
</div>
</div>
</div><div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Extra Small</label>
<div class="col-lg-8">
<div class="a-avatar a-avatar-xs a-avatar-circle image"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Small</label>
<div class="col-lg-8">
<div class="a-avatar a-avatar-sm a-avatar-circle image"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Default</label>
<div class="col-lg-8">
<div class="a-avatar a-avatar-circle image"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Large</label>
<div class="col-lg-8">
<div class="a-avatar a-avatar-lg a-avatar-circle image"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Extra Large</label>
<div class="col-lg-8">
<div class="a-avatar a-avatar-xl a-avatar-circle image"></div>
</div>
</div>
</div>