Skip to content

Instantly share code, notes, and snippets.

@kiwiupover

kiwiupover/SassMeister-input-HTML.html

Created August 8, 2014 20:43
Show Gist options
  • Save kiwiupover/f9622bd32963c9a2459a to your computer and use it in GitHub Desktop.
Save kiwiupover/f9622bd32963c9a2459a to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="RestHero">
<div class="object-container">
<img src="http://placehold.it/960x480"/>
<div class="flag"></div>
<div class="overlay">
<span class="data">
An icon here
123
</span>
</div>
</div>
<div class="details">
<h3 class="title">
<a>Yada yada</a>
</h3>
</div>
</div>
Raw
SassMeister-input.sass
// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----
$padding-s: 10px
$padding-m: 15px
$border-color: #333
// In responsive/patterns/_media.sass
%media
margin-bottom: $padding-s
overflow: hidden
zoom: 1
> a
@extend %media-object !optional
display: inline-block
%media-overlay
position: absolute
z-index: 1
%media-top
@extend %media
%media-object
width: 100%
margin-bottom: $padding-s
zoom: 1
overflow: hidden
%media-middle
@extend %media
position: relative
%media-object
width: 100%
zoom: 1
overflow: hidden
%media-object-vertical-centered
position: absolute
// from responsive/modules/dish/_placeholders.sass
%hero-media-object
%media-object
position: relative
.details
@extend %media-body
.overlay
@extend %media-overlay
top: 0
bottom: 0
right: 0
left: 0
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 66%, rgba(0, 0, 0, 0.5) 100%)
.data
position: absolute
color: #fff
bottom: $padding-m
right: $padding-m
.flag
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNjFweCIgaGVpZ2h0PSI2MXB4IiB2aWV3Qm94PSIwIDAgNjEgNjEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDMuMC40ICg4MDUzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4gICAgPHRpdGxlPlVudGl0bGVkIDg8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjUwLjAzMzcxMzQlIiB5MT0iMTAwLjA2NDMzMiUiIHgyPSI1MC4wMzM3MTM0JSIgeTI9Ii0yLjI0NzA3MzI5ZS0wOSUiIGlkPSJsaW5lYXJHcmFkaWVudC0xIj4gICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkVDQzU2IiBvZmZzZXQ9Ijc2LjA3JSI+PC9zdG9wPiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGMUMyNTIiIG9mZnNldD0iOTAuNDElIj48L3N0b3A+ICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0U4QkI0RiIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+ICAgICAgICA8L2xpbmVhckdyYWRpZW50PiAgICAgICAgPHBhdGggaWQ9InBhdGgtMiIgZD0iTS0wLjIsMCBMNjEuMyw2MS40IEw2MS4zLDAgTC0wLjIsMCBaIj48L3BhdGg+ICAgICAgICA8ZmlsdGVyIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci00Ij4gICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIwIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwICAgMCAwIDAgMCAwICAwIDAgMCAwLjA3IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiB0eXBlPSJtYXRyaXgiIHJlc3VsdD0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+ICAgICAgICAgICAgPGZlTWVyZ2U+ICAgICAgICAgICAgICAgIDxmZU1lcmdlTm9kZSBpbj0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlTWVyZ2VOb2RlPiAgICAgICAgICAgICAgICA8ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiPjwvZmVNZXJnZU5vZGU+ICAgICAgICAgICAgPC9mZU1lcmdlPiAgICAgICAgPC9maWx0ZXI+ICAgIDwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+ICAgICAgICA8ZyBpZD0iQmVzdF9EaXNoXy1fU3RhciIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCI+ICAgICAgICAgICAgPGcgaWQ9IlNoYXBlLSstc3RhciI+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDAgTDYxLjQsNjEuNCBMNjEuNCwwIEwwLDAgWiIgaWQ9IlNoYXBlIiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTEpIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICAgICAgICAgIDxnIGlkPSJzdGFyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIj4gICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTMiIHNrZXRjaDpuYW1lPSJtYXNrIiBmaWxsPSJ3aGl0ZSI+ICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0yIj48L3VzZT4gICAgICAgICAgICAgICAgICAgIDwvbWFzaz4gICAgICAgICAgICAgICAgICAgIDxnIGlkPSJtYXNrIj48L2c+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDguMzk5NjM2OCwxOC43IEM0OC4wOTk1NTQ3LDE4LjYgNDcuNzk5NDcyNiwxOC42IDQ3LjU5OTQxNzgsMTguNiBMMzcuOTk2Nzg5OSwxOC42IEMzNy44OTY3NjI1LDE4LjYgMzcuNjk2NzA3NywxOC41IDM3LjQ5NjY1MywxOC40IEMzNy4yOTY1OTgyLDE4LjMgMzcuMTk2NTcwOSwxOC4xIDM3LjE5NjU3MDksMTggTDM0LjM5NTgwNDQsOCBDMzQuMjk1Nzc3LDcuNyAzNC4xOTU3NDk2LDcuNCAzMy45OTU2OTQ5LDcuMSBDMzMuNzk1NjQwMSw2LjggMzMuMzk1NTMwNiw2LjMgMzIuNTk1MzExNiw2LjMgQzMxLjc5NTA5MjYsNi4zIDMxLjM5NDk4MzEsNi44IDMxLjE5NDkyODQsNy4xIEMzMS4wOTQ5MDEsNy40IDMwLjk5NDg3MzYsNy43IDMwLjg5NDg0NjIsOCBMMjguMDk0MDc5NywxOCBDMjguMDk0MDc5NywxOC4xIDI3Ljk5NDA1MjQsMTguMyAyNy43OTM5OTc2LDE4LjQgQzI3LjU5Mzk0MjksMTguNSAyNy4zOTM4ODgxLDE4LjYgMjcuMjkzODYwNywxOC42IEwxOC42Mjc0MTQyLDE4LjYgQzE4LjM3MzI0NjQsMTguNiAzNC43ODI5MjI0LDM0Ljc0MjA2NjIgMzQuNzgyOTIyNCwzNC43NDIwNjYyIEw0MS4yOTc2OTMyLDQwLjIgQzQxLjY5NzgwMjcsNDAuNSA0MS45OTc4ODQ5LDQwLjggNDIuNzk4MTAzOCw0MC44IEM0My4yOTgyNDA3LDQwLjggNDMuODk4NDA1LDQwLjYgNDQuMDk4NDU5Nyw0MC4yIEM0NC4zOTg1NDE4LDM5LjggNDQuMzk4NTQxOCwzOS40IDQ0LjM5ODU0MTgsMzkuMSBDNDQuMzk4NTQxOCwzOC43IDQ0LjI5ODUxNDUsMzguNCA0NC4xOTg0ODcxLDM4LjEgTDQwLjU5NzUwMTYsMjggTDQwLjU5NzUwMTYsMjcuOCBDNDAuNTk3NTAxNiwyNy41IDQwLjc5NzU1NjQsMjcuMSA0MC44OTc1ODM3LDI3LjEgTDQ4LjU5OTY5MTYsMjIgQzQ4Ljc5OTc0NjMsMjEuOCA0OS4wOTk4Mjg1LDIxLjcgNDkuMjk5ODgzMiwyMS40IEM0OS40OTk5MzgsMjEuMiA0OS42OTk5OTI3LDIwLjggNDkuNjk5OTkyNywyMC4yIEM0OS44MDAwMjAxLDE5LjkgNDkuNTk5OTY1MywxOS42IDQ5LjM5OTkxMDYsMTkuMyBDNDkuMDk5ODI4NSwxOC45IDQ4LjY5OTcxOSwxOC44IDQ4LjM5OTYzNjgsMTguNyBaIiBpZD0iU2hhcGUiIGZpbGw9IiNGN0REQTkiIGZpbHRlcj0idXJsKCNmaWx0ZXItNCkiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIG1hc2s9InVybCgjbWFzay0zKSI+PC9wYXRoPiAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+)
background-position: top right
background-size: contain
background-repeat: no-repeat
position: absolute
top: 0
right: 0
width: 62px
height: 62px
max-width: 35%
max-height: 35%
z-index: 1
// from responsive/modules/_dish_hero.sass
$vertical-center-height: 200px
.RestHero
@extend %hero-media-object
@extend %media-middle
padding-bottom: $padding-s
margin-bottom: $padding-m
border-bottom: 1px solid $border-color
position: relative
.RestHero
max-width: 960px
margin: 0 auto
.object-container
@extend %media-object
height: $vertical-center-height
> img
@extend %media-object
@extend %media-object-centered
margin-top: - $vertical-center-height / 2
Raw
SassMeister-output.css
.RestHero {
margin-bottom: 10px;
overflow: hidden;
zoom: 1;
}
.RestHero > a {
display: inline-block;
}
.RestHero .overlay {
position: absolute;
z-index: 1;
}
.RestHero {
position: relative;
}
.RestHero > a, .RestHero .object-container, .RestHero .object-container > img {
width: 100%;
zoom: 1;
overflow: hidden;
}
.RestHero > a, .RestHero .object-container, .RestHero .object-container > img {
position: relative;
}
.RestHero .overlay {
top: 0;
bottom: 0;
right: 0;
left: 0;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 66%, rgba(0, 0, 0, 0.5) 100%);
}
.RestHero .data {
position: absolute;
color: white;
bottom: 15px;
right: 15px;
}
.RestHero .flag {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNjFweCIgaGVpZ2h0PSI2MXB4IiB2aWV3Qm94PSIwIDAgNjEgNjEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDMuMC40ICg4MDUzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4gICAgPHRpdGxlPlVudGl0bGVkIDg8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjUwLjAzMzcxMzQlIiB5MT0iMTAwLjA2NDMzMiUiIHgyPSI1MC4wMzM3MTM0JSIgeTI9Ii0yLjI0NzA3MzI5ZS0wOSUiIGlkPSJsaW5lYXJHcmFkaWVudC0xIj4gICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkVDQzU2IiBvZmZzZXQ9Ijc2LjA3JSI+PC9zdG9wPiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGMUMyNTIiIG9mZnNldD0iOTAuNDElIj48L3N0b3A+ICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0U4QkI0RiIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+ICAgICAgICA8L2xpbmVhckdyYWRpZW50PiAgICAgICAgPHBhdGggaWQ9InBhdGgtMiIgZD0iTS0wLjIsMCBMNjEuMyw2MS40IEw2MS4zLDAgTC0wLjIsMCBaIj48L3BhdGg+ICAgICAgICA8ZmlsdGVyIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci00Ij4gICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIwIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwICAgMCAwIDAgMCAwICAwIDAgMCAwLjA3IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiB0eXBlPSJtYXRyaXgiIHJlc3VsdD0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+ICAgICAgICAgICAgPGZlTWVyZ2U+ICAgICAgICAgICAgICAgIDxmZU1lcmdlTm9kZSBpbj0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlTWVyZ2VOb2RlPiAgICAgICAgICAgICAgICA8ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiPjwvZmVNZXJnZU5vZGU+ICAgICAgICAgICAgPC9mZU1lcmdlPiAgICAgICAgPC9maWx0ZXI+ICAgIDwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+ICAgICAgICA8ZyBpZD0iQmVzdF9EaXNoXy1fU3RhciIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCI+ICAgICAgICAgICAgPGcgaWQ9IlNoYXBlLSstc3RhciI+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDAgTDYxLjQsNjEuNCBMNjEuNCwwIEwwLDAgWiIgaWQ9IlNoYXBlIiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTEpIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICAgICAgICAgIDxnIGlkPSJzdGFyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIj4gICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTMiIHNrZXRjaDpuYW1lPSJtYXNrIiBmaWxsPSJ3aGl0ZSI+ICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0yIj48L3VzZT4gICAgICAgICAgICAgICAgICAgIDwvbWFzaz4gICAgICAgICAgICAgICAgICAgIDxnIGlkPSJtYXNrIj48L2c+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDguMzk5NjM2OCwxOC43IEM0OC4wOTk1NTQ3LDE4LjYgNDcuNzk5NDcyNiwxOC42IDQ3LjU5OTQxNzgsMTguNiBMMzcuOTk2Nzg5OSwxOC42IEMzNy44OTY3NjI1LDE4LjYgMzcuNjk2NzA3NywxOC41IDM3LjQ5NjY1MywxOC40IEMzNy4yOTY1OTgyLDE4LjMgMzcuMTk2NTcwOSwxOC4xIDM3LjE5NjU3MDksMTggTDM0LjM5NTgwNDQsOCBDMzQuMjk1Nzc3LDcuNyAzNC4xOTU3NDk2LDcuNCAzMy45OTU2OTQ5LDcuMSBDMzMuNzk1NjQwMSw2LjggMzMuMzk1NTMwNiw2LjMgMzIuNTk1MzExNiw2LjMgQzMxLjc5NTA5MjYsNi4zIDMxLjM5NDk4MzEsNi44IDMxLjE5NDkyODQsNy4xIEMzMS4wOTQ5MDEsNy40IDMwLjk5NDg3MzYsNy43IDMwLjg5NDg0NjIsOCBMMjguMDk0MDc5NywxOCBDMjguMDk0MDc5NywxOC4xIDI3Ljk5NDA1MjQsMTguMyAyNy43OTM5OTc2LDE4LjQgQzI3LjU5Mzk0MjksMTguNSAyNy4zOTM4ODgxLDE4LjYgMjcuMjkzODYwNywxOC42IEwxOC42Mjc0MTQyLDE4LjYgQzE4LjM3MzI0NjQsMTguNiAzNC43ODI5MjI0LDM0Ljc0MjA2NjIgMzQuNzgyOTIyNCwzNC43NDIwNjYyIEw0MS4yOTc2OTMyLDQwLjIgQzQxLjY5NzgwMjcsNDAuNSA0MS45OTc4ODQ5LDQwLjggNDIuNzk4MTAzOCw0MC44IEM0My4yOTgyNDA3LDQwLjggNDMuODk4NDA1LDQwLjYgNDQuMDk4NDU5Nyw0MC4yIEM0NC4zOTg1NDE4LDM5LjggNDQuMzk4NTQxOCwzOS40IDQ0LjM5ODU0MTgsMzkuMSBDNDQuMzk4NTQxOCwzOC43IDQ0LjI5ODUxNDUsMzguNCA0NC4xOTg0ODcxLDM4LjEgTDQwLjU5NzUwMTYsMjggTDQwLjU5NzUwMTYsMjcuOCBDNDAuNTk3NTAxNiwyNy41IDQwLjc5NzU1NjQsMjcuMSA0MC44OTc1ODM3LDI3LjEgTDQ4LjU5OTY5MTYsMjIgQzQ4Ljc5OTc0NjMsMjEuOCA0OS4wOTk4Mjg1LDIxLjcgNDkuMjk5ODgzMiwyMS40IEM0OS40OTk5MzgsMjEuMiA0OS42OTk5OTI3LDIwLjggNDkuNjk5OTkyNywyMC4yIEM0OS44MDAwMjAxLDE5LjkgNDkuNTk5OTY1MywxOS42IDQ5LjM5OTkxMDYsMTkuMyBDNDkuMDk5ODI4NSwxOC45IDQ4LjY5OTcxOSwxOC44IDQ4LjM5OTYzNjgsMTguNyBaIiBpZD0iU2hhcGUiIGZpbGw9IiNGN0REQTkiIGZpbHRlcj0idXJsKCNmaWx0ZXItNCkiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIG1hc2s9InVybCgjbWFzay0zKSI+PC9wYXRoPiAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
background-position: top right;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 0;
right: 0;
width: 62px;
height: 62px;
max-width: 35%;
max-height: 35%;
z-index: 1;
}
.RestHero {
padding-bottom: 10px;
margin-bottom: 15px;
border-bottom: 1px solid #333333;
position: relative;
}
.RestHero {
max-width: 960px;
margin: 0 auto;
}
.RestHero .object-container {
height: 200px;
}
.RestHero .object-container > img {
margin-top: -100px;
}
Raw
SassMeister-rendered.html
<div class="RestHero">
<div class="object-container">
<img src="http://placehold.it/960x480"/>
<div class="flag"></div>
<div class="overlay">
<span class="data">
An icon here
123
</span>
</div>
</div>
<div class="details">
<h3 class="title">
<a>Yada yada</a>
</h3>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment