A static copy of the demo at release 0.3.0. Live Components, Turbo Streams and form submits need Symfony: run the full demo.

Avatar

component

Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes

Install

php bin/console ux:install avatar \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies
assets/ → assets/
templates/ → templates/
Composer
twig/extra-bundle
twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0
symfony/ux-icons

Examples (8)

Default

Light
Dark
Code 
<div class="flex items-center justify-center gap-4">
    <twig:Avatar>
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Default avatar" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Rounded avatar" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
</div>

Bordered

Light
Dark
Code 
<div class="flex items-center justify-center gap-4">
    <twig:Avatar border="bordered">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Bordered avatar" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar border="bordered" shape="rounded">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Bordered rounded avatar" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
</div>

Placeholder

Light
Dark
Code 
<div class="flex items-center justify-center gap-4">
    <twig:Avatar>
        <twig:Avatar:Fallback />
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded">
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
</div>

Dot indicator

Light
Dark
Code 
<div class="flex items-center justify-center gap-6">
    <div class="relative">
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Online user" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Indicator class="absolute top-0 right-0 border-2 border-buffer" variant="success"/>
    </div>
    <div class="relative">
        <twig:Avatar shape="rounded">
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Offline user" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Indicator class="absolute -top-1 -right-1 border-2 border-buffer" variant="danger"/>
    </div>
    <div class="relative">
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Online user" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Indicator class="absolute bottom-0 right-0 border-2 border-buffer" variant="success"/>
    </div>
    <div class="relative">
        <twig:Avatar shape="rounded">
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Online user" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Indicator class="absolute -bottom-1 -right-1 border-2 border-buffer" variant="success"/>
    </div>
</div>

Stacked

Light
Dark
Code 
<div class="flex flex-col items-center gap-6">
    <twig:Avatar:Group>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-2.jpg" alt="" />
            <twig:Avatar:Fallback>BG</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="" />
            <twig:Avatar:Fallback>TL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-4.jpg" alt="" />
            <twig:Avatar:Fallback>RL</twig:Avatar:Fallback>
        </twig:Avatar>
    </twig:Avatar:Group>

    <twig:Avatar:Group>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-2.jpg" alt="" />
            <twig:Avatar:Fallback>BG</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="" />
            <twig:Avatar:Fallback>TL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar:GroupCount as="a" href="#">+99</twig:Avatar:GroupCount>
    </twig:Avatar:Group>
</div>

Avatar with text

Light
Dark
Code 
<div class="flex items-center justify-center gap-2.5">
    <twig:Avatar>
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Jese Leos" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <div class="font-medium text-heading">
        <div>Jese Leos</div>
        <div class="text-sm font-normal text-body">Joined in August 2014</div>
    </div>
</div>

User dropdown

Light
Dark
Code 
<twig:Dropdown id="user-dropdown" placement="bottom-start">
    <twig:Dropdown:Trigger>
        <twig:Button variant="ghost" size="icon" class="rounded-full border-0" aria-label="Open user menu" {{ ...dropdown_trigger_attrs }}>
            <twig:Avatar class="cursor-pointer">
                <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Default avatar" />
                <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
            </twig:Avatar>
        </twig:Button>
    </twig:Dropdown:Trigger>

    <twig:Dropdown:Content>
        <twig:Dropdown:Header>
            <div class="font-medium">Bonnie Green</div>
            <div class="truncate">name@flowbite.com</div>
        </twig:Dropdown:Header>
        <twig:Dropdown:Group>
            <twig:Dropdown:Item>Dashboard</twig:Dropdown:Item>
            <twig:Dropdown:Item>Settings</twig:Dropdown:Item>
            <twig:Dropdown:Item>Earnings</twig:Dropdown:Item>
            <twig:Dropdown:Item class="text-fg-danger">Sign out</twig:Dropdown:Item>
        </twig:Dropdown:Group>
    </twig:Dropdown:Content>
</twig:Dropdown>

Sizes

Light
Dark
Code 
<div class="flex items-center justify-center gap-4">
    <twig:Avatar shape="rounded" size="xs">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Extra small" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="sm">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Small" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="md">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Medium" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="lg">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Large" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="xl">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Extra large" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="2xl">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Big" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
</div>