Brand Avatar
<brand-avatar> wraps Shoelace's <sl-avatar>. Provide an image, initials, or a slotted icon.
Shapes
With image
Initials
Fallback icon
Custom sizes
Set the --brand-avatar-size custom property on the host to change diameter. Accepts any CSS length.
Usage
import { BrandAvatar } from '@brandos/ui';
<brand-avatar image="/avatars/jane.png" label="Jane Doe"></brand-avatar>
<brand-avatar initials="JD" shape="circle"></brand-avatar>
<brand-avatar label="Avatar">
<sl-icon slot="icon" name="person-fill"></sl-icon>
</brand-avatar>