Bootstrap snippet: Users cards widget

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: cards



<div class="row"> <div class="col-md-4"> <div class="widget-container"> <div class="widget"> <div class="profile-card"> <div class="card-header"> <div class="header-avatar"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="andy"> </div> <div class="header-name"> Anderson Charlotte </div> </div> <div class="card-body bg-warning"> <div class="body-description"> A user profile is a group of settings that define how Outlook is set up for a particular user. For example, a profile may include access to a mailbox on Microsoft Exchange Server, and specify that the Outlook Address Book appear in the Address Book dialog box. A profile can contain any number of information services. </div> </div> <div class="card-footer"> <div class="footer-social"> <div class="row"> <div class="col-xs-3"> <a href=""> <i class="fa fa-facebook"></i> </a> </div> <div class="col-xs-3"> <a href=""> <i class="fa fa-twitter"></i> </a> </div> <div class="col-xs-3"> <a href=""> <i class="fa fa-dribbble"></i> </a> </div> <div class="col-xs-3"> <a href=""> <i class="fa fa-instagram"></i> </a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="widget-container"> <div class="widget"> <div class="profile-card"> <div class="card-header"> <div class="header-avatar"> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="claudio"> </div> <div class="header-name"> Caludio Morrison </div> </div> <div class="card-body bg-primary"> <div class="body-description"> A user profile is a group of settings that define how Outlook is set up for a particular user. For example, a profile may include access to a mailbox on Microsoft Exchange Server, and specify that the Outlook Address Book appear in the Address Book dialog box. A profile can contain any number of information services. </div> </div> <div class="card-footer"> <div class="footer-social"> <div class="row"> <div class="col-xs-3"> <a href=""> <i class="fa fa-facebook"></i> </a> </div> <div class="col-xs-3"> <a href=""> <i class="fa fa-twitter"></i> </a> </div> <div class="col-xs-3"> <a href=""> <i class="fa fa-dribbble"></i> </a> </div> <div class="col-xs-3"> <a href=""> <i class="fa fa-instagram"></i> </a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="widget-container"> <div class="widget"> <div class="profile-card"> <div class="card-header"> <div class="header-avatar"> <img src="http://bootdey.com/img/Content/avatar/avatar7.png" alt="anna"> </div> <div class="header-name"> Markez Chan </div> </div> <div class="card-body bg-info"> <div class="body-description"> A user profile is a group of settings that define how Outlook is set up for a particular user. For example, a profile may include access to a mailbox on Microsoft Exchange Server, and specify that the Outlook Address Book appear in the Address Book dialog box. A profile can contain any number of information services. </div> </div> <div class="card-footer"> <div class="footer-social"> <div class="row"> <div class="col-xs-3"> <a href=""> <i class="fa fa-facebook"></i> </a> </div> <div class="col-xs-3"> <a href=""> <i class="fa fa-twitter"></i> </a> </div> <div class="col-xs-3"> <a href=""> <i class="fa fa-dribbble"></i> </a> </div> <div class="col-xs-3"> <a href=""> <i class="fa fa-instagram"></i> </a> </div> </div> </div> </div> </div> </div> </div> </div> </div>
body{ margin-top:20px; background:#eee; } .widget-container { -webkit-border-radius: 2px; -webkit-background-clip: padding-box; -moz-border-radius: 2px; -moz-background-clip: padding; border-radius: 2px; background-clip: padding-box; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .07); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .07); box-shadow: 0 1px 2px rgba(0, 0, 0, .07); margin-bottom: 30px } .widget-container .widget { margin-bottom: 0 } .widget-container>.row { margin-right: 0 !important; margin-left: 0 !important } .widget-container>.row>[class*="col-"] { padding-left: 0 !important; padding-right: 0 !important } .widget { -webkit-border-radius: 2px; -webkit-background-clip: padding-box; -moz-border-radius: 2px; -moz-background-clip: padding; border-radius: 2px; background-clip: padding-box; background-color: #fff; font-weight: 300; margin-bottom: 30px; position: relative; vertical-align: middle } .widget .row { font-size: 0; margin-left: 0; margin-right: 0 } .widget .row:before { display: none } .widget .row .col { font-size: 11px } .widget .row .col:first-child { -webkit-border-radius: 2px 0 0 2px; -webkit-background-clip: padding-box; -moz-border-radius: 2px 0 0 2px; -moz-background-clip: padding; border-radius: 2px 0 0 2px; background-clip: padding-box } .widget .row .col:last-child { -webkit-border-radius: 0 2px 2px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 2px 2px 0; -moz-background-clip: padding; border-radius: 0 2px 2px 0; background-clip: padding-box } .widget .col { display: inline-block; vertical-align: top } .widget [class*=col-] { font-size: 11px; margin: 0; padding: 0 } .widget .widget-stat { position: absolute } .widget .widget-stat.top { top: 7px } .widget .widget-stat.right { right: 10px } .widget .widget-stat.left { left: 10px } .widget .widget-stat.bottom { bottom: 7px } .widget .widget-stat strong, .widget .widget-stat span, .widget .widget-stat i, .widget .widget-stat div { vertical-align: top } .widget .progress { margin-bottom: 0 } .profile-card .card-header .header-avatar { text-align: center } .profile-card .card-header .header-avatar img { margin: 25px 0 15px; width: 128px; height: 128px } .profile-card .card-header .header-name { font-size: 20px; font-weight: 400; text-align: center } .profile-card .card-body { -webkit-transform: skew(0deg, -10deg); -moz-transform: skew(0deg, -10deg); -o-transform: skew(0deg, -10deg); -ms-transform: skew(0deg, -10deg); transform: skew(0deg, -10deg); margin-top: 30px; min-height: 100px; padding: 50px 20px } .profile-card .card-body .body-description { -webkit-transform: skew(0deg, 10deg); -moz-transform: skew(0deg, 10deg); -o-transform: skew(0deg, 10deg); -ms-transform: skew(0deg, 10deg); transform: skew(0deg, 10deg); color: #fff; font-size: 13px } .profile-card .card-footer { margin-top: 50px; padding: 10px 0 20px } .profile-card .card-footer .footer-social { text-align: center } .profile-card .card-footer .footer-social .row { margin: 0 } .profile-card .card-footer .footer-social i { color: #292929; font-size: 20px } .bg-primary { background-color: #29c7ca !important; color: #fff !important } .bg-success { background-color: #1dbc9c !important; color: #fff !important } .bg-info { background-color: #34b5dc !important; color: #fff !important } .bg-warning { background-color: #ffc107 !important; color: #fff !important } .bg-danger { background-color: #cd4237 !important; color: #fff !important } .bg-inverse { background-color: #fefefe !important; color: #292929 !important } .bg-white { background-color: #fff !important; color: #292929 !important } .bg-transparent { background-color: transparent !important } .bg-body { background-color: #f1f3f2 !important } .bg-highlight { background-color: #ff8 } .bg-default-darker { background-color: #212121 }
Dey-Dey

Users cards widget

Dey-Dey
  Aug 22nd, 11:46
1.6K Views