<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <article class="card"> <section class="card-info"> <div class="card-title">What's Hot and Recommended</div> <div class="card-icon"> <img src="http://placehold.it/16/16" alt="" /> </div> </section> <section class="user"> <div class="user-image"> <img class="avatar" src="http://placehold.it/46/46" alt="" /> </div> <div class="user-info"> <div class="username">Addy Osmani</div> <div class="post-meta">Shared privately - 8:09 AM</div> </div> <section class="supplementary"> <div class="card-options"> <label for="pip"> <input type="checkbox" id="pip" class="card-actions"> P <ul class="actions-list"> <li> <a href="#">View post activity</a> </li> <li> <a href="#">Link to post</a> </li> <li> <a href="#">Embed post</a> </li> </ul> </label> </div> <div class="tags"> <a class="tag" href="#">#Firefox</a> <a class="tag" href="#">#Polymer</a> <a class="tag" href="#">#Infographic</a> </div> </section> </section> <section class="post"> <div class="post-pre"> <p>Umar Hansa originally shared:</p> <p>#DevTools Tip: Next occurrence shortcut (Canary)</p> <a href="#"><span class="read-more">Read More</span></a> </div> <div class="post-image"> <img src="http://placehold.it/200x350" alt="" /> </div> <div class="post-content"> Writing a Polymer article? Send it our way and we'll help you review it! Send us a message to start the process </div> </section> <section class="user-actions"> <div class="user-action-left"> <button class="plus">+48</button> <button class="share">Share icon 20</button> <input type="text" placeholder="Add a comment..." class="comment-box"> </div> <div class="user-images"> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> </div> </section> <section class="comments"> </section> </article> <article class="card"> <section class="card-info"> <div class="card-title">What's Hot and Recommended</div> <div class="card-icon"> <img src="http://placehold.it/16/16" alt="" /> </div> </section> <section class="user"> <div class="user-image"> <img class="avatar" src="http://placehold.it/46/46" alt="" /> </div> <div class="user-info"> <div class="username">Addy Osmani</div> <div class="post-meta">Shared privately - 8:09 AM</div> </div> <section class="supplementary"> <div class="card-options"> <label for="pip"> <input type="checkbox" id="pip" class="card-actions"> P <ul class="actions-list"> <li> <a href="#">View post activity</a> </li> <li> <a href="#">Link to post</a> </li> <li> <a href="#">Embed post</a> </li> </ul> </label> </div> <div class="tags"> <a class="tag" href="#">#Firefox</a> <a class="tag" href="#">#Polymer</a> <a class="tag" href="#">#Infographic</a> </div> </section> </section> <section class="post"> <div class="post-pre"> <p>Umar Hansa originally shared:</p> <p>#DevTools Tip: Next occurrence shortcut (Canary)</p> <a href="#"><span class="read-more">Read More</span></a> </div> <div class="post-image"> <img src="http://placehold.it/200x350" alt="" /> </div> <div class="post-content"> Writing a Polymer article? Send it our way and we'll help you review it! Send us a message to start the process </div> </section> <section class="user-actions"> <div class="user-action-left"> <button class="plus">+48</button> <button class="share">Share icon 20</button> <input type="text" placeholder="Add a comment..." class="comment-box"> </div> <div class="user-images"> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> </div> </section> <section class="comments"> </section> </article> <article class="card"> <section class="card-info"> <div class="card-title">What's Hot and Recommended</div> <div class="card-icon"> <img src="http://placehold.it/16/16" alt="" /> </div> </section> <section class="user"> <div class="user-image"> <img class="avatar" src="http://placehold.it/46/46" alt="" /> </div> <div class="user-info"> <div class="username">Addy Osmani</div> <div class="post-meta">Shared privately - 8:09 AM</div> </div> <section class="supplementary"> <div class="card-options"> <label for="pip"> <input type="checkbox" id="pip" class="card-actions"> P <ul class="actions-list"> <li> <a href="#">View post activity</a> </li> <li> <a href="#">Link to post</a> </li> <li> <a href="#">Embed post</a> </li> </ul> </label> </div> <div class="tags"> <a class="tag" href="#">#Firefox</a> <a class="tag" href="#">#Polymer</a> <a class="tag" href="#">#Infographic</a> </div> </section> </section> <section class="post"> <div class="post-pre"> <p>Umar Hansa originally shared:</p> <p>#DevTools Tip: Next occurrence shortcut (Canary)</p> <a href="#"><span class="read-more">Read More</span></a> </div> <div class="post-image"> <img src="http://placehold.it/200x350" alt="" /> </div> <div class="post-content"> Writing a Polymer article? Send it our way and we'll help you review it! Send us a message to start the process </div> </section> <section class="user-actions"> <div class="user-action-left"> <button class="plus">+48</button> <button class="share">Share icon 20</button> <input type="text" placeholder="Add a comment..." class="comment-box"> </div> <div class="user-images"> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> </div> </section> <section class="comments"> </section> </article> <article class="card"> <section class="card-info"> <div class="card-title">What's Hot and Recommended</div> <div class="card-icon"> <img src="http://placehold.it/16/16" alt="" /> </div> </section> <section class="user"> <div class="user-image"> <img class="avatar" src="http://placehold.it/46/46" alt="" /> </div> <div class="user-info"> <div class="username">Addy Osmani</div> <div class="post-meta">Shared privately - 8:09 AM</div> </div> <section class="supplementary"> <div class="card-options"> <label for="pip"> <input type="checkbox" id="pip" class="card-actions"> P <ul class="actions-list"> <li> <a href="#">View post activity</a> </li> <li> <a href="#">Link to post</a> </li> <li> <a href="#">Embed post</a> </li> </ul> </label> </div> <div class="tags"> <a class="tag" href="#">#Firefox</a> <a class="tag" href="#">#Polymer</a> <a class="tag" href="#">#Infographic</a> </div> </section> </section> <section class="post"> <div class="post-pre"> <p>Umar Hansa originally shared:</p> <p>#DevTools Tip: Next occurrence shortcut (Canary)</p> <a href="#"><span class="read-more">Read More</span></a> </div> <div class="post-image"> <img src="http://placehold.it/200x350" alt="" /> </div> <div class="post-content"> Writing a Polymer article? Send it our way and we'll help you review it! Send us a message to start the process </div> </section> <section class="user-actions"> <div class="user-action-left"> <button class="plus">+48</button> <button class="share">Share icon 20</button> <input type="text" placeholder="Add a comment..." class="comment-box"> </div> <div class="user-images"> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> </div> </section> <section class="comments"> </section> </article> <article class="card"> <section class="card-info"> <div class="card-title">What's Hot and Recommended</div> <div class="card-icon"> <img src="http://placehold.it/16/16" alt="" /> </div> </section> <section class="user"> <div class="user-image"> <img class="avatar" src="http://placehold.it/46/46" alt="" /> </div> <div class="user-info"> <div class="username">Addy Osmani</div> <div class="post-meta">Shared privately - 8:09 AM</div> </div> <section class="supplementary"> <div class="card-options"> <label for="pip"> <input type="checkbox" id="pip" class="card-actions"> P <ul class="actions-list"> <li> <a href="#">View post activity</a> </li> <li> <a href="#">Link to post</a> </li> <li> <a href="#">Embed post</a> </li> </ul> </label> </div> <div class="tags"> <a class="tag" href="#">#Firefox</a> <a class="tag" href="#">#Polymer</a> <a class="tag" href="#">#Infographic</a> </div> </section> </section> <section class="post"> <div class="post-pre"> <p>Umar Hansa originally shared:</p> <p>#DevTools Tip: Next occurrence shortcut (Canary)</p> <a href="#"><span class="read-more">Read More</span></a> </div> <div class="post-image"> <img src="http://placehold.it/200x350" alt="" /> </div> <div class="post-content"> Writing a Polymer article? Send it our way and we'll help you review it! Send us a message to start the process </div> </section> <section class="user-actions"> <div class="user-action-left"> <button class="plus">+48</button> <button class="share">Share icon 20</button> <input type="text" placeholder="Add a comment..." class="comment-box"> </div> <div class="user-images"> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> </div> </section> <section class="comments"> </section> </article> <article class="card"> <section class="card-info"> <div class="card-title">What's Hot and Recommended</div> <div class="card-icon"> <img src="http://placehold.it/16/16" alt="" /> </div> </section> <section class="user"> <div class="user-image"> <img class="avatar" src="http://placehold.it/46/46" alt="" /> </div> <div class="user-info"> <div class="username">Addy Osmani</div> <div class="post-meta">Shared privately - 8:09 AM</div> </div> <section class="supplementary"> <div class="card-options"> <label for="pip"> <input type="checkbox" id="pip" class="card-actions"> P <ul class="actions-list"> <li> <a href="#">View post activity</a> </li> <li> <a href="#">Link to post</a> </li> <li> <a href="#">Embed post</a> </li> </ul> </label> </div> <div class="tags"> <a class="tag" href="#">#Firefox</a> <a class="tag" href="#">#Polymer</a> <a class="tag" href="#">#Infographic</a> </div> </section> </section> <section class="post"> <div class="post-pre"> <p>Umar Hansa originally shared:</p> <p>#DevTools Tip: Next occurrence shortcut (Canary)</p> <a href="#"><span class="read-more">Read More</span></a> </div> <div class="post-image"> <img src="http://placehold.it/200x350" alt="" /> </div> <div class="post-content"> Writing a Polymer article? Send it our way and we'll help you review it! Send us a message to start the process </div> </section> <section class="user-actions"> <div class="user-action-left"> <button class="plus">+48</button> <button class="share">Share icon 20</button> <input type="text" placeholder="Add a comment..." class="comment-box"> </div> <div class="user-images"> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> </div> </section> <section class="comments"> </section> </article> <article class="card"> <section class="card-info"> <div class="card-title">What's Hot and Recommended</div> <div class="card-icon"> <img src="http://placehold.it/16/16" alt="" /> </div> </section> <section class="user"> <div class="user-image"> <img class="avatar" src="http://placehold.it/46/46" alt="" /> </div> <div class="user-info"> <div class="username">Addy Osmani</div> <div class="post-meta">Shared privately - 8:09 AM</div> </div> <section class="supplementary"> <div class="card-options"> <label for="pip"> <input type="checkbox" id="pip" class="card-actions"> P <ul class="actions-list"> <li> <a href="#">View post activity</a> </li> <li> <a href="#">Link to post</a> </li> <li> <a href="#">Embed post</a> </li> </ul> </label> </div> <div class="tags"> <a class="tag" href="#">#Firefox</a> <a class="tag" href="#">#Polymer</a> <a class="tag" href="#">#Infographic</a> </div> </section> </section> <section class="post"> <div class="post-pre"> <p>Umar Hansa originally shared:</p> <p>#DevTools Tip: Next occurrence shortcut (Canary)</p> <a href="#"><span class="read-more">Read More</span></a> </div> <div class="post-image"> <img src="http://placehold.it/200x350" alt="" /> </div> <div class="post-content"> Writing a Polymer article? Send it our way and we'll help you review it! Send us a message to start the process </div> </section> <section class="user-actions"> <div class="user-action-left"> <button class="plus">+48</button> <button class="share">Share icon 20</button> <input type="text" placeholder="Add a comment..." class="comment-box"> </div> <div class="user-images"> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> </div> </section> <section class="comments"> </section> </article> <article class="card"> <section class="card-info"> <div class="card-title">What's Hot and Recommended</div> <div class="card-icon"> <img src="http://placehold.it/16/16" alt="" /> </div> </section> <section class="user"> <div class="user-image"> <img class="avatar" src="http://placehold.it/46/46" alt="" /> </div> <div class="user-info"> <div class="username">Addy Osmani</div> <div class="post-meta">Shared privately - 8:09 AM</div> </div> <section class="supplementary"> <div class="card-options"> <label for="pip"> <input type="checkbox" id="pip" class="card-actions"> P <ul class="actions-list"> <li> <a href="#">View post activity</a> </li> <li> <a href="#">Link to post</a> </li> <li> <a href="#">Embed post</a> </li> </ul> </label> </div> <div class="tags"> <a class="tag" href="#">#Firefox</a> <a class="tag" href="#">#Polymer</a> <a class="tag" href="#">#Infographic</a> </div> </section> </section> <section class="post"> <div class="post-pre"> <p>Umar Hansa originally shared:</p> <p>#DevTools Tip: Next occurrence shortcut (Canary)</p> <a href="#"><span class="read-more">Read More</span></a> </div> <div class="post-image"> <img src="http://placehold.it/200x350" alt="" /> </div> <div class="post-content"> Writing a Polymer article? Send it our way and we'll help you review it! Send us a message to start the process </div> </section> <section class="user-actions"> <div class="user-action-left"> <button class="plus">+48</button> <button class="share">Share icon 20</button> <input type="text" placeholder="Add a comment..." class="comment-box"> </div> <div class="user-images"> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> <img src="http://placehold.it/28/28" alt="" /> </div> </section> <section class="comments"> </section> </article> </div>

@import url(https://fonts.googleapis.com/css?family=Roboto); .container { max-width: 1200px; margin: 0 auto; } .card { width: 100%; float: left; margin-right: 10px; } @media (min-width: 480px) { .card { width: 49%; } } @media (min-width: 600px) { .card { width: 32.333%; } } @media (min-width: 960px) { .card { width: 24%; } } .card-info, .user, .supplementary, .post, .user-actions, .comments { clear: both; } .card-info, .user { width: 100%; } .avatar { border-radius: 50%; } .card-title, .post-meta { color: #999; } .username { color: #262626; } .username { font-weight: bold; } .actions-list > li a, .tag { text-decoration: none; } .actions-list > li a:hover, .tag:hover { text-decoration: none; } .actions-list { -webkit-box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4); box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4); } body { font-family: "roboto", sans-serif; line-height: 1.4; } .card { border: 1px solid #d8d8d8; border-radius: 3px; background: #fff; border-bottom-width: 2px; margin: 10px 10px 20px 10px; padding: 20px; position: relative; } .card-info { border-bottom: 1px solid #d8d8d8; float: left; } .card-title { font-size: 12px; float: left; } .card-icon { float: right; } .user { float: left; position: relative; } .user-info { float: left; margin-top: 20px; } .avatar { float: left; margin: 20px; margin-left: 0; } .user-info { display: left; } .username { display: left; font-size: 14px; } .post-meta { display: left; font-size: 12px; } .supplementary { position: absolute; top: 20px; right: 20px; } .card-options { float: right; position: relative; z-index: 2; } [for='pip'] { cursor: pointer; } .card-options input[type='checkbox'] { display: none; } .card-options input[type='checkbox'] ~ .actions-list { display: none; } .card-options input[type='checkbox']:checked ~ .actions-list { display: block; } .actions-list { position: absolute; top: 100%; right: 0; background: #fff; border-radius: 3px; min-width: 250px; list-style: none; padding: 6px; } .actions-list > li { padding: 6px; } .actions-list > li a { display: block; color: #262626; } .actions-list > li:hover { background: #ddd; } .tags { position: absolute; top: 20px; right: -20px; z-index: 1; } .tag { font-size: 12px; border-right: 2px solid; display: block; color: #262626; padding: 6px; } .tag:hover { background: #ddd; } .post-pre { font-size: 13px; } .post-image { margin-top: 20px; max-width: 100%; overflow: hidden; text-align: center; } .plus, .share { padding: 6px; border: 1px solid #d9d9d9; background: white; border-radius: 3px; } .comment-box { padding: 6px; border-radius: 3px; border: 1px solid #d9d9d9; } .user-action-left { float: left; } .user-images { float: right; }