Cacher is the code snippet organizer for pro developers

{"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;
}