<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/gcstaublin/pen/OgLbZE?depth=everything&limit=all&order=popularity&page=8&q=avatar&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://s3.amazonaws.com/hudl-ui/uniform-ui-css/0.11.7/uniform-ui-ALPHA.css.gz'>
<style class="cp-pen-styles">.uni-avatar {
border-color: rgba(0, 0, 0, 0.1);
border-color: rgba(0, 0, 0, 0.1);
color: rgba(19, 41, 63, 0.4);
color: rgba(19, 41, 63, 0.4);
position: relative;
display: inline-block;
vertical-align: middle;
overflow: visible;
border-radius: 50%;
border-style: solid;
}
[class*='t-de'] .uni-avatar {
border-color: rgba(155, 155, 155, 0.1);
}
[class*='t-le'] .uni-avatar {
border-color: rgba(0, 0, 0, 0.1);
}
.uni-env--dark .uni-avatar {
border-color: rgba(155, 155, 155, 0.1);
}
.uni-env--light .uni-avatar {
border-color: rgba(0, 0, 0, 0.1);
}
[class*='uni-env--'] .uni-env--dark .uni-avatar {
border-color: rgba(155, 155, 155, 0.1);
}
[class*='uni-env--'] .uni-env--light .uni-avatar {
border-color: rgba(0, 0, 0, 0.1);
}
[class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .uni-avatar {
border-color: rgba(155, 155, 155, 0.1);
}
.uni-avatar:hover {
border-color: rgba(19, 41, 63, 0.4);
border-color: rgba(19, 41, 63, 0.4);
}
[class*='t-de'] .uni-avatar:hover {
border-color: rgba(230, 242, 255, 0.4);
}
[class*='t-le'] .uni-avatar:hover {
border-color: rgba(19, 41, 63, 0.4);
}
.uni-env--dark .uni-avatar:hover {
border-color: rgba(230, 242, 255, 0.4);
}
.uni-env--light .uni-avatar:hover {
border-color: rgba(19, 41, 63, 0.4);
}
[class*='uni-env--'] .uni-env--dark .uni-avatar:hover {
border-color: rgba(230, 242, 255, 0.4);
}
[class*='uni-env--'] .uni-env--light .uni-avatar:hover {
border-color: rgba(19, 41, 63, 0.4);
}
[class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .uni-avatar:hover {
border-color: rgba(230, 242, 255, 0.4);
}
.uni-avatar .uni-avatar__content-container,
.uni-avatar .uni-avatar__img {
border-color: rgba(255, 255, 255, 0.96);
border-color: rgba(255, 255, 255, 0.96);
color: rgba(19, 41, 63, 0.8);
color: rgba(19, 41, 63, 0.8);
}
[class*='t-de'] .uni-avatar .uni-avatar__content-container, [class*='t-de']
.uni-avatar .uni-avatar__img {
border-color: rgba(0, 0, 0, 0.1);
}
[class*='t-le'] .uni-avatar .uni-avatar__content-container, [class*='t-le']
.uni-avatar .uni-avatar__img {
border-color: rgba(255, 255, 255, 0.96);
}
.uni-env--dark .uni-avatar .uni-avatar__content-container, .uni-env--dark
.uni-avatar .uni-avatar__img {
border-color: rgba(0, 0, 0, 0.1);
}
.uni-env--light .uni-avatar .uni-avatar__content-container, .uni-env--light
.uni-avatar .uni-avatar__img {
border-color: rgba(255, 255, 255, 0.96);
}
[class*='uni-env--'] .uni-env--dark .uni-avatar .uni-avatar__content-container, [class*='uni-env--'] .uni-env--dark
.uni-avatar .uni-avatar__img {
border-color: rgba(0, 0, 0, 0.1);
}
[class*='uni-env--'] .uni-env--light .uni-avatar .uni-avatar__content-container, [class*='uni-env--'] .uni-env--light
.uni-avatar .uni-avatar__img {
border-color: rgba(255, 255, 255, 0.96);
}
[class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .uni-avatar .uni-avatar__content-container, [class*='uni-env--'] [class^='uni-env--'] .uni-env--dark
.uni-avatar .uni-avatar__img {
border-color: rgba(0, 0, 0, 0.1);
}
[class*='t-de'] .uni-avatar .uni-avatar__content-container, [class*='t-de']
.uni-avatar .uni-avatar__img {
color: rgba(230, 242, 255, 0.8);
}
[class*='t-le'] .uni-avatar .uni-avatar__content-container, [class*='t-le']
.uni-avatar .uni-avatar__img {
color: rgba(19, 41, 63, 0.8);
}
.uni-env--dark .uni-avatar .uni-avatar__content-container, .uni-env--dark
.uni-avatar .uni-avatar__img {
color: rgba(230, 242, 255, 0.8);
}
.uni-env--light .uni-avatar .uni-avatar__content-container, .uni-env--light
.uni-avatar .uni-avatar__img {
color: rgba(19, 41, 63, 0.8);
}
[class*='uni-env--'] .uni-env--dark .uni-avatar .uni-avatar__content-container, [class*='uni-env--'] .uni-env--dark
.uni-avatar .uni-avatar__img {
color: rgba(230, 242, 255, 0.8);
}
[class*='uni-env--'] .uni-env--light .uni-avatar .uni-avatar__content-container, [class*='uni-env--'] .uni-env--light
.uni-avatar .uni-avatar__img {
color: rgba(19, 41, 63, 0.8);
}
[class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .uni-avatar .uni-avatar__content-container, [class*='uni-env--'] [class^='uni-env--'] .uni-env--dark
.uni-avatar .uni-avatar__img {
color: rgba(230, 242, 255, 0.8);
}
.uni-avatar .uni-avatar__icon {
color: rgba(19, 41, 63, 0.65);
color: rgba(19, 41, 63, 0.65);
}
[class*='t-de'] .uni-avatar .uni-avatar__icon {
color: rgba(230, 242, 255, 0.65);
}
[class*='t-le'] .uni-avatar .uni-avatar__icon {
color: rgba(19, 41, 63, 0.65);
}
.uni-env--dark .uni-avatar .uni-avatar__icon {
color: rgba(230, 242, 255, 0.65);
}
.uni-env--light .uni-avatar .uni-avatar__icon {
color: rgba(19, 41, 63, 0.65);
}
[class*='uni-env--'] .uni-env--dark .uni-avatar .uni-avatar__icon {
color: rgba(230, 242, 255, 0.65);
}
[class*='uni-env--'] .uni-env--light .uni-avatar .uni-avatar__icon {
color: rgba(19, 41, 63, 0.65);
}
[class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .uni-avatar .uni-avatar__icon {
color: rgba(230, 242, 255, 0.65);
}
.uni-avatar .uni-avatar__img--default {
color: rgba(19, 41, 63, 0.65);
color: rgba(19, 41, 63, 0.65);
}
[class*='t-de'] .uni-avatar .uni-avatar__img--default {
color: rgba(230, 242, 255, 0.65);
}
[class*='t-le'] .uni-avatar .uni-avatar__img--default {
color: rgba(19, 41, 63, 0.65);
}
.uni-env--dark .uni-avatar .uni-avatar__img--default {
color: rgba(230, 242, 255, 0.65);
}
.uni-env--light .uni-avatar .uni-avatar__img--default {
color: rgba(19, 41, 63, 0.65);
}
[class*='uni-env--'] .uni-env--dark .uni-avatar .uni-avatar__img--default {
color: rgba(230, 242, 255, 0.65);
}
[class*='uni-env--'] .uni-env--light .uni-avatar .uni-avatar__img--default {
color: rgba(19, 41, 63, 0.65);
}
[class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .uni-avatar .uni-avatar__img--default {
color: rgba(230, 242, 255, 0.65);
}
[class*='t-de'] .uni-avatar {
color: rgba(230, 242, 255, 0.4);
}
[class*='t-le'] .uni-avatar {
color: rgba(19, 41, 63, 0.4);
}
.uni-env--dark .uni-avatar {
color: rgba(230, 242, 255, 0.4);
}
.uni-env--light .uni-avatar {
color: rgba(19, 41, 63, 0.4);
}
[class*='uni-env--'] .uni-env--dark .uni-avatar {
color: rgba(230, 242, 255, 0.4);
}
[class*='uni-env--'] .uni-env--light .uni-avatar {
color: rgba(19, 41, 63, 0.4);
}
[class*='uni-env--'] [class^='uni-env--'] .uni-env--dark .uni-avatar {
color: rgba(230, 242, 255, 0.4);
}
.uni-avatar--xsm {
width: 1.5rem;
height: 1.5rem;
font-size: 10px;
border-width: 2px;
-webkit-transition: border-width 0.2s ease, border-color 0.6s ease;
transition: border-width 0.2s ease, border-color 0.6s ease;
}
.uni-avatar--xsm:hover {
border-width: 4px;
}
.uni-avatar--xsm .uni-avatar__content-container {
border-width: 1px;
}
.uni-avatar--xsm .uni-avatar__img {
border-width: 1px;
}
.uni-avatar--xsm.uni-avatar--square {
border-radius: 3px;
}
.uni-avatar--xsm.uni-avatar--square .uni-avatar__content-container {
border-radius: 3px;
}
.uni-avatar--xsm.uni-avatar--square .uni-avatar__img {
border-radius: 3px;
}
.uni-avatar--xsm.uni-avatar--square .uni-avatar__img--default {
border-radius: 3px;
}
.uni-avatar--sm {
width: 2rem;
height: 2rem;
font-size: 10px;
border-width: 2px;
-webkit-transition: border-width 0.2s ease, border-color 0.6s ease;
transition: border-width 0.2s ease, border-color 0.6s ease;
}
.uni-avatar--sm:hover {
border-width: 4px;
}
.uni-avatar--sm .uni-avatar__content-container {
border-width: 1px;
}
.uni-avatar--sm .uni-avatar__img {
border-width: 1px;
}
.uni-avatar--sm.uni-avatar--square {
border-radius: 5px;
}
.uni-avatar--sm.uni-avatar--square .uni-avatar__content-container {
border-radius: 5px;
}
.uni-avatar--sm.uni-avatar--square .uni-avatar__img {
border-radius: 5px;
}
.uni-avatar--sm.uni-avatar--square .uni-avatar__img--default {
border-radius: 5px;
}
.uni-avatar--med {
width: 3rem;
height: 3rem;
font-size: 14px;
border-width: 2px;
-webkit-transition: border-width 0.2s ease, border-color 0.6s ease;
transition: border-width 0.2s ease, border-color 0.6s ease;
}
.uni-avatar--med:hover {
border-width: 4px;
}
.uni-avatar--med .uni-avatar__content-container {
border-width: 1px;
}
.uni-avatar--med .uni-avatar__img {
border-width: 1px;
}
.uni-avatar--med.uni-avatar--square {
border-radius: 5px;
}
.uni-avatar--med.uni-avatar--square .uni-avatar__content-container {
border-radius: 5px;
}
.uni-avatar--med.uni-avatar--square .uni-avatar__img {
border-radius: 5px;
}
.uni-avatar--med.uni-avatar--square .uni-avatar__img--default {
border-radius: 5px;
}
.uni-avatar--lg {
width: 4rem;
height: 4rem;
font-size: 18px;
border-width: 2px;
-webkit-transition: border-width 0.2s ease, border-color 0.6s ease;
transition: border-width 0.2s ease, border-color 0.6s ease;
}
.uni-avatar--lg:hover {
border-width: 4px;
}
.uni-avatar--lg .uni-avatar__content-container {
border-width: 1px;
}
.uni-avatar--lg .uni-avatar__img {
border-width: 1px;
}
.uni-avatar--lg.uni-avatar--square {
border-radius: 5px;
}
.uni-avatar--lg.uni-avatar--square .uni-avatar__content-container {
border-radius: 5px;
}
.uni-avatar--lg.uni-avatar--square .uni-avatar__img {
border-radius: 5px;
}
.uni-avatar--lg.uni-avatar--square .uni-avatar__img--default {
border-radius: 5px;
}
.uni-avatar--xlg {
width: 178px;
height: 178px;
font-size: 42px;
border-width: 2px;
-webkit-transition: border-width 0.2s ease, border-color 0.6s ease;
transition: border-width 0.2s ease, border-color 0.6s ease;
}
.uni-avatar--xlg:hover {
border-width: 4px;
}
.uni-avatar--xlg .uni-avatar__content-container {
border-width: 4px;
}
.uni-avatar--xlg .uni-avatar__img {
border-width: 4px;
}
.uni-avatar--xlg.uni-avatar--square {
border-radius: 5px;
}
.uni-avatar--xlg.uni-avatar--square .uni-avatar__content-container {
border-radius: 5px;
}
.uni-avatar--xlg.uni-avatar--square .uni-avatar__img {
border-radius: 5px;
}
.uni-avatar--xlg.uni-avatar--square .uni-avatar__img--default {
border-radius: 5px;
}
.uni-avatar__img {
width: 100%;
height: auto;
border-radius: 50%;
border-style: solid;
}
.uni-avatar__img--default {
position: absolute;
width: 112%;
height: 112%;
bottom: -20%;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.uni-avatar__icon {
width: 60%;
height: 60%;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.uni-avatar__initials {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
font-weight: 300;
font-size: 1em;
line-height: 1;
letter-spacing: -0.03em;
text-transform: uppercase;
color: inherit;
}
.uni-avatar__content-container {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
width: 100%;
overflow: hidden;
border-radius: 50%;
border-style: solid;
}
.uni-avatar__status {
position: absolute;
bottom: 0;
right: 0;
width: 12px;
height: 12px;
background-color: red;
border: 2px solid #fff;
border-radius: 50%;
}
.uni-avatar + .uni-avatar {
margin-left: 1rem;
}
</style></head><body>
<div id="app"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.min.js'></script>
<script >"use strict";
var grantImage = 'http://static.hudl.com/users/prod/5396331_c0c08c570daf469288760e2909c8e8e3.jpg';
// Avatar
// ------------------------
function Avatar(props) {
if (props.text) {
return React.createElement(
"div",
{ className: "uni-avatar uni-avatar--" + props.size + " uni-avatar--" + props.shape + " uni-avatar--has-text" },
React.createElement(
"div",
{ className: "uni-avatar__content-container" },
React.createElement(
"h5",
{ className: "uni-avatar__initials" },
props.text
)
)
);
} else if (props.imageUrl) {
return React.createElement(
"div",
{ className: "uni-avatar uni-avatar--" + props.size + " uni-avatar--" + props.shape },
React.createElement("img", { className: "uni-avatar__img", src: props.imageUrl, alt: "" })
);
} else if (props.icon) {
return React.createElement(
"div",
{ className: "uni-avatar uni-avatar--" + props.size + " uni-avatar--" + props.shape },
React.createElement(
"div",
{ className: "uni-avatar__content-container" },
React.createElement(
"svg",
{ className: "uni-avatar__icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" },
React.createElement(
"g",
{ fill: "none", "fill-rule": "evenodd" },
React.createElement("path", { fill: "currentColor", d: "M7.99932559,12 C7.99932559,7.582 11.5813256,4 15.9993256,4 C20.4173256,4 23.9993256,7.582 23.9993256,12 C23.9993256,16.419 20.4173256,20 15.9993256,20 C11.5813256,20 7.99932559,16.419 7.99932559,12 Z M8.99932559,12 C8.99932559,15.866 12.1343256,19 15.9993256,19 C19.8663256,19 23.0003256,15.866 23.0003256,12 C23.0003256,8.134 19.8663256,5 15.9993256,5 C12.1343256,5 8.99932559,8.134 8.99932559,12 Z M21.8173256,19.634 L22.0393256,19.476 L22.2933256,19.577 C25.5853256,20.886 27.8113256,23.205 28.3653256,26.072 C28.4043256,26.279 28.4323256,26.491 28.4503256,26.699 C28.4613256,26.824 28.4663256,26.922 28.4663256,26.96 C28.5063256,27.531 28.0673256,28 27.4993256,28 L4.50132559,28 C3.93432559,28 3.49632559,27.535 3.53332559,26.988 C3.53432559,26.923 3.54132559,26.817 3.55332559,26.681 C3.57332559,26.455 3.60332559,26.229 3.64632559,26.014 C3.64932559,26 3.64932559,26 3.65132559,25.986 C4.23332559,23.157 6.44832559,20.873 9.70632559,19.577 L9.96032559,19.476 L10.1823256,19.634 C11.8663256,20.841 13.8833256,21.5 15.9993256,21.5 C18.1163256,21.5 20.1333256,20.841 21.8173256,19.634 Z M22.1713256,20.607 C20.3653256,21.833 18.2323256,22.5 15.9993256,22.5 C13.7663256,22.5 11.6343256,21.833 9.82832559,20.607 C6.99932559,21.8 5.12532559,23.788 4.63232559,26.187 C4.62932559,26.198 4.62932559,26.198 4.62732559,26.21 C4.57032559,26.495 4.54232559,26.788 4.53332559,27 L27.4673256,27 C27.4623256,26.825 27.4383256,26.548 27.3833256,26.262 C26.9133256,23.829 25.0293256,21.813 22.1713256,20.607 Z" })
)
)
)
);
} else {
return React.createElement(
"div",
{ className: "uni-avatar uni-avatar--" + props.size + " uni-avatar--" + props.shape },
React.createElement(
"div",
{ className: "uni-avatar__content-container" },
React.createElement(
"svg",
{ className: "uni-avatar__img--default", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" },
React.createElement(
"g",
{ fill: "none", "fill-rule": "evenodd" },
React.createElement("path", { fill: "currentColor", d: "M7.99932559,12 C7.99932559,7.582 11.5813256,4 15.9993256,4 C20.4173256,4 23.9993256,7.582 23.9993256,12 C23.9993256,16.419 20.4173256,20 15.9993256,20 C11.5813256,20 7.99932559,16.419 7.99932559,12 Z M8.99932559,12 C8.99932559,15.866 12.1343256,19 15.9993256,19 C19.8663256,19 23.0003256,15.866 23.0003256,12 C23.0003256,8.134 19.8663256,5 15.9993256,5 C12.1343256,5 8.99932559,8.134 8.99932559,12 Z M21.8173256,19.634 L22.0393256,19.476 L22.2933256,19.577 C25.5853256,20.886 27.8113256,23.205 28.3653256,26.072 C28.4043256,26.279 28.4323256,26.491 28.4503256,26.699 C28.4613256,26.824 28.4663256,26.922 28.4663256,26.96 C28.5063256,27.531 28.0673256,28 27.4993256,28 L4.50132559,28 C3.93432559,28 3.49632559,27.535 3.53332559,26.988 C3.53432559,26.923 3.54132559,26.817 3.55332559,26.681 C3.57332559,26.455 3.60332559,26.229 3.64632559,26.014 C3.64932559,26 3.64932559,26 3.65132559,25.986 C4.23332559,23.157 6.44832559,20.873 9.70632559,19.577 L9.96032559,19.476 L10.1823256,19.634 C11.8663256,20.841 13.8833256,21.5 15.9993256,21.5 C18.1163256,21.5 20.1333256,20.841 21.8173256,19.634 Z M22.1713256,20.607 C20.3653256,21.833 18.2323256,22.5 15.9993256,22.5 C13.7663256,22.5 11.6343256,21.833 9.82832559,20.607 C6.99932559,21.8 5.12532559,23.788 4.63232559,26.187 C4.62932559,26.198 4.62932559,26.198 4.62732559,26.21 C4.57032559,26.495 4.54232559,26.788 4.53332559,27 L27.4673256,27 C27.4623256,26.825 27.4383256,26.548 27.3833256,26.262 C26.9133256,23.829 25.0293256,21.813 22.1713256,20.607 Z" })
)
)
)
);
}
}
Avatar.propTypes = {
imageUrl: React.PropTypes.string,
size: React.PropTypes.oneOf(['xsm', 'sm', 'med', 'lg', 'xlg']),
text: React.PropTypes.string,
shape: React.PropTypes.string,
icon: React.PropTypes.string
};
Avatar.defaultProps = {
size: 'med',
shape: ''
};
// Application
// ------------------------
// ADD ADDITIONAL AVATARS RIGHT HERE WITHIN THIS RETURN.
function Application(props) {
return React.createElement(
"section",
null,
React.createElement(
"div",
{ className: "container uni-pad--one" },
React.createElement(Avatar, { text: "JCHS" }),
React.createElement(Avatar, { imageUrl: grantImage }),
React.createElement(Avatar, null),
React.createElement(Avatar, { icon: true })
),
React.createElement(
"div",
{ className: "container uni-pad--one" },
React.createElement(Avatar, { size: "xsm", imageUrl: grantImage }),
React.createElement(Avatar, { size: "sm", imageUrl: grantImage }),
React.createElement(Avatar, { size: "med", imageUrl: grantImage }),
React.createElement(Avatar, { size: "lg", imageUrl: grantImage }),
React.createElement(Avatar, { size: "xlg", imageUrl: grantImage })
),
React.createElement(
"div",
{ className: "container uni-margin--two--top uni-pad--one" },
React.createElement(Avatar, { size: "xsm", text: "jchs" }),
React.createElement(Avatar, { size: "sm", text: "jchs" }),
React.createElement(Avatar, { size: "med", text: "jchs" }),
React.createElement(Avatar, { size: "lg", text: "jchs" }),
React.createElement(Avatar, { size: "xlg", text: "jchs" })
),
React.createElement(
"div",
{ className: "container uni-margin--two--top uni-pad--one" },
React.createElement(Avatar, { size: "xsm" }),
React.createElement(Avatar, { size: "sm" }),
React.createElement(Avatar, { size: "med" }),
React.createElement(Avatar, { size: "lg" }),
React.createElement(Avatar, { size: "xlg" })
),
React.createElement(
"div",
{ className: "container uni-margin--two--top uni-pad--one" },
React.createElement(Avatar, { size: "xsm", icon: true }),
React.createElement(Avatar, { size: "sm", icon: true }),
React.createElement(Avatar, { size: "med", icon: true }),
React.createElement(Avatar, { size: "lg", icon: true }),
React.createElement(Avatar, { size: "xlg", icon: true })
),
React.createElement(
"div",
{ className: "container uni-env--dark" },
React.createElement(
"div",
{ className: "uni-bg--level0 uni-pad--one" },
React.createElement(Avatar, { size: "xsm", text: "jchs" }),
React.createElement(Avatar, { size: "sm", text: "jchs" }),
React.createElement(Avatar, { size: "med", text: "jchs" }),
React.createElement(Avatar, { size: "lg", text: "jchs" }),
React.createElement(Avatar, { size: "xlg", text: "jchs" }),
React.createElement(
"div",
{ className: "uni-margin--one--top" },
React.createElement(Avatar, { size: "xsm", imageUrl: grantImage }),
React.createElement(Avatar, { size: "sm", imageUrl: grantImage }),
React.createElement(Avatar, { size: "med", imageUrl: grantImage }),
React.createElement(Avatar, { size: "lg", imageUrl: grantImage }),
React.createElement(Avatar, { size: "xlg", imageUrl: grantImage })
),
React.createElement(
"div",
{ className: "uni-margin--one--top" },
React.createElement(Avatar, { size: "xsm" }),
React.createElement(Avatar, { size: "sm" }),
React.createElement(Avatar, { size: "med" }),
React.createElement(Avatar, { size: "lg" }),
React.createElement(Avatar, { size: "xlg" })
),
React.createElement(
"div",
{ className: "uni-margin--one--top" },
React.createElement(Avatar, { size: "xsm", icon: true }),
React.createElement(Avatar, { size: "sm", icon: true }),
React.createElement(Avatar, { size: "med", icon: true }),
React.createElement(Avatar, { size: "lg", icon: true }),
React.createElement(Avatar, { size: "xlg", icon: true })
)
),
React.createElement(
"div",
{ className: "uni-bg--level1 uni-pad--one" },
React.createElement(Avatar, { size: "xsm", text: "jchs" }),
React.createElement(Avatar, { size: "sm", text: "jchs" }),
React.createElement(Avatar, { size: "med", imageUrl: grantImage }),
React.createElement(Avatar, { size: "lg", text: "jchs" }),
React.createElement(Avatar, { size: "xlg", text: "jchs" })
),
React.createElement(
"div",
{ className: "uni-bg--level2 uni-pad--one" },
React.createElement(Avatar, { size: "xsm", text: "jchs" }),
React.createElement(Avatar, { size: "sm", text: "jchs" }),
React.createElement(Avatar, { size: "med", imageUrl: grantImage }),
React.createElement(Avatar, { size: "lg", text: "jchs" }),
React.createElement(Avatar, { size: "xlg", text: "jchs" })
),
React.createElement(
"div",
{ className: "uni-bg--level3 uni-pad--one" },
React.createElement(Avatar, { size: "xsm", text: "jchs" }),
React.createElement(Avatar, { size: "sm", text: "jchs" }),
React.createElement(Avatar, { size: "med", imageUrl: grantImage }),
React.createElement(Avatar, { size: "lg", text: "jchs" }),
React.createElement(Avatar, { size: "xlg", text: "jchs" })
)
),
React.createElement(
"div",
{ className: "container" },
React.createElement(
"div",
{ className: "uni-bg--level3 uni-pad--one" },
React.createElement(Avatar, { size: "xsm", text: "jchs" }),
React.createElement(Avatar, { size: "sm", text: "jchs" }),
React.createElement(Avatar, { size: "med", imageUrl: grantImage }),
React.createElement(Avatar, { size: "lg", text: "jchs" }),
React.createElement(Avatar, { size: "xlg", text: "jchs" })
),
React.createElement(
"div",
{ className: "uni-bg--level2 uni-pad--one" },
React.createElement(Avatar, { size: "xsm", text: "jchs" }),
React.createElement(Avatar, { size: "sm", text: "jchs" }),
React.createElement(Avatar, { size: "med", imageUrl: grantImage }),
React.createElement(Avatar, { size: "lg", text: "jchs" }),
React.createElement(Avatar, { size: "xlg", text: "jchs" })
),
React.createElement(
"div",
{ className: "uni-bg--level1 uni-pad--one" },
React.createElement(Avatar, { size: "xsm", text: "jchs" }),
React.createElement(Avatar, { size: "sm", text: "jchs" }),
React.createElement(Avatar, { size: "med", imageUrl: grantImage }),
React.createElement(Avatar, { size: "lg", text: "jchs" }),
React.createElement(Avatar, { size: "xlg", text: "jchs" })
),
React.createElement(
"div",
{ className: "uni-bg--level0 uni-pad--one" },
React.createElement(Avatar, { size: "xsm", text: "jchs" }),
React.createElement(Avatar, { size: "sm", text: "jchs" }),
React.createElement(Avatar, { size: "med", text: "jchs" }),
React.createElement(Avatar, { size: "lg", text: "jchs" }),
React.createElement(Avatar, { size: "xlg", text: "jchs" })
)
),
React.createElement(
"div",
{ className: "container" },
React.createElement(Avatar, { imageUrl: "https://marketplace.canva.com/MAB6v7RGMOw/1/thumbnail/canva-robot-electric-avatar-icon-MAB6v7RGMOw.png" })
)
);
}
// Render
// ---------------------------
ReactDOM.render(React.createElement(Application, null), document.getElementById('app'));
//# sourceURL=pen.js
</script>
</body></html>
