Bootstrap snippet: contacts card

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: contacts,card,list,contact,people,image



<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container profile"> <div class="col-md-9"> <div class="panel panel-profile"> <div class="panel-heading overflow-h"> <h2 class="panel-title heading-sm pull-left"><i class="fa fa-tasks"></i>Contacts</h2> <a href="#" class="btn-u btn-brd btn-brd-hover btn-u-dark btn-u-xs pull-right">View All</a> </div> <div class="panel-body"> <div class="row"> <div class="col-sm-6"> <div class="profile-blog blog-border"> <img class="rounded-x" src="http://bootdey.com/img/Content/user_2.jpg" alt=""> <div class="name-location"> <strong>Maria Snort</strong> <span><i class="fa fa-map-marker"></i><a href="#">California,</a> <a href="#">US</a></span> </div> <div class="clearfix margin-bottom-20"></div> <p>Lorem Donec non dignissim eros. Mauris faucibus turpis volutpat sagittis rhoncus. Pellentesque et rhoncus sapien, sed ullamcorper justo.</p> <hr> <ul class="list-inline share-list"> <li><i class="fa fa-bell"></i><a href="#">12 Notifications</a></li> <li><i class="fa fa-group"></i><a href="#">54 Followers</a></li> <li><i class="fa fa-twitter"></i><a href="#">Retweet</a></li> </ul> </div> </div> <div class="col-sm-6"> <div class="profile-blog blog-border"> <img class="rounded-x" src="http://bootdey.com/img/Content/user_1.jpg" alt=""> <div class="name-location"> <strong>Mark McClerk</strong> <span><i class="fa fa-map-marker"></i><a href="#">Moscow,</a> <a href="#">Russia</a></span> </div> <div class="clearfix margin-bottom-20"></div> <p>Donec non dignissim eros. Mauris faucibus turpis volutpat sagittis rhoncus. Pellentesque et rhoncus sapien, sed ullamcorper justo.</p> <hr> <ul class="list-inline share-list"> <li><i class="fa fa-bell"></i><a href="#">37 Notifications</a></li> <li><i class="fa fa-group"></i><a href="#">46 Followers</a></li> <li><i class="fa fa-twitter"></i><a href="#">Retweet</a></li> </ul> </div> </div> </div> </div> </div> </div> </div>
body{ margin-top:20px; background:#eee; } .profile .panel-profile { border: none; margin-bottom: 0; box-shadow: none; } .profile .panel-heading { color: #585f69; background: #fff; padding: 7px 15px; border-bottom: solid 3px #f7f7f7; } .overflow-h { overflow: hidden; } .panel-heading { color: #fff; padding: 5px 15px; } .profile .panel-title { font-size: 16px; } .profile .profile-blog { padding: 20px; background: #fff; } .profile .blog-border { border: 1px solid #f0f0f0; } .profile .profile-blog img { float: left; width: 50px; height: 50px; margin-right: 20px; } .rounded-x { border-radius: 50% !important; } .profile .name-location { overflow: hidden; } .profile .name-location strong { color: #555; display: block; font-size: 16px; } .profile .name-location span a { color: #555; } .margin-bottom-20 { margin-bottom: 20px; } .share-list { margin-bottom: 0; } .list-inline { padding-left: 0; margin-left: -5px; list-style: none; } .list-inline li { display: inline-block; padding-right: 5px; padding-left: 5px; font-size:11px; } .share-list li i { color: #72c02c; margin-right: 5px; }
Dey-Dey

contacts card

Dey-Dey
  Apr 13th 2015, 08:23
4.0K Views