Bootstrap snippet: list with description

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



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="row"> <div class="col-xs-12"> <div class="media search-media"> <div class="media-left"> <a href="#"> <img class="media-object" data-src="holder.js/72x72" alt="72x72" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2272%22%20height%3D%2272%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1544082d1c7%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1544082d1c7%22%3E%3Crect%20width%3D%2272%22%20height%3D%2272%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2217.46875%22%20y%3D%2240.5%22%3E72x72%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 72px; height: 72px;"> </a> </div> <div class="media-body"> <div> <h4 class="media-heading"> <a href="#" class="blue">Media heading</a> </h4> </div> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ...</p> <div class="search-actions text-center"> <span class="text-info">$</span> <span class="blue bolder bigger-150">300</span> monthly <div class="action-buttons bigger-125"> <a href="#"> <i class="ace-icon fa fa-phone green"></i> </a> <a href="#"> <i class="ace-icon fa fa-heart red"></i> </a> <a href="#"> <i class="ace-icon fa fa-star orange2"></i> </a> </div> <a class="search-btn-action btn btn-sm btn-block btn-info">Book it!</a> </div> </div> </div> <div class="media search-media disabled"> <div class="media-left"> <a href="#"> <img class="media-object" data-src="holder.js/72x72" alt="72x72" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2272%22%20height%3D%2272%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1544082d1cc%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1544082d1cc%22%3E%3Crect%20width%3D%2272%22%20height%3D%2272%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2217.46875%22%20y%3D%2240.5%22%3E72x72%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 72px; height: 72px;"> </a> </div> <div class="media-body"> <div> <h4 class="media-heading"> <a href="#" class="blue">Media heading</a> </h4> </div> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ...</p> <div class="search-actions text-center"> <span class="grey">$</span> <span class="grey bolder bigger-125">250</span> monthly <div class="action-buttons bigger-125"> <a href="#"> <i class="ace-icon fa fa-phone green"></i> </a> <a href="#"> <i class="ace-icon fa fa-heart red"></i> </a> <a href="#"> <i class="ace-icon fa fa-star orange2"></i> </a> </div> <a class="search-btn-action btn btn-sm btn-block btn-grey disabled">Unavailable!</a> </div> </div> </div> <div class="media search-media"> <div class="media-left"> <a href="#"> <img class="media-object" data-src="holder.js/72x72" alt="72x72" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2272%22%20height%3D%2272%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1544082d1d1%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1544082d1d1%22%3E%3Crect%20width%3D%2272%22%20height%3D%2272%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2217.46875%22%20y%3D%2240.5%22%3E72x72%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 72px; height: 72px;"> </a> </div> <div class="media-body"> <div> <h4 class="media-heading"> <a href="#" class="blue">Media heading</a> </h4> </div> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ...</p> <div class="search-actions text-center"> <span class="text-info">$</span> <span class="blue bolder bigger-150">220</span> monthly <div class="action-buttons bigger-125"> <a href="#"> <i class="ace-icon fa fa-phone green"></i> </a> <a href="#"> <i class="ace-icon fa fa-heart red"></i> </a> <a href="#"> <i class="ace-icon fa fa-star orange2"></i> </a> </div> <a class="search-btn-action btn btn-sm btn-block btn-info">Book it!</a> </div> </div> </div> </div> </div>
body{margin-top:20px;} .search-media { border: 1px solid #ddd; margin-top: -1px; padding: 12px 150px 12px 12px; -webkit-transition: border .1s ease-in-out 0s; -o-transition: border .1s ease-in-out 0s; transition: border .1s ease-in-out 0s; position: relative } .search-media:hover { border-color: #75A8CE; z-index: 1 } .search-media .search-actions { position: absolute; right: 0; top: 0; bottom: 0; height: 100%; width: 20%; min-width: 100px; max-width: 150px; padding: 6px 9px } .search-media .search-actions::before { content: ""; display: block; position: absolute; left: 0; top: 8px; bottom: 16px; width: 1px; background-image: -webkit-linear-gradient(top, #FFF 0, #DDD 100%); background-image: -o-linear-gradient(top, #FFF 0, #DDD 100%); background-image: linear-gradient(to bottom, #FFF 0, #DDD 100%); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffdddddd', GradientType=0) } .search-media:hover .search-actions { background-color: #F0F4F7 } .search-media.disabled:hover .search-actions { background-color: #F6F6F6 } .search-media:not(.disabled):hover .search-actions::before { background-image: -webkit-linear-gradient(top, #FFF 0, #84bee5 100%); background-image: -o-linear-gradient(top, #FFF 0, #84bee5 100%); background-image: linear-gradient(to bottom, #FFF 0, #84bee5 100%); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ff84bee5', GradientType=0) } .search-filter-header { padding: 8px; margin: -4px } .search-btn-action { position: absolute; bottom: -5px; left: 0; right: 0; width: auto; -webkit-transition: bottom .15s; -o-transition: bottom .15s; transition: bottom .15s } .search-media:hover .search-btn-action { bottom: 1px } .search-promotion.label { position: absolute; margin-top: -1px; margin-left: -1px } .search-filter-element { padding: 12px; background-color: #FFF; border: 1px solid #C9DDE7 } .search-results { padding: 24px 12px; min-height: 20px } .search-result { margin-top: -1px; position: relative; padding: 12px; border: 1px dotted; border-color: #DDD #FFF #FFF; border-color: rgba(0, 0, 0, .11) transparent transparent } .search-result:hover { background-color: #F7F7F7; border-color: #D6E1EA; border-style: solid; z-index: 1 } .search-result:first-child { border-top-color: transparent } .search-result:first-child:hover { border-top-color: #D6E1EA } .search-result .search-title { font-size: 16px; margin-top: 0; margin-bottom: 6px } .search-result .search-content { margin-top: 2px } .btn-grey.disabled, .btn-grey.disabled.active, .btn-grey.disabled:active, .btn-grey.disabled:focus, .btn-grey.disabled:hover, .btn-grey[disabled], .btn-grey[disabled].active, .btn-grey[disabled]:active, .btn-grey[disabled]:focus, .btn-grey[disabled]:hover, fieldset[disabled] .btn-grey, fieldset[disabled] .btn-grey.active, fieldset[disabled] .btn-grey:active, fieldset[disabled] .btn-grey:focus, fieldset[disabled] .btn-grey:hover { background-color: #A0A0A0!important; border-color: #A0A0A0; color:#fff; } .dark { color: #333!important } .white { color: #FFF!important } .red { color: #DD5A43!important } .red2 { color: #E08374!important } .light-red { color: #F77!important } .blue { color: #478FCA!important } .light-blue { color: #93CBF9!important } .green { color: #69AA46!important } .light-green { color: #B0D877!important } .orange { color: #FF892A!important } .orange2 { color: #FEB902!important } .light-orange { color: #FCAC6F!important } .purple { color: #A069C3!important } .pink { color: #C6699F!important } .pink2 { color: #D6487E!important } .brown { color: brown!important } .grey { color: #777!important }
Dey-Dey

list with description

Dey-Dey
  Jul 12th, 07:51
1.8K Views