Windy CSS styleguide

3.2 #components.avatar-wrapper .avatar-wrapper

Toggle example guides Toggle HTML markup

Complete avatar picture, witch Premium and number badge, whose size can be modified.

    <div class="avatar-wrapper size-m">
        <img class="avatar" src="...">
        <div class="avatar-wrapper__badge">5</div>
        <div class="avatar-wrapper__premium-logo" />
    </div>
Examples
Default styling
Users username
5
.size-s
12px
Users username
5
.size-m
14px
Users username
5
.size-l
16px
Users username
5
Markup 
<div style="margin: 20px; display: block;">
            <div class="avatar-wrapper [modifier class]">
                <img class="avatar"
                    src="https://community.windy.com/assets/uploads/profile/603905-profileavatar.png"
                    alt="Users username" />
                <div class="avatar-wrapper__badge">5</div>
                <div class="avatar-wrapper__premium-logo" />
        </div>
        </div>
Source: src/css/components/avatar.less, line 27