GroupCollect 1.3.142

Avatar

Renders an avatar.

Extra small Open in playground

MF

<.avatar size="xs" initials="MF"/>
Default Open in playground

MF

<.avatar initials="MF"/>
Large Open in playground

MF

<.avatar size="lg" initials="MF"/>
Large with url Open in playground 
<.avatar size="lg" url="/images/demo.jpeg" initials="MF"/>
With clickable icon Open in playground

MF

<.avatar
  size="lg"
  icon="pencil-simple"
  on_click={%JS{ops: [["toggle", %{to: "#with-clickable-icon .avatar-click-demo"}]]}}
  initials="MF"
/>
With url and clickable icon Open in playground 
<.avatar
  size="lg"
  url="/images/demo.jpeg"
  icon="pencil-simple"
  on_click={%JS{ops: [["toggle", %{to: "#with-url-and-clickable-icon .avatar-click-demo"}]]}}
  initials="MF"
/>
With linkable icon Open in playground

MF

<.avatar size="lg" href="https://groupcollect.com/" icon="pencil-simple" initials="MF"/>
Avatar with user team styling Open in playground

MF

<.avatar user_team initials="MF"/>
Extra small avatar with user team styling Open in playground

MF

<.avatar size="xs" user_team initials="MF"/>