U

Starling

Avatar

used as a graphical representation of a person through a profile picture or image, an icon, or a string with initials.

Note: I have set the root font-size to 10px for this library.

Instructions to import the Avatar component in your CSS or HTML: 

// CSS
@import url("https://starlingui.netlify.app/utils/color.css");
@import url("https://starlingui.netlify.app/pages/components/avatar/avatar.css");
// HTML
<link rel="stylesheet" href="https://starlingui.netlify.app/utils/color.css">
<link rel="stylesheet" href="https://starlingui.netlify.app/pages/components/avatar/avatar.css">

Profile Avatar

has 6 different sizes:

av_xxl: 14rem
av_xl: 12rem
av_lg: 10rem
av_md: 8rem
av_sm: 6rem
av_xs: 4rem
demo avatar
demo avatar
demo avatar
demo avatar
demo avatar
demo avatar 
<!-- XXL Size -->
<div class="sui_avatar av_xxl">
  <img src=".." alt=".." />
</div>

<!-- XS Size -->
<div class="sui_avatar av_xs">
  <img src=".." alt=".." />
</div>

Square Avatar

similar to the Profile Avatar, with a different shape: 

av_xxl: 14rem
av_xl: 12rem
av_lg: 10rem
av_md: 8rem
av_sm: 6rem
av_xs: 4rem
demo avatar
demo avatar
demo avatar
demo avatar
demo avatar
demo avatar 
<!-- Square | XL Size -->
<div class="sui_avatar av_xl av_square">
  <img src=".." alt=".." />
</div>

<!-- Square | XS Size -->
<div class="sui_avatar av_xs av_square">
  <img src=".." alt=".." />
</div>

Text Avatar

can be Profile or Square, has 3 color variants:

sui_v1
sui_v2
sui_v3

RG

AL

SG

<!-- Profile | XXL | Text | V1 Color -->
<div class="sui_avatar av_xxl av_txt sui_v1">
  <h2>RG</h2>
</div>

<!-- Square | XL | Text | V2 Color -->
<div class="sui_avatar av_xl av_txt av_square sui_v2">
  <h2>AL</h2>
</div>