Avatar

The Avatar component is used to represent a user, and displays the profile picture, it is found in different shapes and sizes. In order to only use Blaze UI's Avatar component in your project, copy and paste the below code in the head tag of your html document. 

                            
                <link rel="stylesheet" href="https://blaze-ui.netlify.app/css/foundation.css" />
                <link rel="stylesheet" href="https://blaze-ui.netlify.app/components/avatar/avatar.css" />

Profile Avatar

You need to include class avatar in the container element. Inside container, you can use image tag and give your own source attribute.

                        
                            <div class="avatar">
                                <img src="/assets/avatar-male1.svg">
                            </div>
                            <div class="avatar">
                                <img src="/assets/avatar-fm1.svg">
                            </div>
                            <div class="avatar">
                                <img src="/assets/avatar-fm2.svg">
                            </div>
                            <div class="avatar">
                                <img src="/assets/avatar-male2.svg">
                            </div>

Round Avatar

For round avatars, you can add the class avatar-round to the image tag along with avatar class for container.
Note : avatar-round class wouldn't work if the image provided is svg. 

                        
                            <div class="comp-showroom">
                                <div class="avatar">
                                    <img class="avatar-round" src="/assets/avatar-male1.png">
                                </div>
                                <div class="avatar">
                                    <img class="avatar-round" src="/assets/avatar-fm1.png">
                                </div>
                                <div class="avatar">
                                    <img class="avatar-round" src="/assets/avatar-fm2.png">
                                </div>
                                <div class="avatar">
                                    <img class="avatar-round" src="/assets/avatar-male2.png">
                                </div>
                            </div>

Avatar Sizes

For avatars of different sizes, you can add class according to size avatar-lg-size | avatar-md-size | avatar-sm-size | avatar-xs-size (e.g. class="avatar-lg-size")

                        
                            <div class="avatar-lg-size">
                                <img class="avatar-round" src="/assets/avatar-male1.png">
                            </div>
                            <div class="avatar-md-size">
                                <img class="avatar-round" src="/assets/avatar-fm1.png">
                            </div>
                            <div class="avatar-sm-size">
                                <img class="avatar-round" src="/assets/avatar-fm2.png">
                            </div>
                            <div class="avatar-xs-size">
                                <img class="avatar-round" src="/assets/avatar-male2.png">
                            </div>