Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Avatar

Small

# 
<div class="c-avatar c-avatar--small">
    <div class="o-svg-icon o-svg-icon-user o-svg-icon--undefined ">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4ZM6 8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8C18 11.3137 15.3137 14 12 14C8.68629 14 6 11.3137 6 8ZM8 18C6.34315 18 5 19.3431 5 21C5 21.5523 4.55228 22 4 22C3.44772 22 3 21.5523 3 21C3 18.2386 5.23858 16 8 16H16C18.7614 16 21 18.2386 21 21C21 21.5523 20.5523 22 20 22C19.4477 22 19 21.5523 19 21C19 19.3431 17.6569 18 16 18H8Z" fill="#595959" />
        </svg>
    </div>
</div>
+c-avatar({size: 'small'})

Regular

# 
<div class="c-avatar">
    <div class="o-svg-icon o-svg-icon-user o-svg-icon--undefined ">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4ZM6 8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8C18 11.3137 15.3137 14 12 14C8.68629 14 6 11.3137 6 8ZM8 18C6.34315 18 5 19.3431 5 21C5 21.5523 4.55228 22 4 22C3.44772 22 3 21.5523 3 21C3 18.2386 5.23858 16 8 16H16C18.7614 16 21 18.2386 21 21C21 21.5523 20.5523 22 20 22C19.4477 22 19 21.5523 19 21C19 19.3431 17.6569 18 16 18H8Z" fill="#595959" />
        </svg>
    </div>
</div>
+c-avatar({})

Image

#
avatar 
<div class="c-avatar c-avatar--img">
    <img src="http://placekitten.com/500/500" alt="avatar" />
</div>
+c-avatar({img: 'http://placekitten.com/500/500', alt: 'avatar'})

Avatar and text

#

John Doe

<div class="c-avatar-and-text">
    <div class="c-avatar c-avatar--small">
        <div class="o-svg-icon o-svg-icon-user o-svg-icon--undefined ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4ZM6 8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8C18 11.3137 15.3137 14 12 14C8.68629 14 6 11.3137 6 8ZM8 18C6.34315 18 5 19.3431 5 21C5 21.5523 4.55228 22 4 22C3.44772 22 3 21.5523 3 21C3 18.2386 5.23858 16 8 16H16C18.7614 16 21 18.2386 21 21C21 21.5523 20.5523 22 20 22C19.4477 22 19 21.5523 19 21C19 19.3431 17.6569 18 16 18H8Z" fill="#595959" />
            </svg>
        </div>
    </div>
    <div class="c-avatar-and-text__text">
        <p>John Doe</p>
    </div>
</div>
.c-avatar-and-text
    +c-avatar({size: 'small'})
    .c-avatar-and-text__text
        p John Doe

Initials

#
JD 
<div class="c-avatar">JD
</div>
+c-avatar({}) JD

Possible parameters for avatars

Parameters Type Possible values Description
img string Determines if an image is set to an avatar.
alt string Determines if an alt tag is set to an avatar.
icon string See icon style guide for available icons. This parameter is used for the icon. If an icon is not set, a fallback icon is rendered.
size string small Determines the size of the avatar
href string This can be any url or id. If this parameter is used then this avatar will automatically become a link.