How To

As the avatar is a completely customizable and integral component, this section shows some of the customization and integration of avatar with other components.

Customize avatars

Color customization

The avatar comes with default background color (grey). This can be easily customized to desired color by adding custom class or directly selecting the avatar class from the CSS.

Source
Preview
app.vue
<template>
    <div id='element'>
        <span class="e-avatar e-avatar-xlarge e-avatar-circle green">AJ</span>
        <span class="e-avatar e-avatar-xlarge e-avatar-circle violet">JK</span>
        <span class="e-avatar e-avatar-xlarge e-avatar-circle rose">EL</span>
        <span class="e-avatar e-avatar-xlarge e-avatar-circle blue">SR</span>
        <span class="e-avatar e-avatar-xlarge e-avatar-circle red">PD</span>
    </div>
</template>
<script>
import Vue from "vue";

export default {
  data() {
    return {};
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
    #element {
        display: flex;
        width: 400px;
        margin: 100px auto;
        border-radius: 3px;
        justify-content: center;
    }

    .e-avatar {
        margin: 2px;
    }

    .e-avatar.green {
        background-color: #87eb87;
    }

    .e-avatar.violet {
        background-color: #ee82ee;
    }

    .e-avatar.blue {
        background-color: #7171e4;
    }

    .e-avatar.red {
        background-color: #d86e6e;
    }

    .e-avatar.rose {
        background-color: #bc8f8f;
    }
</style>

Customize avatar sizes

Even though the avatar comes with five predefined sizes, sometimes it’s not enough. So, the avatar is designed in such a way that the width and height will be relative to font-size. By changing the font-size of the avatar element, you can change the width and height automatically.

Source
Preview
app.vue
<template>
    <div id='element'>
        <span class="e-avatar">26px</span>
        <span class="e-avatar">24px</span>
        <span class="e-avatar">22px</span>
        <span class="e-avatar">20px</span>
        <span class="e-avatar">18px</span>
    </div>
</template>
<script>
import Vue from "vue";

export default {
  data() {
    return {};
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
    #element {
        display: block;
        width: 400px;
        margin: 100px auto;
        border-radius: 3px;
    }

    #element :nth-child(5) {
        font-size: 18px;
    }

    #element :nth-child(4) {
        font-size: 20px;
    }

    #element :nth-child(3) {
        font-size: 22px;
    }

    #element :nth-child(2) {
        font-size: 24px;
    }

    #element :nth-child(1) {
        font-size: 26px;
    }
</style>

Use various media in avatar

Avatars can be used with a wide variety of media formats like SVG, font-icons, images, letters, words, etc. Some of them are given below.

Source
Preview
app.vue
<template>
    <div id='element'>
        <div class="sample_container avatar-types">
            <div class="avatar-block">
                <!-- Card Component -->
                <div class="e-card e-avatar-showcase">
                    <div class="e-card-content">
                        <!-- XLarge Circle Avatar Component -->
                        <div class="e-avatar e-avatar-xlarge e-avatar-circle">
                          <img class="image" src="./pic01.png" alt="image"/>
                        </div>
                    </div>
                    <div class="e-card-content">
                        <div>Image</div>
                    </div>
                </div>
            </div>

            <div class="avatar-block">
                <!-- Card Component -->
                <div class="e-card e-avatar-showcase">
                    <div class="e-card-content">
                        <!-- XLarge Circle Avatar Component -->
                        <div class="e-avatar e-avatar-xlarge e-avatar-circle">
                            <div class="svg_icons chrome"></div>
                        </div>
                    </div>
                    <div class="e-card-content">
                        <div>SVG</div>
                    </div>
                </div>
            </div>

            <div class="avatar-block">
                <!-- Card Component -->
                <div class="e-card e-avatar-showcase">
                    <div class="e-card-content">
                        <!-- XLarge Circle Avatar Component -->
                        <div class="e-avatar e-avatar-xlarge e-avatar-circle">GR</div>
                    </div>
                    <div class="e-card-content">
                        <div>Initial</div>
                    </div>
                </div>
            </div>

            <div class="avatar-block">
                <!-- Card Component -->
                <div class="e-card e-avatar-showcase">
                    <div class="e-card-content">
                        <!-- XLarge Circle Avatar Component -->
                        <div class="e-avatar e-avatar-xlarge e-avatar-circle">
                            <div class="e-people icons"></div>
                        </div>
                    </div>
                    <div class="e-card-content">
                        <div>Font Icon</div>
                    </div>
                </div>
            </div>

            <div class="avatar-block">
                <!-- Card Component -->
                <div class="e-card e-avatar-showcase">
                    <div class="e-card-content">
                        <!-- XLarge Circle Avatar Component -->
                        <div class="e-avatar e-avatar-xlarge e-avatar-circle">User</div>
                    </div>
                    <div class="e-card-content">
                        <div>Word</div>
                    </div>
                </div>
            </div>

            <div class="avatar-block">
                <!-- Card Component -->
                <div class="e-card e-avatar-showcase">
                    <div class="e-card-content">
                        <!-- XLarge Circle Avatar Component -->
                        <div class="e-avatar e-avatar-xlarge e-avatar-circle custom">
                            <div class="e-people icons"></div>
                        </div>
                    </div>
                    <div class="e-card-content">
                        <div>Custom</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from "vue";

export default {
  data() {
    return {};
  }
}
</script>
<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
    #element {
        width: auto;
        margin: auto;
        border-radius: 3px;
        justify-content: center;
    }


    /* Media Quries for various devices */

    @media only screen and (max-width: 965px) {
        .sample_container.avatar-types {
            max-width: 265px;
            margin: auto;
            margin-top: 0;
        }
        .e-avatar-showcase.e-card {
            width: 120px;
        }
    }

    @media only screen and (min-width: 965px) {
        .sample_container.avatar-types {
            max-width: 488px;
            margin: auto;
            margin-top: 35px;
        }
        .e-avatar-showcase.e-card {
            width: 150px;
        }
    }

    .sample_container.avatar-types .avatar-block {
        display: inline-block;
        vertical-align: top;
    }

    /* Avatar image source in 'background-image' property */

     .e-avatar img.image {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    /* SVG Icons */

    .chrome {
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M16.033 11.049a5.155 5.155 0 1 1 0 10.312 5.156 5.156 0 0 1 0-10.312zM16.124 0c1.281-.003 9.659.318 14.268 9.043h-.016l.01.018c.33.578 3.745 6.94-.485 14.969 0 0-4.215 8.107-14.565 7.968l-.452-.012-.004.007-.004.007.02-.037c.564-.98 5.112-8.884 6.357-11.067l.016-.028.007-.008.04-.069.11-.127a7.085 7.085 0 0 0 1.457-2.967l.01-.046.035-.151c.088-.424.148-.944.128-1.549l-.006-.117v-.004l-.007-.143-.006-.07-.005-.079-.012-.116v-.01l-.001-.008-.016-.158a7.2 7.2 0 0 0-.096-.572l-.018-.081-.013-.064a9.801 9.801 0 0 0-.692-2.016c-.165-.243-.332-.489-.512-.733l-.142-.187 8.728-2.554s-10.538-.01-13.018-.001l.021.005H16.642l-.14-.013a7.034 7.034 0 0 0-1.132-.003l-.167.016h-.047l-.034-.001c-.193.002-1.213.045-2.492.764l-.005.003-.033.016a7.158 7.158 0 0 0-3.25 3.533l-.059.148-6.485-6.404s4.74 8.311 6.165 10.779l.065.113.023.088a7.14 7.14 0 0 0 7.777 5.118l.144-.02L14.854 32h-.027c-.667-.005-7.894-.234-12.744-7.906 0 0-4.925-7.698.37-16.573l.252-.411.001-.002C2.822 6.904 6.58.374 15.958.003c0 0 .057-.003.166-.003z'/%3E%3C/svg%3E") no-repeat 100% 100%;
    }

    .svg_icons {
        width: 32px;
        height: 32px;
        display: inline-block;
    }

    /* Card Customization */

    .e-avatar-showcase.e-card {
        height: 113px;
        padding: 5px;
        margin: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        border-radius: 8px;
    }

    .e-avatar-showcase.e-card .e-card-header .e-card-header-title {
        align-self: center;
        font-size: 18px;
        letter-spacing: 1px;
        text-shadow: #eaeaea 1px 1px 2px;
    }

    .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {
        color: rgba(0, 0, 0, 0.75);
        white-space: pre-line;
        font-size: 14px;
        text-shadow: #eaeaea 1px 1px 2px;
    }

    .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {
        margin: 0;
    }

    .e-avatar-showcase.e-card .e-card-content {
        align-self: center;
        padding: 10px 0 10px 0;
        overflow: visible;
    }

    .e-avatar-showcase.e-card .e-card-content .e-avatar {
        font-size: 18px;
    }

    /* Font Icons */

    @font-face {
        font-family: 'Contacts';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRgAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmiAnWagAAAcwAAADwaGVhZBD04psAAADQAAAANmhoZWEHiwNuAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQAwAHgAAAHEAAAACG1heHABDwA1AAABCAAAACBuYW1lby+ImAAAArwAAAIxcG9zdGUbI4AAAATwAAAAOwABAAADUv9qAFoEAAAAAAAD3QABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAWW9ja18PPPUACwPoAAAAANb8zuYAAAAA1vzO5gAAAAAD3QPqAAAACAACAAAAAAAAAAEAAAADACkAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAADAAeAACAAAAAAO+A+oADQAZAAA3FBYXIT4BNS4BJyEOARMeARc+ATcuAScOAS4YFwMzFxgDq4H+zYGr4QOCY2KCAwOCYmGCnCtOISFOK3qiAwOiAe1igwICg2JjggICggAAAAACAAAAAAPdA+oAFAAoAAABDgEHIicjDgEHLgEnLgEnPgE3HgEFFBYfARYfATcXFhc2JDcmJCcGBAOkBfK3KioXEFcpBBEMRUsBBfK3tvL8cVRLDggBBsQKLDDPARMFBf7tz87+7QI+ndEEBwI/Izh2DS+RVZ3RBATRnWCmN3BIETecAgcBBPK1tfIEBPIAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQABAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACwAMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQADABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAEECQALACQBLyBDb250YWN0c1JlZ3VsYXJDb250YWN0c0NvbnRhY3RzVmVyc2lvbiAxLjBDb250YWN0c0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQwBvAG4AdABhAGMAdABzAFIAZQBnAHUAbABhAHIAQwBvAG4AdABhAGMAdABzAEMAbwBuAHQAYQBjAHQAcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAQwBvAG4AdABhAGMAdABzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQABHVzZXIKY2hhdC0wMS13ZgAAAA==) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .people,
    .e-people {
        font-family: 'Contacts';
    }

    .e-people:before {
        content: '\e700';
    }

    .e-avatar .e-people.icons {
        font-size: 24px;
    }

    /* Custom Avatar Background Color */

    .e-avatar.custom {
        background-color: blueviolet;
    }
</style>

Integrate avatars

Avatar can be integrated into various components to make a wide variety of applications. Some of the integrations are shown in the following section.

Listview

Avatar is integrated into the listview to create contacts applications. The xsmall size avatar is used to match the size of the list item. Letters and images are also used as avatar content.

Source
Preview
app.vue
<template>
    <div id='element'>
        <!-- Listview element -->
        <ejs-listview id='letterAvatarList' :dataSource='dataSource' :sortOrder='sortOrder' showHeader='true'
        headerTitle='Contacts' :template='listTemplate' >
    </ejs-listview>
    </div>
</template>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);

var listtemplateVue = Vue.component("demo", {
  template: ` <div class="listWrapper">
        <span :class="['e-avatar e-avatar-small e-avatar-circle']" v-if="data.avatar !== ''">{{data.avatar}}</span>
        <span :class="[data.pic + ' e-avatar e-avatar-small e-avatar-circle']" v-if="data.pic !== '' "> </span>
        <span class="list-text">{{data.text}}</span>
    </div>`,
  data() {
    return {
      data: {}
    };
  }
});

export default {
  data() {
    return {
        dataSource: [
            { id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },
            { id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },
            { id: 's_05', text: 'John', pic: 'pic01', avatar: '' },
            { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
            { id: 's_06', text: 'Michael', pic: 'pic02', avatar: '' },
            { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
            { id: 's_08', text: 'Margaret', avatar: 'M', pic: '' }
        ],
         listTemplate: function () {
            return { template : listtemplateVue}
        },
        sortOrder: 'Ascending'
    };
  }
}
</script>
<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
    #element {
        width: 400px;
        margin: auto;
        border-radius: 3px;
        justify-content: center;
    }

    /* Listview Customization */

    #letterAvatarList {
        max-width: 350px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }

    #letterAvatarList .listWrapper {
        width: inherit;
        height: inherit;
        position: relative;
    }

    #letterAvatarList .e-list-header {
        height: 54px;
    }

    .material #letterAvatarList .e-list-header .e-text {
        line-height: 22px;
    }

    .fabric #letterAvatarList .e-list-header .e-text {
        line-height: 22px;
    }

    .bootstrap #letterAvatarList .e-list-header .e-text {
        line-height: 13px;
    }

    .highcontrast #letterAvatarList .e-list-header .e-text {
        line-height: 20px;
    }

    #letterAvatarList .e-list-item {
        cursor: pointer;
        height: 50px;
        line-height: 44px;
        border: 0;
    }

    /* Badge Positioning */

    #letterAvatarList .e-badge {
        margin-top: 12px;
    }

    #letterAvatarList .listWrapper .text {
        width: 60%;
        display: inline-block;
        vertical-align: middle;
        margin: 0 50px;
    }

    /* Avatar Positioning */

    #letterAvatarList .listWrapper .e-avatar {
        position: absolute;
        top: calc(100% - 40px);
        font-size: 10px;
        left: 5px;
    }

    /* Avatar Background Customization */

    #letterAvatarList .e-list-item:nth-child(1) .e-avatar {
        background-color: #039BE5;
    }

    #letterAvatarList .e-list-item:nth-child(3) .e-avatar {
        background-color: #E91E63;
    }

    #letterAvatarList .e-list-item:nth-child(5) .e-avatar {
        background-color: #009688;
    }

    /* Avatar images using 'background-image' property */

    .pic01 {
        background-image: url(./pic01.png);
    }

    .pic02 {
        background-image: url(./pic02.png);
    }

    .pic03 {
        background-image: url(./pic03.png);
    }

    .pic04 {
        background-image: url(./pic04.png);
    }
</style>

Badge

The badge is dependent and supportive component, and it can be used with avatar to create a notification avatar. The default avatar (.e-avatar) and circle avatar (.e-avatar-circle) have been used with notification badges (.e-badge-notification) in the following sample.

Source
Preview
app.vue
<template>
    <div id='element'>
        <div class="sample_container avatar-badge">
            <div class="avatar-block">
                <!-- Card Component -->
                <div class="e-card e-avatar-showcase">
                    <div class="e-card-content">
                        <div class="avatar-sub-block">
                            <!-- xSmall Avatar-->
                            <div class="e-avatar e-avatar-xsmall">
                                <img src="./pic01.png" alt="profile_pic">
                            </div>
                            <!-- Notification Badge -->
                            <span class="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">6</span>
                        </div>
                        <div class="avatar-sub-block">
                            <!-- Small Avatar-->
                            <div class="e-avatar e-avatar-small">
                                <img src="./pic01.png" alt="profile_pic">
                            </div>
                            <!-- Notification Badge -->
                            <span class="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">12</span>
                        </div>
                        <div class="avatar-sub-block">
                            <!-- Avatar-->
                            <div class="e-avatar">
                                <img src="./pic01.png" alt="profile_pic">
                            </div>
                            <!-- Notification Badge -->
                            <span class="e-badge e-badge-primary e-badge-overlap e-badge-notification">46</span>
                        </div>
                        <div class="avatar-sub-block">
                            <!-- Large Avatar-->
                            <div class="e-avatar e-avatar-large">
                                <img src="./pic01.png" alt="profile_pic">
                            </div>
                            <!-- Notification Badge -->
                            <span class="e-badge e-badge-primary e-badge-overlap e-badge-notification">82</span>
                        </div>
                        <div class="avatar-sub-block">
                            <!-- xLarge Avatar-->
                            <div class="e-avatar e-avatar-xlarge">
                                <img src="./pic01.png" alt="profile_pic">
                            </div>
                            <!-- Notification Badge -->
                            <span class="e-badge e-badge-primary e-badge-overlap e-badge-notification">99+</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="circleAvatar avatar-block">
                <!-- Card Component -->
                <div class="e-card e-avatar-showcase">
                    <div class="e-card-content">
                        <div class="avatar-sub-block">
                            <!-- xSmall Circle Avatar-->
                            <div class="e-avatar e-avatar-circle e-avatar-xsmall">
                                <img src="./pic01.png" alt="profile_pic">
                            </div>
                            <!-- Notification Badge -->
                            <span class="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">6</span>
                        </div>
                        <div class="avatar-sub-block">
                            <!-- Small Circle Avatar-->
                            <div class="e-avatar e-avatar-circle e-avatar-small">
                                <img src="./pic01.png" alt="profile_pic">
                            </div>
                            <!-- Notification Badge -->
                            <span class="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">12</span>
                        </div>
                        <div class="avatar-sub-block">
                            <!-- Circle Avatar-->
                            <div class="e-avatar e-avatar-circle">
                                <img src="./pic01.png" alt="profile_pic">
                            </div>
                            <!-- Notification Badge -->
                            <span class="e-badge e-badge-primary e-badge-overlap e-badge-notification">46</span>
                        </div>
                        <div class="avatar-sub-block">
                            <!-- Large Circle Avatar-->
                            <div class="e-avatar e-avatar-circle e-avatar-large">
                                <img src="./pic01.png" alt="profile_pic">
                            </div>
                            <!-- Notification Badge -->
                            <span class="e-badge e-badge-primary e-badge-overlap e-badge-notification">82</span>
                        </div>
                        <div class="avatar-sub-block">
                            <!-- xLarge Circle Avatar-->
                            <div class="e-avatar e-avatar-circle e-avatar-xlarge">
                                <img src="./pic01.png" alt="profile_pic">
                            </div>
                            <!-- Notification Badge -->
                            <span class="e-badge e-badge-primary e-badge-overlap e-badge-notification">99+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from "vue";

export default {
  data() {
    return {};
  }
}
</script>
<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
    #element {
        display: block;
        margin: auto;
        border-radius: 3px;
        justify-content: center;
    }

    .sample_container.avatar-badge .avatar-sub-block {
        display: inline-block;
        position: relative;
        margin: 7px
    }

    .sample_container.avatar-badge .avatar-block {
        display: inline-block;
        vertical-align: top;
    }

    /* Media Queries for various devices */

    @media only screen and (max-width: 965px) {
        .sample_container.avatar-badge {
            max-width: 332px;
            margin: auto;
            margin-top: 0;
        }
        .circleAvatar {
            margin-top: 15px;
        }
        .e-avatar-showcase.e-card {
            width: 320px;
        }
    }

    @media only screen and (min-width: 965px) {
        .sample_container.avatar-badge {
            max-width: 825px;
            margin: auto;
            margin-top: 70px;
        }
        .e-avatar-showcase.e-card {
            width: 400px;
        }
    }

    .e-avatar.image {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    /* Card Customization */

    .e-avatar-showcase.e-card {
        height: 140px;
        padding: 4px;
        margin: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        border-radius: 8px;
    }

    .e-avatar-showcase.e-card .e-card-header .e-card-header-title {
        align-self: center;
        font-size: 18px;
        letter-spacing: 1px;
        text-shadow: #eaeaea 1px 1px 2px;
    }

    .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {
        color: rgba(0, 0, 0, 0.75);
        white-space: pre-line;
        font-size: 14px;
        text-shadow: #eaeaea 1px 1px 2px;
    }

    .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {
        margin: 0;
    }

    .e-avatar-showcase.e-card .e-card-content {
        align-self: center;
        padding: 10px 11px 10px 0px;
        color: rgba(0, 0, 0, 0.75);
        overflow: visible;
    }
</style>