Unleash your potential

Go one step further with our solutions for creating an intuitive, personalized experience.

Haltura

Create libraries without coding.

Spartiapp

Create beautiful websites.
Log In
Alpha
Docs Creations Contact

Introduction

IntroductionInstallationBreakpoints

Components

AccordionAlertAutocompleteAvatarBadgeButtonCardCheckboxDividerDropdownFieldLayoutModalNavigationRadioSheetSkeletonSliderSnackbarSpinnerTableTabTooltipTypography

Utilities

ColorDisplayFlexboxOpacityPositionRadiusSizingSpacingTextVertical align

APIs

HalturaCookiesFrontierTour
Docs / web / avatar

Avatar

Avatar components are essential to identify different profiles. Haltura makes it easy for you to create these components.

Initializing the component.

The h_alert class is used to generate an Alert component.

example profiles
avatar
<div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"/></div>

It is possible to manage their size: small, compact, comfortable and large.

example profiles
example profiles
example profiles
example profiles
example profiles
avatar
<div class="h_avatar small"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
<div class="h_avatar compact"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
<div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
<div class="h_avatar comfortable"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
<div class="h_avatar large"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>

The h_avatar-group class allows to manage their spacing thanks to the gap_collapse and gap_expand classes.

example profiles
example profiles
example profiles
example profiles
+2
example profiles
example profiles
example profiles
example profiles
+2
example profiles
example profiles
example profiles
example profiles
+2
avatarspacing
<div class="mb_1 h_avatar-group">
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar">+2</div>
</div>
<div class="mb_1 h_avatar-group gap_collapse">
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar">+2</div>
</div>
<div class="mb_1 h_avatar-group gap_expand">
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar">+2</div>
</div>

Develop your full potential with combinations of other Haltura classes, for example: h_avatar and radius.

example profiles
example profiles
example profiles
example profiles
example profiles
+2
avatarspacing
<div class="mb_1 h_avatar-group">
   <div class="h_avatar radius_0"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar radius_5"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar radius_btn"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar radius_global"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar radius_rounded"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar radius_full">+2</div>
</div>

Finally, it is possible to add pins for various information (status, notifications, etc). To do this, add an element with the class pin_[position].

example profiles
example profiles
avatar
<div class="h_avatar">
   <img src="https://haltura.io/images/avatar_1.png" alt="example profiles">
   <div class="pin_tr"></div>
</div>
<div class="h_avatar">
   <img src="https://haltura.io/images/avatar_1.png" alt="example profiles">
   <div class="pin_b"></div>
</div>
example profiles
example profiles
example profiles
example profiles
+2
example profiles
example profiles
example profiles
example profiles
+2
example profiles
example profiles
example profiles
example profiles
+2
avatarspacing
<div class="mb_1 h_avatar-group">
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar">+2</div>
</div>
<div class="mb_1 h_avatar-group gap_collapse">
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar">+2</div>
</div>
<div class="mb_1 h_avatar-group gap_expand">
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar"><img src="https://haltura.io/images/avatar_1.png" alt="example profiles"></div>
   <div class="h_avatar">+2</div>
</div>
Class Definition
h_avatar Basic component.
small Small avatar.
compact Compact avatar.
comfortable Comfortable avatar.
large Large avatar.
gap_collapse Bring the avatars together.
gap_expand Separates the avatars.
h_avatar-group Avatar group.
pin_t top only.
pin_tr top and right.
pin_r right only.
pin_br bottom and right.
pin_b bottom only.
pin_bl bottom and left.
pin_l left only.
pin_tl top and left.
radius_0 Avatar with radius of 0px.
radius_5 Avatar with radius of 5px.
radius_btn Avatar with a button radius.
radius_global Avatar with a global radius.
radius_rounded Avatar with radius of 500px.
radius_full Avatar with radius of 100%.
Hello!

Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!

Cookie settings

Important (Can't be disabled)