bladewindUI

BladewindUI on GitHub

Avatar

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

Single Avatar

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

 

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

image
image
image
image
image
image
image 


                
                <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.

image
image
image
image 


                
                <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" />

 

Full List Of Attributes

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

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
image public/bladewind/images/avatar.png The url to the image file. By default a generic headshot image is used if no url is passed.
alt image The text to display as the value for the image's alt attribute.
size regular Defines the size of the avatar.
tiny small mediumregular bighuge omg
stacked false Defines if the avatar images are displayed as a stack. Value needs to be set as a string not boolean.
true false
class mr-2 mt-2 Any additonal css classes can be added using this attribute.

 

Avatar with all attributes defined

                
                    <x-bladewind.avatar 
                        image="/path/to/the/image/file" 
                        alt="company logo"
                        size="big"
                        stacked="true"
                        class="ring-blue-200 ring-offset-2" />

 

The source file for this component is available in resources > views > components > bladewind > avatar.blade.php

The avatars above were taken from
https://pixabay.com/illustrations/man-afro-american-black-skin-young-7142125/
https://pixabay.com/illustrations/woman-face-young-female-beauty-5924366/
https://pixabay.com/illustrations/woman-princess-fantasy-beautiful-7167023/
https://pixabay.com/illustrations/woman-beautiful-beauty-girl-female-7167024/
https://pixabay.com/illustrations/woman-african-american-avatar-5963386/