SlitheAvatar
A sl-avatar component shows an image that usually represent a user or known entity.
html
<sl-avatar name="John Doe"/>
<sl-avatar name="John Doe" background="#4A4052"/>
<sl-avatar name="Slithe" src="/favicon.svg"/>Modifiers
Adding those boolean attributes allows to modify the avatar styling.
Shapes
html
<!-- 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.
html
<sl-avatar name="John Doe"/>
<sl-avatar name="Melissa Forte"/>Size
Modifies the avatar size, defaults to 32px.
html
<sl-avatar name="John Doe" size="64px"/>Tooltip
Adds a tooltip text to provide more information.
html
<sl-avatar name="John Doe" tooltip="Is there anything in the box, darling?"/>