Phoenix UI

Avatar

Variant Open in playground 
<.avatar src="/images/avatar3.jpg" variant="circular"/>
<.avatar src="/images/avatar3.jpg" variant="rounded"/>
<.avatar src="/images/avatar3.jpg" variant="square"/>
Image Open in playground 
<.avatar src="/images/avatar1.jpg"/>
<.avatar src="/images/avatar2.jpg"/>
<.avatar src="/images/avatar3.jpg"/>
<.avatar src="/images/avatar4.jpg"/>
<.avatar src="/images/avatar5.jpg"/>
Letter Open in playground
JD
MS
AJ 
<.avatar alt="John Doe"/>
<.avatar alt="Mary Smith"/>
<.avatar alt="Alex Johnson"/>
Border Open in playground
MS 
<.avatar src="/images/avatar3.jpg" border/>
<.avatar alt="Mary Smith" border/>
Icon Open in playground 
<.avatar>
  <.icon name="hero-check-circle" />
</.avatar>
<.avatar>
  <.icon name="hero-trash" />
</.avatar>
<.avatar>
  <.icon name="hero-pencil" />
</.avatar>
<.avatar>
  <.icon name="hero-heart" />
</.avatar>
<.avatar>
  <.icon name="hero-information-circle" />
</.avatar>
Size Open in playground 
<.avatar size="xs"/>
<.avatar size="sm"/>
<.avatar size="md"/>
<.avatar size="lg"/>
<.avatar size="xl"/>
Color Open in playground 
<.avatar color="red"/>
<.avatar color="orange"/>
<.avatar color="yellow"/>
<.avatar color="green"/>
<.avatar color="blue"/>