body {
width:100vw;
height:100vh;
background-image: url("https://www.eagleview.com/wp-content/themes/eagleview/assets/images/static/eagleview-hero.jpg");
display: flex;
align-items:center;
justify-content:center;
margin: 0;
}
.ev-popover {
overflow:hidden;
display: flex;
align-items:center;
justify-content: center;
height: 56px;
background-color:$salt-100;
border-radius: 4px;
}
.popover_thumnail {
cursor:pointer;
display:flex;
align-content:center;
justify-items:center;
align-items:center;
justify-content:center;
background-color:$charcoal-100;
height: 48px;
width: 48px;
border-radius: 4px;
margin: 4px;
}
.popover_text_container {
background-color: transparent;
padding-right: 16px;
padding-left: 4px;
}
.ev-type {
font-family: "Noto Sans", sans-serif;
}
.ev-type--interactive {
color: $charcoal-200;
font-size: 18px;
line-height: 1;
}
.ev-type--meta {
color: $charcoal-700;
font-size: 14px;
line-height: auto;
}
View Compiled
function EVPopover() {
return (
<div className="ev-popover">
<div className="popover_thumnail">
<img src="http://cdn.onlinewebfonts.com/svg/img_67289.png" height="24px"/></div>
<div className="popover_text_container">
<span className="ev-type ev-type--interactive">15606 NE 40th Street</span><br />
<span className="evtype ev-type--meta">Seattle, WA 98052</span>
</div>
</div>
);
}
ReactDOM.render (<EVPopover /> , document.getElementById('root'));
View Compiled
