<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css"/>
<!--Card with Media-->
<div class="media block-update-card">
<a class="pull-left" href="#">
<img class="media-object update-card-MDimentions" src="http://3.bp.blogspot.com/-IbEOTNtCMyU/TfCAdHaAxEI/AAAAAAAAA8U/EATib38SSAM/s320/joe-mcelderry.jpg" alt="...">
</a>
<div class="media-body update-card-body">
<h4 class="media-heading">Manning Hilton</h4>
<p>This is the body content of this media.This can be
used as an update panel</p>
</div>
</div>
<!--Simple Card Layout-->
<div class="block-update-card">
<div class="update-card-body">
<h4>Vinothbabu K</h4>
<p>This is me. I am a Good Boy.This is the body content of this media.This can be
used as an update panel.</p>
</div>
</div>
<!--Wanna Call Someone :P -->
<div class="media block-update-card">
<a class="pull-left" href="#">
<img class="media-object update-card-MDimentions" src="http://3.bp.blogspot.com/-IbEOTNtCMyU/TfCAdHaAxEI/AAAAAAAAA8U/EATib38SSAM/s320/joe-mcelderry.jpg" alt="...">
</a>
<div class="media-body update-card-body">
<h4 class="media-heading">Gerardo Reaño</h4>
<div class="btn-toolbar card-body-social" role="toolbar">
<div class="btn-group fa fa-github-alt git"></div>
<div class="btn-group linkedin fa fa-linkedin-square"></div>
<div class="btn-group twitter fa fa-twitter"></div>
<div class="btn-group facebook fa fa-facebook"></div>
<div class="btn-group google-plus fa fa-google-plus"></div>
</div>
</div>
</div>
<!--Simple Card with Status Highlight-->
<div class="block-update-card status">
<div class="h-status">
</div>
<div class="update-card-body">
<h4>Vinothbabu K</h4>
<p>This is me. I am a Good Boy.This is the body content of this media.This can be
used as an update panel.</p>
</div>
</div>
<!--Simple Card with Status Highlight-->
<div class="block-update-card">
<div class="v-status">
</div>
<div class="update-card-body">
<h4>Vinothbabu K</h4>
<p>This is me. I am a Good Boy.This is the body content of this media.This can be
used as an update panel.</p>
</div>
</div>
<!--Card with basic actions-->
<div class="block-update-card status">
<div class="update-card-body">
<div class="update-card-body">
<h4>Vinothbabu K</h4>
<p>This is me. I am a Good Boy.This is the body content of this media.This can be
used as an update panel.</p>
</div>
</div>
<div class="card-action-pellet btn-toolbar pull-right" role="toolbar">
<div class="btn-group fa fa-mail-reply"></div>
<div class="btn-group fa fa-map-marker"></div>
<div class="btn-group fa fa-magic"></div>
<div class="btn-group fa fa-photo"></div>
</div>
</div>
<!--Notification with a Clickable bottom-->
<div class="block-update-card status">
<div class="update-card-body">
<div class="update-card-body">
<h4>Vinothbabu K</h4>
<p>This is me. I am a Good Boy.This is the body content of this media.This can be
used as an update panel.</p>
</div>
</div>
<p class="text-center card-bottom-status">
UPDATE STATUS
</p>
</div>
