mixin view-avatar 
    +view('avatar', 'Avatar')
        each size in ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']
            .c-box(style={ display: 'flex', gap: '.3em' })
                +avatar(size=size href='#')
                    = 'Vo'
                +avatar(size=size status='green' hue=45)
                    = 'lp'
                +avatar(size=size src='avatar.png')
                +avatar(size=size src='avatar.png' status='red')

        each size in ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']
            .c-box(style={ display: 'flex', gap: '.3em' })
                +avatar(circle=true size=size href='#')
                    = 'Vo'
                +avatar(circle=true size=size status='green' hue=45)
                    = 'lp'
                +avatar(circle=true size=size src='avatar.png')
                +avatar(circle=true size=size src='avatar.png' status='red')