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 | - |