Home
Introduction
Color Library

Components

Alert
Avatar
Badge
Button
Details
Icon
Tabs
Time-ago
Tooltip
Table

Form components

Text Input
Textarea
Checkbox
Radio
Select
Components

Avatar

An image element with a fallback for representing the user.

Usage 

JP JP JPS JPS XX • • • 
<ui:Avatar src="https://github.com/jpsca.png" alt="JP" />

<ui:Avatar src="https://notfound" alt="JPS" />

<ui:Avatar alt="XX" />

<ui:Avatar src="/static/img/avatar1.jpg" href="#s-sizes" />

<ui:Avatar alt="• • •" href="#s-sizes" />

Sizes 

<ui:Avatar src="/static/img/avatar1.jpg" size="xlarge" />

<ui:Avatar src="/static/img/avatar1.jpg" size="large" />

<ui:Avatar src="/static/img/avatar1.jpg" />

<ui:Avatar src="/static/img/avatar1.jpg" size="small" />

<ui:Avatar src="/static/img/avatar1.jpg" size="mini" />

Square shape 

<ui:Avatar src="/static/img/avatar1.jpg" size="xlarge" square />

<ui:Avatar src="/static/img/avatar1.jpg" size="large" square />

<ui:Avatar src="/static/img/avatar1.jpg" square />

<ui:Avatar src="/static/img/avatar1.jpg" size="small" square />

<ui:Avatar src="/static/img/avatar1.jpg" size="mini" square />

With notifications 

<div class="row">
  <ui:Avatar src="/static/img/avatar5.jpg" size="xlarge" on/>
  <ui:Avatar src="/static/img/avatar5.jpg" size="large" off/>
  <ui:Avatar src="/static/img/avatar5.jpg" on/>
  <ui:Avatar src="/static/img/avatar5.jpg" size="small" off/>
  <ui:Avatar src="/static/img/avatar5.jpg" size="mini" on/>
</div>

<div class="row">
  <ui:Avatar src="/static/img/avatar6.jpg" size="xlarge" square on/>
  <ui:Avatar src="/static/img/avatar6.jpg" size="large" square off/>
  <ui:Avatar src="/static/img/avatar6.jpg" square on/>
  <ui:Avatar src="/static/img/avatar6.jpg" size="small" square off/>
  <ui:Avatar src="/static/img/avatar6.jpg" size="mini" square on/>
</div>

Grouped 

<div class="row">
  <ui:Avatar.Group>
    <ui:Avatar src="/static/img/avatar1.jpg" size="xlarge" />
    <ui:Avatar src="/static/img/avatar2.jpg" size="xlarge" />
    <ui:Avatar src="/static/img/avatar3.jpg" size="xlarge" />
    <ui:Avatar src="/static/img/avatar4.jpg" size="xlarge" />
  </ui:Avatar.Group>
</div>
<div class="row">
  <ui:Avatar.Group>
    <ui:Avatar src="/static/img/avatar1.jpg" size="large" />
    <ui:Avatar src="/static/img/avatar2.jpg" size="large" />
    <ui:Avatar src="/static/img/avatar3.jpg" size="large" />
    <ui:Avatar src="/static/img/avatar4.jpg" size="large" />
  </ui:Avatar.Group>
</div>
<div class="row">
  <ui:Avatar.Group>
    <ui:Avatar src="/static/img/avatar1.jpg" />
    <ui:Avatar src="/static/img/avatar2.jpg" />
    <ui:Avatar src="/static/img/avatar3.jpg" />
    <ui:Avatar src="/static/img/avatar4.jpg" />
  </ui:Avatar.Group>
</div>
<div class="row">
  <ui:Avatar.Group>
    <ui:Avatar src="/static/img/avatar1.jpg" size="small" />
    <ui:Avatar src="/static/img/avatar2.jpg" size="small" />
    <ui:Avatar src="/static/img/avatar3.jpg" size="small" />
    <ui:Avatar src="/static/img/avatar4.jpg" size="small" />
  </ui:Avatar.Group>
</div>
<div class="row">
  <ui:Avatar.Group>
    <ui:Avatar src="/static/img/avatar1.jpg" size="mini" />
    <ui:Avatar src="/static/img/avatar2.jpg" size="mini" />
    <ui:Avatar src="/static/img/avatar3.jpg" size="mini" />
    <ui:Avatar src="/static/img/avatar4.jpg" size="mini" />
  </ui:Avatar.Group>
</div>

Grouped with counter 

+99 
<ui:Avatar.Group>
  <ui:Avatar src="/static/img/avatar1.jpg" />
  <ui:Avatar src="/static/img/avatar2.jpg" />
  <ui:Avatar src="/static/img/avatar3.jpg" />
  <ui:Avatar alt="+99" class="counter" />
</ui:Avatar.Group>

Component arguments 

Avatar 

ArgumentTypeDescription
src str Optional. URL of the image to use as the avatar.
alt str Optional. Text to show if the image is not defined or it doesn't load.
size str Optional. The size of the avatar. Can be one of: small, medium, large, or xlarge. Default is medium.
href str Optional. Pass this argument to make the avatar a link.
square bool Optional. If set to true, the avatar will be rounded square instead of a circle. Default is false.
on bool Optional. If set to true, the avatar will show a notification dot. Default is false.
off bool Optional. If set to true, the avatar will show an empty notification dot. Default is false.

Avatar.Group 

No arguments.

Components 

Component
File
Source
Avatar
avatar/index.jinja
Avatar.Group
avatar/group.jinja
avatar/avatar.css