Docs

Avatar

The Avatar component is used to display a user's profile picture, initials or fallback icon.

Round Avatars

To use round avatars simply use classname avatar and then followed by class name for size of avatar. eg: avatar avatar-xl this gives an avatar of extra large size.

avatar of extra large size
avatar of large size
avatar of medium size
avatar of small size 
                        
                            <figure class="avatar avatar-xl">
                                <img src="../../assets/avatar.jpg" alt="...">
                            </figure>
                    
                            <figure class="avatar avatar-lg">
                                <img src="../../assets/avatar.jpg" alt="...">
                            </figure>
                    
                            <figure class="avatar avatar-md">
                                <img src="../../assets/avatar.jpg" alt="...">
                            </figure>
                    
                            <figure class="avatar avatar-sm">
                                <img src="../../assets/avatar.jpg" alt="...">
                            </figure>

Squared Avatars

To use squared avatars simply use classnames avatar avatar-square and then followed by class name for size of avatar. eg: avatar avatar-square avatar-xl this gives a squared avatar of extra large size.

square avatar of extra large size
square avatar of large size
square avatar of medium size
square avatar of small size 
                        
                            <figure class="avatar avatar-square avatar-xl">
                                <img src="../../assets/avatar.jpg" alt="...">
                            </figure>
                    
                            <figure class="avatar avatar-square avatar-lg">
                                <img src="../../assets/avatar.jpg" alt="...">
                            </figure>
                    
                            <figure class="avatar avatar-square avatar-md">
                                <img src="../../assets/avatar.jpg" alt="...">
                            </figure>
                    
                            <figure class="avatar avatar-square avatar-sm">
                                <img src="../../assets/avatar.jpg" alt="...">
                            </figure>

ON THIS PAGE