Avatar

The avatar component allows you to display a rounded picture at the usual avatar size. This size is of course customizable. This component can be useful for displaying pictures of logged-in users, a contacts list, directory of employees etc. The avatar component can either display a single image or a horizontal stack of images. Images are displayed as inline-block elements. A default image is used when the image attribute is either blank or not specified.

Single Avatar

        
            <x-bladewind.avatar image="/path/to/the/image/file" />
        
    

The avatar component expects a value for its image attribute. A default image is however, used if the attribute is either blank or not specified.

Different Sizes

You can specify a size for the avatar. See the full list of attributes for the available sizes. The default size is regular

        
        <x-bladewind.avatar
            image="/path/to/the/image/file"
            size="tiny" />

        <x-bladewind.avatar
            image="/path/to/the/image/file"
            size="small" />

        <x-bladewind.avatar
            image="/path/to/the/image/file"
            size="medium" />

            // this is the default
            <x-bladewind.avatar
            image="/path/to/the/image/file" />

        <x-bladewind.avatar
            image="/path/to/the/image/file"
            size="big" />

        <x-bladewind.avatar
            image="/path/to/the/image/file"
            size="huge" />

        <x-bladewind.avatar
            image="/path/to/the/image/file"
            size="omg" />
        
    

Stacked Avatars

Stacked avatars have an overlapping effect. The component will not restrict you from stacking avatars of different sizes but, for a more appealing visual effect, stacking images of the same size is advised. You can achieve stackability by setting the stacked="true" attribute on each avatar that you want as part of the stack.

        
        <x-bladewind.avatar
            image="/path/to/the/image/file"
            stacked="true" />

        <x-bladewind.avatar
            image="/path/to/the/image/file"
            stacked="true" />

        <x-bladewind.avatar
            image="/path/to/the/image/file"
            stacked="true" />

        <x-bladewind.avatar
            image="/path/to/the/image/file"
            stacked="true" />

        
    

Dot Indicator

Avatars can be displayed with a dot to indicate the status of a user. These statuses could be online, offline, invisible. To show a dot indicator on an avatar simply set show_dot="true".

        
        <x-bladewind.avatar
            show_dot="true"
            image="/path/to/the/image/file" />
        
    

By default the dot indicator is displayed at the base of the avatar. To change the placement to the top of the avatar, set the dot_placement="top" attribute.

        
        <x-bladewind.avatar
            show_dot="true"
            dot_placement="top"
            image="/path/to/the/image/file" />
        
    

The dot is available in different colours if you wish to use an indicator that matches your theme. This also allows you to set different colours for different statuses. Set the dot_color attribute to any of the nine colours compiled into BladewindUI. See the attributes table below for all colours.

        
        <x-bladewind.avatar show_dot="true"
            dot_color="primary"
            image="/path/to/the/image/file" />

        <x-bladewind.avatar show_dot="true"
            dot_color="gray"
            image="/path/to/the/image/file" />

        <x-bladewind.avatar show_dot="true"
            dot_color="red"
            image="/path/to/the/image/file" />
        
    

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Avatar component.

 

Avatar with all attributes defined

        
            <x-bladewind.avatar
                image="/path/to/the/image/file"
                alt="company logo"
                size="big"
                stacked="true"
                show_dot="true"
                show_ring="false",
                dot_color="red",
                dot_placement="top"
                class="ring-blue-200 ring-offset-2" />