Untitled
{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
<article class="tile">
<header class="tile_head">
<a href="/products/msnonit_wp.html">
<h6 class="name">MSN Onit</h6>
<i class="meta">Windows Phone</i>
<img class="tile_image thumb" src="http://placehold.it/66x66" alt="" width="66" height="66" />
</a>
</header>
<p class="summary">A guy’s guide to girls, cars, gadgets, fitness and life advice, plus a touch of humor.</p>
<footer class="tile_foot">
<a class="tiny button">App info</a>
<!--
<a class="tiny button">v</a>
<ul class="dropdown">
<li class="dropdown_item"></li>
<li class="dropdown_item"></li>
</ul>
-->
</footer>
</article>
* {
margin: 0;
padding: 0;
}
html {
font-size: 12px;
font-family: sans-serif;
}
body {
font-size: 1rem;
line-height: 1.5rem;
}
.tile {
position: relative;
}
.tile .name,
.tile .meta {
font-size: 1rem;
line-height: 1.5rem;
font-weight: normal;
}
.tile_head {
overflow: visible;
position: relative;
padding-left: 72px;
height: 66px;
}
.tile_image {
position: absolute;
top: 0;
left: 0;
}
.tile_foot {
height: 2rem;
position: absolute;
top: 3.5rem;
left: 72px;
}
.button {
background: #ddd;
display: inline-block;
text-align: center;
padding: .5rem .75rem;
text-decoration: none;
line-height: 1;
position: relative;
cursor: pointer;
border: none;
outline: none;
margin: 0;
}