"modified"
Bootstrap 3.3.0 Snippet by aslomibao

<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="wrapper"> <div class="card radius shadowDepth1"> <div class="card__image border-tlr-radius"> <img src="http://lorempixel.com/400/200/sports/" alt="image" class="border-tlr-radius"> </div> <div class="card__content card__padding"> <div class="card__share"> <div class="card__social"> <a class="share-icon facebook" href="#"><span class="fa fa-facebook"></span></a> <a class="share-icon twitter" href="#"><span class="fa fa-twitter"></span></a> <a class="share-icon googleplus" href="#"><span class="fa fa-google-plus"></span></a> </div> <a id="share" class="share-toggle share-icon" href="#"></a> </div> <div class="card__meta"> <a href="#">Web Design</a> <time>17th March</time> </div> <article class="card__article"> <h2><a href="#">Material Design Card - For Blog Post Article</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus harum...</p> </article> </div> <div class="card__action"> <div class="card__author"> <img src="http://lorempixel.com/40/40/sports/" alt="user"> <div class="card__author-content"> By <a href="#">John Doe</a> </div> </div> </div> </div> <div class="card radius shadowDepth1"> <div class="card__image border-tlr-radius"> <img src="http://lorempixel.com/400/200/sports/" alt="image" class="border-tlr-radius"> </div> <div class="card__content card__padding"> <div class="card__share"> <div class="card__social"> <a class="share-icon facebook" href="#"><span class="fa fa-facebook"></span></a> <a class="share-icon twitter" href="#"><span class="fa fa-twitter"></span></a> <a class="share-icon googleplus" href="#"><span class="fa fa-google-plus"></span></a> </div> <a id="share" class="share-toggle share-icon" href="#"></a> </div> <div class="card__meta"> <a href="#">Web Design</a> <time>17th March</time> </div> <article class="card__article"> <h2><a href="#">Material Design Card - For Blog Post Article</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus harum...</p> </article> </div> <div class="card__action"> <div class="card__author"> <img src="http://lorempixel.com/40/40/sports/" alt="user"> <div class="card__author-content"> By <a href="#">John Doe</a> </div> </div> </div> </div> </div> </div>
@import 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'; @import 'http://fonts.googleapis.com/css?family=Roboto:700,400'; /* * Basic Reset */ *, *:after, *:before { margin: 0; padding: 0; box-sizing: border-box; } /** * Basics Styles */ html { font-size: 62.5%; } body { background-color: #eee; font-family: Roboto; font-weight: 400; font-size: 1.6em; line-height: 1.6; color: #666; } a { text-decoration: none; color: #3498db; } a:hover { color: #2980b9; } h2 { line-height: 1.2; margin-bottom: 1.6rem; } .wrapper { max-width: 400px; margin: 50px auto; padding-left: 1em; padding-right: 1em; } /** * Helpers */ .border-tlr-radius { border-top-left-radius: 2px; border-top-right-radius: 2px; } .text-center { text-align: center; } .radius { border-radius: 2px; } .padding-tb { padding-top: 1.6rem; padding-bottom: 1.6rem;} .shadowDepth0 { box-shadow: 0 1px 3px rgba(0,0,0, 0.12); } .shadowDepth1 { box-shadow: 0 1px 3px rgba(0,0,0, 0.12), 0 1px 2px rgba(0,0,0, 0.24); } /** * Card Styles */ .card { background-color: #fff; margin-bottom: 1.6rem; } .card__padding { padding: 1.6rem; } .card__image { min-height: 100px; background-color: #eee; } .card__image img { width: 100%; max-width: 100%; display: block; } .card__content { position: relative; } /* card meta */ .card__meta time { font-size: 1.5rem; color: #bbb; margin-left: 0.8rem; } /* card article */ .card__article a { text-decoration: none; color: #444; transition: all 0.5s ease; } .card__article a:hover { color: #2980b9; } /* card action */ .card__action { overflow: hidden; padding-right: 1.6rem; padding-left: 1.6rem; padding-bottom: 1.6rem; } .card__author {} .card__author img, .card__author-content { display: inline-block; vertical-align: middle; } .card__author img{ border-radius: 50%; margin-right: 0.6em; } .card__share { float: right; position: relative; margin-top: -42px; } .card__social { position: absolute; top: 0; right: 0; visibility: hidden; width: 160px; transform: translateZ(0); transform: translateX(0px); transition: transform 0.35s ease; } .card__social--active { visibility: visible; /*z-index: 3;*/ transform: translateZ(0); transform: translateX(-48px); transition: transform 0.35s ease; } .share-toggle { z-index: 2; } .share-toggle:before { content: "\f1e0"; font-family: 'FontAwesome'; color: #3498db; } .share-toggle.share-expanded:before { content: "\f00d"; } .share-icon { display: inline-block; width: 48px; height: 48px; line-height: 48px; text-align: center; border-radius: 50%; background-color: #fff; transition: all 0.3s ease; outline: 0; box-shadow: 0 2px 4px rgba(0,0,0, 0.12), 0 2px 4px rgba(0,0,0, 0.24); } .share-icon:hover, .share-icon:focus { box-shadow: 0 3px 6px rgba(0,0,0, 0.12), 0 3px 6px rgba(0,0,0, 0.24); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .facebook { background-color: #3b5998; } .twitter { background-color: #00abe3; } .googleplus { background-color: #d3492c; } .facebook, .twitter, .googleplus { color: #fff; } .facebook:hover, .twitter:hover, .googleplus:hover { color: #eee; }

Related: See More


Questions / Comments: