avatars

different sizes

                
                <div>
                    <img src='../../assets/avatar-1.jpg' class='brd-full img-fit-cover' />
                    <img src='../../assets/avatar-2.jpg' class='brd-full img-fit-cover' />
                    <img src='../../assets/avatar-3.jpg' class='brd-full img-fit-cover' />
                </div>
                
            

avatar group

                
                <div class='dis-inblock'>
                    <img src='../../assets/avatar-1.jpg' class='brd-full b-solid b-secondary img-fit-cover avt-overlap-xlg' />
                    <img src='../../assets/avatar-2.jpg' class='brd-full b-solid b-secondary img-fit-cover avt-overlap-xlg' />
                    <img src='../../assets/avatar-3.jpg' class='brd-full b-solid b-secondary img-fit-cover avt-overlap-xlg' />
                </div>
                
            

avatar with badge

                
                <div class='dis-inblock pos-relative'>
                    <img src='../../assets/avatar-2.jpg' class='brd-full img-fit-cover' />
                    <div class='bg-success brd-full badge-size-s pos-absolute br-5'></div>
                </div>
                
            

avatar css

                                    
                .avt-overlap-xs {
                    margin-left: -0.5rem;
                }

                .avt-overlap-s {
                    margin-left: -1rem;
                }

                .avt-overlap-md {
                    margin-left: -1.5rem;
                }

                .avt-overlap-lg {
                    margin-left: -2rem;
                }

                .avt-overlap-xlg {
                    margin-left: -3rem;
                }

                .avt-overlap-xxlg {
                    margin-left: -4rem;
                }