Avatar

The Avatar component is typically used to display images, icons, or initials representing people or other entities.

Profile Avatar

Profile avatar are basically circular in shape and can be made using pre-defined classes.

                               
                                <div>
                                   <img class="profile-avatar" src="../../assets/avatar1.jpg" alt="avatar">
                                </div>

                                <div>
                                   <img class="profile-avatar" src="../../assets/avatar2.png" alt="avatar">
                                </div>

                                <div>
                                   <img class="profile-avatar" src="../../assets/avatar3.png" alt="avatar">
                                </div>
        
                               
                           

Different Size Avatar

These avatars are of different sizes and can be made using appropriate classes.

                                
                                    <!-- use the required class name to make these avatars. -->

                                    <div>
                                        <img class="profile-avatar avatar-sm" src="../../assets/avatar1.jpg" alt="avatar">
                                    </div>

                                    <div>
                                        <img class="profile-avatar avatar-md" src="../../assets/avatar2.png" alt="avatar">
                                    </div>

                                    <div>
                                        <img class="profile-avatar avatar-lg" src="../../assets/avatar3.png" alt="avatar">
                                    </div>
                                
                            

Square Shape Avatar

Below is examples of square shape avatars of different siizes, add particular classes to make them.

                                
                                    <!-- use these classes to make square shape avatar of different sizes -->

                                    <div>
                                       <img class="square-avatar avatar-sm" src="../../assets/avatar1.jpg" alt="avatar" >
                                    </div>

                                    <div>
                                       <img class="square-avatar avatar-lg" src="../../assets/avatar4.jpg" alt="avatar">
                                    </div>