Components Avatars

Avatars

Avatars enable you to represent a users identity on screen.
Image avatars 
          <.avatar size="xs" src="img_1.png" />
<.avatar size="sm" src="img_1.png" />
<.avatar size="md" src="img_1.png" />
<.avatar size="lg" src="img_1.png" />
<.avatar size="xl" src="img_1.png" />
Avatars with placeholder icon 
          <.avatar size="xs"/>
<.avatar size="sm"/>
<.avatar size="md"/>
<.avatar size="lg"/>
<.avatar size="xl"/>
Avatars with placeholder initials
PC
PC
PC
PC
PC 
          <.avatar name="Petal Components" size="xs" />
<.avatar name="Petal Components" size="sm"/>
<.avatar name="PC" />
<.avatar name="PC" size="lg"/>
<.avatar name="PC" size="xl"/>
Colored avatars with placeholder initials
MP
NH
JC
WS
PJ 
          <.avatar name="Matt Platts" size="xs" random_color />
<.avatar name="Nic Hoban" size="sm" random_color />
<.avatar name="James Cameron" random_color />
<.avatar name="Will Smith" size="lg" random_color />
<.avatar name="Peter Jackson" size="xl" random_color />
Avatar groups stacked 
          <.avatar_group avatars={[
  "img_1.png",
  "img_2.png",
  "img_3.png",
  "img_4.png",
]} size="xs"/>
<.avatar_group avatars={[
  "img_1.png",
  "img_2.png",
  "img_3.png",
  "img_4.png",
]} size="sm" />
<.avatar_group avatars={[
  "img_1.png",
  "img_2.png",
  "img_3.png",
  "img_4.png",
]} size="md" />
<.avatar_group avatars={[
  "img_1.png",
  "img_2.png",
  "img_3.png",
  "img_4.png",
]} size="lg" />
<.avatar_group avatars={[
  "img_1.png",
  "img_2.png",
  "img_3.png",
  "img_4.png",
]} size="xl" />
Properties

Defaults are indicated in bold.

.avatar

Name Type Options
src :string -
size :string `xs, `sm`, md , `lg`, `xl`
name :string -
random_color :boolean ``true, false
class :string -

.avatar_group

Name Type Options
class :string -