Components

The avatar component is typically used to display circular (or square) user profile pictures or capital letters.

Icon

When filled, display an avatar icon.

Type	Default Value
string	null

<NVAvatar Icon="user"/>

<div class="nv-avatar nv-avatar-md neutral">
  <i class="nv-icon nv-icon-user nv-icon-md"></i>
</div>

<nv-avatar icon="user"></nv-avatar>

<NvAvatar icon="user" />

Large

When filled, define the size of the avatar as lg.

Type	Default Value
bool	false

<NVAvatar Large Icon="user"/>

<div class="nv-avatar nv-avatar-lg neutral">
  <i class="nv-icon nv-icon-user nv-icon-lg"></i>
</div>

<nv-avatar large></nv-avatar>

<NvAvatar large />

Medium

When filled (or when no Size or bool Size provided), define the size of the avatar as md.

Type	Default Value
bool	false

<NVAvatar Medium Icon="user"/>

<div class="nv-avatar nv-avatar-md neutral">
  <i class="nv-icon nv-icon-user nv-icon-md"></i>
</div>

<nv-avatar medium></nv-avatar>

<NvAvatar medium />

Rounded

When true, the shape of the avatar will be a rounded square.

Type	Default Value
bool	false

<NVAvatar Rounded Text="TH"/>

<div class="nv-avatar nv-avatar-rounded nv-avatar-md neutral">
  TH
</div>

<nv-avatar rounded text="TH"></nv-avatar>

<NvAvatar rounded text="TH" />

Size

Define the size of the avatar. You can use t-shirt sizes: xs, sm, md, lg, and xl in pixel or eventually a value in px.
If a px value is used, the avatar's size take the value and the icon size will have the half of the value. (avatar: 120px / icon: 60px)

Type	Default Value
string	null

<NVStack Gutter="4" MB="4">
  <NVAvatar Size="xs" Icon="user"/>
  <NVAvatar Size="sm" Icon="user"/>
  <NVAvatar Size="md" Icon="user"/>
  <NVAvatar Size="lg" Icon="user"/>
  <NVAvatar Size="xl" Icon="user"/>
  <NVAvatar Size="80px" Icon="user"/>
</NVStack>
<NVStack Gutter="4" MB="4">
  <NVAvatar Size="xs" Text="AH"/>
  <NVAvatar Size="sm" Text="BB"/>
  <NVAvatar Size="md" Text="CP"/>
  <NVAvatar Size="lg" Text="SG"/>
  <NVAvatar Size="xl" Text="TH"/>  
</NVStack>
<NVStack Gutter="4">
  <NVAvatar Size="xs" Url="/img/avatar/women.jpg"/>
  <NVAvatar Size="sm" Url="/img/avatar/women.jpg"/>
  <NVAvatar Size="md" Url="/img/avatar/women.jpg"/>
  <NVAvatar Size="lg" Url="/img/avatar/women.jpg"/>
  <NVAvatar Size="xl" Url="/img/avatar/women.jpg"/>  
</NVStack>

<div class="nv-stack gutter-x-4 mb-4">
  <div class="nv-avatar nv-avatar-xs neutral">
    <i class="nv-icon nv-icon-user nv-icon-xs"></i>
  </div>
  <div class="nv-avatar nv-avatar-sm neutral">
    <i class="nv-icon nv-icon-user nv-icon-sm"></i>
  </div>
  <div class="nv-avatar nv-avatar-md neutral">
    <i class="nv-icon nv-icon-user nv-icon-md"></i>
  </div>
  <div class="nv-avatar nv-avatar-lg neutral">
    <i class="nv-icon nv-icon-user nv-icon-lg"></i>
  </div>
  <div class="nv-avatar nv-avatar-xl neutral">
    <i class="nv-icon nv-icon-user nv-icon-xl"></i>
  </div>
  <div class="nv-avatar nv-avatar-md neutral" style="width:80px;height:80px">
    <i class="nv-icon nv-icon-user" style="font-size:40px"></i>
  </div>
</div>

<div class="nv-stack gutter-x-4 mb-4">
  <div class="nv-avatar nv-avatar-xs neutral">
    AH
  </div>
  <div class="nv-avatar nv-avatar-sm neutral">
    BB
  </div>
  <div class="nv-avatar nv-avatar-md neutral">
    CP
  </div>
  <div class="nv-avatar nv-avatar-lg neutral">
    SG
  </div>
  <div class="nv-avatar nv-avatar-xl neutral">
    TH
  </div>
</div>

<div class="nv-stack gutter-x-4 mb-4">
  <div class="nv-avatar nv-avatar-xs neutral">
    <img alt="" class="nv-avatar-img img" src="/img/avatar/women.jpg">
  </div>
  <div class="nv-avatar nv-avatar-sm neutral">
    <img alt="" class="nv-avatar-img img" src="/img/avatar/women.jpg">
  </div>
  <div class="nv-avatar nv-avatar-md neutral">
    <img alt="" class="nv-avatar-img img" src="/img/avatar/women.jpg">
  </div>
  <div class="nv-avatar nv-avatar-lg neutral">
    <img alt="" class="nv-avatar-img img" src="/img/avatar/women.jpg">
  </div>
  <div class="nv-avatar nv-avatar-xl neutral">
    <img alt="" class="nv-avatar-img img" src="/img/avatar/women.jpg">
  </div>
</div>

<nv-stack gutter="4" mb="4">
  <nv-avatar size="xs"></nv-avatar>
  <nv-avatar size="sm"></nv-avatar>
  <nv-avatar size="md"></nv-avatar>
  <nv-avatar size="lg"></nv-avatar>
  <nv-avatar size="xl"></nv-avatar>
  <nv-avatar size="100px"></nv-avatar>
</nv-stack>
<nv-stack gutter="4" mb="4">
  <nv-avatar text="XS" size="xs"></nv-avatar>
  <nv-avatar text="SM" size="sm"></nv-avatar>
  <nv-avatar text="MD" size="md"></nv-avatar>
  <nv-avatar text="LG" size="lg"></nv-avatar>
  <nv-avatar text="XL" size="xl"></nv-avatar>
</nv-stack>
<nv-stack gutter="4" mb="4">
  <nv-avatar text="XS" url="/img/avatar/women.jpg" size="xs"></nv-avatar>
  <nv-avatar text="SM" url="/img/avatar/women.jpg" size="sm"></nv-avatar>
  <nv-avatar text="MD" url="/img/avatar/women.jpg" size="md"></nv-avatar>
  <nv-avatar text="LG" url="/img/avatar/women.jpg" size="lg"></nv-avatar>
  <nv-avatar text="XL" url="/img/avatar/women.jpg" size="xl"></nv-avatar>
</nv-stack>

<NvStack gutter="4" mb="4">
  <NvAvatar size="xs"></NvAvatar>
  <NvAvatar size="sm"></NvAvatar>
  <NvAvatar size="md"></NvAvatar>
  <NvAvatar size="lg"></NvAvatar>
  <NvAvatar size="xl"></NvAvatar>
  <NvAvatar size="100px"></NvAvatar>
</NvStack>
<NvStack gutter="4" mb="4">
  <NvAvatar size="xs" text="XS"></NvAvatar>
  <NvAvatar size="sm" text="SM"></NvAvatar>
  <NvAvatar size="md" text="MD"></NvAvatar>
  <NvAvatar size="lg" text="LG"></NvAvatar>
  <NvAvatar size="xl" text="XL"></NvAvatar>
</NvStack>
<NvStack gutter="4" mb="4">
  <NvAvatar size="xs" text="XS" url="/img/avatar/women.jpg"></NvAvatar>
  <NvAvatar size="sm" text="SM" url="/img/avatar/women.jpg"></NvAvatar>
  <NvAvatar size="md" text="MD" url="/img/avatar/women.jpg"></NvAvatar>
  <NvAvatar size="lg" text="LG" url="/img/avatar/women.jpg"></NvAvatar>
  <NvAvatar size="xl" text="XL" url="/img/avatar/women.jpg"></NvAvatar>
</NvStack>

Small

When filled, define the size of the avatar as sm.

Type	Default Value
bool	false

<NVAvatar Small Icon="user"/>

<div class="nv-avatar nv-avatar-sm neutral">
  <i class="nv-icon nv-icon-user nv-icon-sm"></i>
</div>

<nv-avatar small></nv-avatar>

<NvAvatar small />

Square

When true, the shape of the avatar will be a square.

Type	Default Value
bool	false

<NVAvatar Square Text="TH"/>

<div class="nv-avatar nv-avatar-square avatar-md neutral">
  TH
</div>

<nv-avatar square text="TH"></nv-avatar>

<NvAvatar square text="TH" />

Text

Text of the avatar. Usually use two letters (max. 3 letters)
When filled with the Url Parameter, this text is used as the alt attribute content of the img tag.

Type	Default Value
string	null

<NVAvatar Text="TH" />
<NVAvatar Text="JH" Url="/img/avatar/women.jpg" />

<div class="nv-avatar nv-avatar-md neutral">TH</div>
<div class="nv-avatar nv-avatar-md neutral">
  <img src="/img/avatar/women.jpg" alt="JH" class="nv-avatar-img img">
</div>

<nv-avatar text="TH"></nv-avatar>
    <nv-avatar url="/img/avatar/women.jpg"></nv-avatar>

<NvAvatar text="NV" />
  <NvAvatar url="/img/avatar/women.jpg" />

Url

When filled, display avatar as an img tag.

Type	Default Value
string	null

<NVAvatar Url="/img/avatar/women.jpg" />

<div class="nv-avatar nv-avatar-md neutral">
  <img src="/img/avatar/women.jpg" alt="-" class="nv-avatar-img img">
</div>

<nv-avatar url="/img/avatar/women.jpg"></nv-avatar>

<NvAvatar url="/img/avatar/women.jpg" />

XLarge

When filled, define the size of the avatar as xl.

Type	Default Value
bool	false

<NVAvatar XLarge Icon="user"/>

<div class="nv-avatar nv-avatar-xl neutral">
  <i class="nv-icon nv-icon-user nv-icon-xl"></i>
</div>

<nv-avatar xlarge></nv-avatar>

<NvAvatar xlarge />

XSmall

When filled, define the size of the avatar as xs.

Type	Default Value
bool	false

<NVAvatar XSmall Icon="user"/>

<div class="nv-avatar nv-avatar-xs neutral">
  <i class="nv-icon nv-icon-user nv-icon-xs"></i>
</div>

<nv-avatar xsmall></nv-avatar>

<NvAvatar xsmall />