Avatar

A sl-avatar component shows an image that usually represent a user or known entity.

<sl-avatar name="John Doe"/>
<sl-avatar name="Slithe" src="/favicon.svg"/>

Modifiers

Adding those boolean attributes allows to modify the avatar styling.

Shapes

<!-- Shapes -->
<sl-avatar name="John Doe" circle/>
<sl-avatar name="John Doe" square/>

Attributes

Name

The avatar name, used as a way to display initials as default or fallback when no image can be found.

<sl-avatar name="John Doe"/>
<sl-avatar name="Melissa Forte"/>

Size

Modifies the avatar size, defaults to 32px.

<sl-avatar name="John Doe" size="64px"/>

Tooltip

Adds a tooltip text to provide more information.

<sl-avatar name="John Doe" tooltip="Is there anything in the box, darling?"/>