Avatar customization in React Avatar component
7 Oct 202524 minutes to read
The React Avatar component offers extensive customization options including colors, sizes, and media formats. This section demonstrates how to modify the Avatar’s appearance to match specific design requirements and integrate various content types.
Color customization
The Avatar displays with a default (Grey) background color. Customize this to any desired color by adding a custom CSS class or directly targeting the avatar class in the stylesheet.
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
function ReactApp() {
return (<div>
<span className="e-avatar e-avatar-xlarge e-avatar-circle green">AJ</span>
<span className="e-avatar e-avatar-xlarge e-avatar-circle violet">JK</span>
<span className="e-avatar e-avatar-xlarge e-avatar-circle rose">EL</span>
<span className="e-avatar e-avatar-xlarge e-avatar-circle blue">SR</span>
<span className="e-avatar e-avatar-xlarge e-avatar-circle red">PD</span>
</div>);
}
export default ReactApp;
ReactDOM.render(<ReactApp />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
function ReactApp() {
return (
<div>
<span className="e-avatar e-avatar-xlarge e-avatar-circle green">AJ</span>
<span className="e-avatar e-avatar-xlarge e-avatar-circle violet">JK</span>
<span className="e-avatar e-avatar-xlarge e-avatar-circle rose">EL</span>
<span className="e-avatar e-avatar-xlarge e-avatar-circle blue">SR</span>
<span className="e-avatar e-avatar-xlarge e-avatar-circle red">PD</span>
</div>
);
}
export default ReactApp;
ReactDOM.render(<ReactApp/>, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Avatar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}
#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;
}Customize Avatar sizes
Although the Avatar comes with five predefined sizes, sometimes these are not sufficient. 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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
function ReactApp() {
return (<div>
<span className="e-avatar e-avatar-xlarge"></span>
<span className="e-avatar e-avatar-large"></span>
<span className="e-avatar"></span>
<span className="e-avatar e-avatar-small"></span>
<span className="e-avatar e-avatar-xsmall"></span>
</div>);
}
export default ReactApp;
ReactDOM.render(<ReactApp />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
function ReactApp() {
return (
<div>
<span className="e-avatar e-avatar-xlarge"></span>
<span className="e-avatar e-avatar-large"></span>
<span className="e-avatar"></span>
<span className="e-avatar e-avatar-small"></span>
<span className="e-avatar e-avatar-xsmall"></span>
</div>
);
}
export default ReactApp;
ReactDOM.render(<ReactApp/>, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Avatar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}
#element {
display: block;
width: 400px;
margin: 100px auto;
border-radius: 3px;
}
.e-avatar {
background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/2.png);
margin: 2px;
}
#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;
}Using various media formats
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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
function ReactApp() {
return (<div>
<div className="sample_container avatar-types">
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* XLarge Circle Avatar Component */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">
<img className="image" src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="avatar"/>
</div>
</div>
<div className="e-card-content">
<div>Image</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* XLarge Circle Avatar Component */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">
<div className="svg_icons chrome"></div>
</div>
</div>
<div className="e-card-content">
<div>SVG</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* XLarge Circle Avatar Component */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">GR</div>
</div>
<div className="e-card-content">
<div>Initial</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* XLarge Circle Avatar Component */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">
<div className="e-people icons"></div>
</div>
</div>
<div className="e-card-content">
<div>Font Icon</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* XLarge Circle Avatar Component */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">User</div>
</div>
<div className="e-card-content">
<div>Word</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* XLarge Circle Avatar Component */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle custom">
<div className="e-people icons"></div>
</div>
</div>
<div className="e-card-content">
<div>Custom</div>
</div>
</div>
</div>
</div>
</div>);
}
export default ReactApp;
ReactDOM.render(<ReactApp />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
function ReactApp() {
return (
<div>
<div className="sample_container avatar-types">
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* XLarge Circle Avatar Component */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">
<img className="image" src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="avatar" />
</div>
</div>
<div className="e-card-content">
<div>Image</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* XLarge Circle Avatar Component */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">
<div className="svg_icons chrome"></div>
</div>
</div>
<div className="e-card-content">
<div>SVG</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* XLarge Circle Avatar Component */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">GR</div>
</div>
<div className="e-card-content">
<div>Initial</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* XLarge Circle Avatar Component */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">
<div className="e-people icons"></div>
</div>
</div>
<div className="e-card-content">
<div>Font Icon</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* XLarge Circle Avatar Component */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle">User</div>
</div>
<div className="e-card-content">
<div>Word</div>
</div>
</div>
</div>
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{/* XLarge Circle Avatar Component */}
<div className="e-avatar e-avatar-xlarge e-avatar-circle custom">
<div className="e-people icons"></div>
</div>
</div>
<div className="e-card-content">
<div>Custom</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default ReactApp;
ReactDOM.render(<ReactApp/>, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Avatar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}
#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;
}Dynamic Avatar rendering from data source
We can render Avatar component dynamically from a data-source. In this sample we have rendered the Avatar component using a data-source which contains the image source in different sizes dynamically. This is applicable also for data-source from the server or remote data or AJAX. We have also rendered the Avatar using CSS property background-image and using image tag.
import * as React from "react";
import * as ReactDOM from "react-dom";
import './index.css';
function ReactApp() {
let dataSource = [
{ id: '1', src: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', size: 'e-avatar-xsmall' },
{ id: '2', src: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', size: 'e-avatar-small' },
{ id: '3', src: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', size: 'e-avatar' },
{ id: '4', src: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', size: 'e-avatar-large' },
{ id: '5', src: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', size: 'e-avatar-xlarge' }
];
return (<div className='control-pane'>
<div className="sample_container avatar-badge">
<div className="avatar-block">
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{dataSource.map(function (item) {
return (<div key={item.id} className={`e-avatar e-avatar-circle ${item.size}`} style={{ backgroundImage: `url(${item.src})` }}></div>);
})}
</div>
<div className="e-card-content">
<div>Using <code>background-image</code> property</div>
</div>
</div>
</div>
<div className="circleAvatar avatar-block">
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{dataSource.map(function (item) {
return (<div key={item.id} className={`e-avatar e-avatar-circle ${item.size}`}>
<img src={item.src} />
</div>);
})}
</div>
<div className="e-card-content">
<div>Using <code>img</code> tag</div>
</div>
</div>
</div>
</div>
</div>);
}
export default ReactApp;
ReactDOM.render(<ReactApp />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
function ReactApp() {
let dataSource: { [key: string]: string }[] = [
{ id: '1', src: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', size: 'e-avatar-xsmall' },
{ id: '2', src: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', size: 'e-avatar-small' },
{ id: '3', src: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', size: 'e-avatar' },
{ id: '4', src: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', size: 'e-avatar-large' },
{ id: '5', src: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', size: 'e-avatar-xlarge' }
];
return (
<div className='control-pane'>
<div className="sample_container avatar-badge">
<div className="avatar-block">
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{dataSource.map(function (item) {
return (<div key={item.id} className={`e-avatar e-avatar-circle ${item.size}`} style={{ backgroundImage: `url(${item.src})` }}></div>)
})}
</div>
<div className="e-card-content">
<div>Using <code>background-image</code> property</div>
</div>
</div>
</div>
<div className="circleAvatar avatar-block">
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
{dataSource.map(function (item) {
return (<div key={item.id} className={`e-avatar e-avatar-circle ${item.size}`} >
<img src={item.src} />
</div>)
})}
</div>
<div className="e-card-content">
<div>Using <code>img</code> tag</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default ReactApp;
ReactDOM.render(<ReactApp />, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Avatar Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-notifications/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}
#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;
}
.e-avatar {
margin: 2px;
}
/* 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;
}
}
/* 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-content {
align-self: center;
padding: 10px 11px 10px 0px;
color: rgba(0, 0, 0, 0.75);
overflow: visible;
}