"Card List With Multi Color Option in CSS"
Bootstrap 3.3.0 Snippet by jpolly168

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> /*--------------------------------------*/ /* jpolly168 AeVale/OneSixEight */ /* XblackvelvetX */ /* Main Elements,,,,,,, */ /* #wah comes in waves.... like wahhhhhh.*/ /*--------------------------------------*/ <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="card-list"> <div class="card-header"> <div class="card-heading"> <h1>Card List</h1> </div> </div> <div class="item"> <p><a href="http://color">What is material Design??</a></p> </div> <div class="item"> <p><a href="http://color">Animation and Elevation</a></p> </div> <div class="item"> <p><a href="http://color">Style and Color</a></p> </div> <div class="item"> <p><a href="https://www.google.com/design/spec/style/writing.html">Layout</a></p> </div> <div class="item"> <p><a href="http://color">Components</a></p> </div> <div class="item"> <p><a href="http://color">Patterns</a></p> </div> <div class="item"> <p><a href="http://color">Resources</a></p> </div> </div> </div> </div>
/*--------------------------------------*/ /* jpolly168 AeVale/OneSixEight */ /* XblackvelvetX */ /* Main Elements,,,,,,, */ /* #wah comes in waves.... like wahhhhhh.*/ /*--------------------------------------*/ @import url(http://fonts.googleapis.com/css?family=Roboto:400,500,900); .card-header { width: 100%; color: #2196F3; padding: 0px; margin-left: 0; margin-bottom:.5em; overflow: hidden; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family:'Roboto,' sans-serif; font-weight: 800; background:#2196F3; } .card-heading { display: block; line-height: 28px; margin-bottom: 8px; margin-left: 1em; border-bottom: 1px #2196F3; font-family:'Roboto,' sans-serif; font-weight: 800; font-size: 24px; color:#ffffff; } .card-list { margin-left:2% margin-right:2%; background: #FFF; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: block; border: 1px solid #AAA; padding: 0px; overflow: hidden; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .item{ background: #FFF; display: block; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; border: 1px solid #AAA; border-bottom: 3px solid #BBB; padding: 0px; overflow: hidden; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); font-family: 'Roboto', sans-serif; -webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .card-list .card-item p, a { margin-left:2em; font-family:'Roboto,' sans-serif; font-weight: 200; padding-top:.2em; color:#2196F3; }

Related: See More


Questions / Comments: