Avatar

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Usage

The use of the avatar is to show a representation of the logged in user.

Placement

The avatar can be found in two places. In the top center of the Rundown panel on the dashboard. It is also located within the profile file drop down. The size of the avatar changes depending on the device. For desktop the dimensions are 80px by 80px for mobile the dimensions are 38px by 38px. For both dimensions there is a margin-right 16px to creating spacing.

The mobile version will appear when the window size is under 767 pixels.

Avatar

CK 
<Avatar-Default title="CK"/>
View Template Code
<template>
    <div class="avatar">
        {{title}}
    </div>
</template>

<script>
    export default {
        props: ['title']
    }
</script>

<style scoped lang="scss">
    @import "styles/_variables";
    .avatar {
        background-color: $lightest;
        text-align: center;
        position: relative;
        height: 80px;
        min-width: 80px;
        max-width: 80px;
        border-radius: 50%;
        font-size: 40px;
        line-height: 80px;
        color: $nav-blue;
        margin-right: 16px;
    }

    @media only screen and (max-width: 767px) {
        .avatar {
            height: 38px;
            min-width: 38px;
            max-width: 38px;
            line-height: 38px;
            font-size: 16px;
        }
    }
</style>
Last Updated: 2/1/2019, 11:08:07 AM

← Badges →