Foundation zurb snippet: Gallery user list

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: users,list



<div class="content-wrapper container"> <div class="row"> <div class="large-12"> <div class="page-title"> <h1>users <small></small></h1> </div> </div> </div><!-- end .page title--> <div class="row users-row"> <div class="large-6 columns"> <div class="user-col"> <div class="media-object"> <a class="pull-left media-object-section" href="#"> <img class=" img-circle" src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="100x100" data-src="holder.js/100x100" style="width: 100px; height: 100px;"> </a> <div class="media-object-section"> <h3 class="follower-name">Ray Sin</h3> <div><i class="fa fa-map-marker"></i> San Francisco, California, USA</div> <div><i class="fa fa-briefcase"></i> Software Engineer at <a href="">SomeCompany, Inc.</a></div> <div style="height: 20px;"></div> <div class="btn-toolbar"> <div class="button-group"> <a class="button btn-3d">Send message</a> <a class="button btn-3d success">Followers</a> <a class="button btn-3d warning">Following</a> </div><!-- btn-group --> </div><!-- btn-toolbar --> </div><!-- media-body --> </div> </div> </div><!--.col-6--> <div class="large-6 columns"> <div class="user-col"> <div class="media-object"> <a class="pull-left media-object-section" href="#"> <img class=" img-circle" src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="100x100" data-src="holder.js/100x100" style="width: 100px; height: 100px;"> </a> <div class="media-object-section"> <h3 class="follower-name">Ray Sin</h3> <div><i class="fa fa-map-marker"></i> San Francisco, California, USA</div> <div><i class="fa fa-briefcase"></i> Software Engineer at <a href="">SomeCompany, Inc.</a></div> <div style="height: 20px;"></div> <div class="btn-toolbar"> <div class="button-group"> <a class="button btn-3d">Send message</a> <a class="button btn-3d success">Followers</a> <a class="button btn-3d warning">Following</a> </div><!-- btn-group --> </div><!-- btn-toolbar --> </div><!-- media-body --> </div> </div> </div><!--.col-6--> <div class="large-6 columns"> <div class="user-col"> <div class="media-object"> <a class="pull-left media-object-section" href="#"> <img class=" img-circle" src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="100x100" data-src="holder.js/100x100" style="width: 100px; height: 100px;"> </a> <div class="media-object-section"> <h3 class="follower-name">Ray Sin</h3> <div><i class="fa fa-map-marker"></i> San Francisco, California, USA</div> <div><i class="fa fa-briefcase"></i> Software Engineer at <a href="">SomeCompany, Inc.</a></div> <div style="height: 20px;"></div> <div class="btn-toolbar"> <div class="button-group"> <a class="button btn-3d">Messages</a> <a class="button btn-3d success">Followers</a> <a class="button btn-3d warning">Following</a> </div><!-- btn-group --> </div><!-- btn-toolbar --> </div><!-- media-body --> </div> </div> </div><!--.col-6--> <div class="large-6 columns"> <div class="user-col"> <div class="media-object"> <a class="pull-left media-object-section" href="#"> <img class=" img-circle" src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="100x100" data-src="holder.js/100x100" style="width: 100px; height: 100px;"> </a> <div class="media-object-section"> <h3 class="follower-name">Ray Sin</h3> <div><i class="fa fa-map-marker"></i> San Francisco, California, USA</div> <div><i class="fa fa-briefcase"></i> Software Engineer at <a href="">SomeCompany, Inc.</a></div> <div style="height: 20px;"></div> <div class="btn-toolbar"> <div class="button-group"> <a class="button btn-3d">Send message</a> <a class="button btn-3d success">Followers</a> <a class="button btn-3d warning">Following</a> </div><!-- btn-group --> </div><!-- btn-toolbar --> </div><!-- media-body --> </div> </div> </div><!--.col-6--> </div> </div>
body{ margin-top:20px; background:#eee; } .user-col { padding: 15px; background-color: #fff; margin-bottom: 30px; } .btn-3d { border-bottom: 3px solid rgba(0,0,0,.15); } .img-circle { border-radius: 50%; } .users-row img { margin-right: 10px; }
Dey-Dey

Gallery user list

Dey-Dey
  May 15th, 20:59
67 Views