Bootstrap snippet: team members 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: team,users,list



<div class="row bootstrap snippets"> <div class="col-md-3 container-widget"> <div class="panel panel-info panel-widget"> <div class="panel-title text-center"> Team Members </div> <div class="panel-body"> <ul class="basic-list image-list"> <li><img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="img" class="img"><b>John Doe</b><span class="desc">Designer</span></li> <li><img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="img" class="img"><b>Sarah Smith </b><span class="desc">Front-End Developer</span></li> <li><img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="img" class="img"><b>Stephen Doe</b><span class="desc">Back-End Developer</span></li> <li><img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="img" class="img"><b>Kendra Hall</b><span class="desc">Marketing</span></li> <li><img src="http://bootdey.com/img/Content/avatar/avatar5.png" alt="img" class="img"><b>Mark Doe</b><span class="desc">iOS Developer</span></li> </ul> </div> </div> </div> <div class="col-md-3 container-widget"> <div class="panel panel-success panel-widget"> <div class="panel-title text-center"> Team Members </div> <div class="panel-body"> <ul class="basic-list image-list"> <li><img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="img" class="img"><b>John Doe</b><span class="desc">Designer</span></li> <li><img src="http://bootdey.com/img/Content/avatar/avatar7.png" alt="img" class="img"><b>Sarah Smith </b><span class="desc">Front-End Developer</span></li> <li><img src="http://bootdey.com/img/Content/avatar/avatar8.png" alt="img" class="img"><b>Stephen Doe</b><span class="desc">Back-End Developer</span></li> <li><img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="img" class="img"><b>Kendra Hall</b><span class="desc">Marketing</span></li> <li><img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="img" class="img"><b>Mark Doe</b><span class="desc">iOS Developer</span></li> </ul> </div> </div> </div> </div>
body{ margin-top:60px; } .container-widget .panel { margin-bottom: 15px; border-radius: 0px; border: 1px #e6e9ee solid; } .panel-info { background: #3f51b5 url(http://themesground.com/modern/demo1/HTML/img/intro-bg.png) repeat top left; color: #fff; } .panel-success { background: #1ab394 url(http://themesground.com/modern/demo1/HTML/img/intro-bg.png) repeat top left; color: #fff; } .panel-widget { overflow: hidden; border: none; } .panel .panel-title { color: #58666e; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0px; } .panel-title { font-family: 'Montserrat', sans-serif; color: #58666e; font-size: 12px; font-weight: bold; text-transform: uppercase; padding: 16px 20px; margin: -20px; background: #fff; margin-bottom: 5px; border-bottom: none; border-top-left-radius: 3px; border-top-right-radius: 3px; letter-spacing: 1px; } .panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .basic-list { margin-bottom: 0; padding: 0; } ul, ol { margin-top: 0; margin-bottom: 10px; } /* Basic List */ .basic-list { margin-bottom: 0; padding: 0; } .basic-list li { display: block; position: relative; padding: 12px 0; } .basic-list li:last-child { border-bottom: none; } .basic-list .right { position: absolute; right: 0; display: inline-block; padding: 3px 6px; font-weight: 600; } /* Image List */ .image-list li { padding-left: 50px; } .image-list .img { width: 40px; height: 40px; position: absolute; left: 0; border-radius: 0px; } .image-list .desc { font-size: 12px; opacity: 0.8; display: block; }
Dey-Dey

team members list

Dey-Dey
  Feb 18th, 08:04
1.8K Views