Avatar

A circular image, usually used to show profile pictures.

Property	Type	Description
id	?string	A unique identifier.
image	?string	The URL of the avatar image.
alt	?string	The HTML `alt` attribute
placeholder	?string	The placeholder of the avatar.
title	?string	The title text displayed beside the avatar.
title	slot	The title text displayed beside the avatar.
subtitle	slot	The subtitle text displayed beside the avatar.

Default

Rea Feichtinger

Creator of bellisUI

Rea Feichtinger

@reafeichtinger

<c-avatar image="https://testingbot.com/free-online-tools/random-avatar/300" alt="My image" />

{{-- Manipulate avatar image with CSS classes --}}
<c-avatar image="https://testingbot.com/free-online-tools/random-avatar/300" class="w-14! rounded-lg!" />

{{-- Title --}}
<c-avatar image="https://testingbot.com/free-online-tools/random-avatar/300" title="Rea Feichtinger" />

{{-- Subtitle --}}
<c-avatar image="https://testingbot.com/free-online-tools/random-avatar/300" title="Rea Feichtinger"
    subtitle="Creator of bellisUI" class="w-10!" />

{{-- Placeholder --}}
<c-avatar placeholder="RF" title="Rea Feichtinger" subtitle="@reafeichtinger"
    class="w-10! bg-accent! text-accent-content!" />

Slots

Rea Feichtinger

12 posts

45 comments

<c-avatar image="https://testingbot.com/free-online-tools/random-avatar/300" class="w-22!">
    <c-slot:title class="text-3xl font-bold! pl-2">
        Rea Feichtinger
    </c-slot:title>

    <c-slot:subtitle class="grid gap-1 mt-2 pl-2 text-xs">
        <c-icon name="send-horizontal" label="12 posts" />
        <c-icon name="message-circle-text" label="45 comments" />
    </c-slot:subtitle>
</c-avatar>