Avatar

<sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Brooklynn" />
<sa-avatar-group>
    <sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Riley" />
    <sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Jack" />
    <sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Nolan" />
</sa-avatar-group>

Usage

Use <sa-avatar> to display a single avatar. Display a group of avatars using <sa-avatar-group>.

<!-- Display a single avatar -->
<sa-avatar src="..." />

<!-- Display a group of avatars -->
<sa-avatar-group>
    <sa-avatar src="..." />
    <sa-avatar src="..." />
</sa-avatar-group>

Examples

Avatar Group

Add a group of avatars using <sa-avatar-group>.

<sa-avatar-group>
    <sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Riley"/>
    <sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Jack"/>
    <sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Nolan"/>
    <sa-avatar initials="+3"/>
</sa-avatar-group>

Initials

Display the initials of a user using the initials attribute. You can specify the name attribute instead, and the initials will be automatically determined.

<!-- specify initials explicitly --> 
<sa-avatar initials="IB" />
<!-- or specify name -->
<sa-avatar name="Ibn Battutta" />

URL

Wrap avatars in an anchor element to allow navigation to specified URL.

<a href="#">
    <sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Brooklynn"/>
</a>
<sa-avatar-group>
    <a asp-controller="User" asp-action="Details" asp-route-id="1">
        <sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Riley"/>
    </a>
    <a asp-controller="User" asp-action="Details" asp-route-id="2">
        <sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Jack"/>
    </a>
    <a asp-controller="User" asp-action="Details" asp-route-id="3">
        <sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Nolan"/>
    </a>
</sa-avatar-group>

Custom CSS

Customize the display of the avatar by specifying custom CSS classes.

<sa-avatar class="rounded-sm" src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Brooklynn" />
<sa-avatar class="rounded-lg bg-fuchsia-200 text-fuchsia-700 border-fuchsia-600 border-2" name="Ibn Battuta" />