"card list"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!-- profile: 300x300 --> <!-- poster: 136x190 --> <!-- thumbnail: 320x240 --> <div class="l-nav"> <div class="l-nav__container"> <button class="l-nav__button"> Submit </button> </div> </div> <div class="l-container"> <ul> <li class="list" data-name="JoeBrown"> <!-- Profile Section --> <div class="list__profile"> <div> <img src="https://tinyurl.com/glz9lv7"> </div> <div class="list__label"> <div class="list__label--header"> Name </div> <div class="list__label--value"> JoeBrown </div> </div> </div> <!-- Photo Thumbnail Section --> <div class="list__photos"> <span> <img src="http://placehold.it/320x240"> </span> <span> <img src="http://placehold.it/320x240"> </span> <span> <img src="http://placehold.it/320x240"> </span> </div> </li> <li class="list" data-name="JaneBrown"> <!-- Profile Section --> <div class="list__profile"> <div> <img src="https://tinyurl.com/hbr9l7v"> </div> <div class="list__label"> <div class="list__label--header"> Name </div> <div class="list__label--value"> JaneBrown </div> </div> </div> <!-- Photo Thumbnail Section --> <div class="list__photos"> <span> <img src="http://placehold.it/320x240"> </span> <span> <img src="http://placehold.it/320x240"> </span> <span> <img src="http://placehold.it/320x240"> </span> </div> </li> <li class="list" data-name="JoeyBlack123"> <!-- Profile Section --> <div class="list__profile"> <div> <img src="https://tinyurl.com/glz9lv7"> </div> <div class="list__label"> <div class="list__label--header"> Name </div> <div class="list__label--value"> JoeyBlack123 </div> </div> </div> <!-- Photo Thumbnail Section --> <div class="list__photos"> <span> <img src="http://placehold.it/320x240"> </span> <span> <img src="http://placehold.it/320x240"> </span> <span> <img src="http://placehold.it/320x240"> </span> </div> </li> <li class="list" data-name="BobbyBlack444"> <!-- Profile Section --> <div class="list__profile"> <div> <img src="https://tinyurl.com/glz9lv7"> </div> <div class="list__label"> <div class="list__label--header"> Name </div> <div class="list__label--value"> BobbyBlack444 </div> </div> </div> <!-- Photo Thumbnail Section --> <div class="list__photos"> <span> <img src="http://placehold.it/320x240"> </span> <span> <img src="http://placehold.it/320x240"> </span> <span> <img src="http://placehold.it/320x240"> </span> </div> </li> </ul> </div>
/* VARIABLES ==================== */ /* BASE ==================== */ @import "https://fonts.googleapis.com/css?family=Open+Sans"; body { margin: 0; font-family: 'Open Sans', sans-serif; background-color: #e0e0e0; } body ul { padding: 0; list-style-type: none; } img { width: 75px; margin: 7px 5px 5px 5px; border-radius: 5px; } button { border: none; font-size: 1em; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; cursor: pointer; } button:focus { outline: 0; } /* LAYOUT ==================== */ .l-nav { display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; width: 100%; height: 100px; background-color: #242D33; } .l-nav__container, .l-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; max-width: 980px; margin: 0 auto; } @media screen and (max-width: 1050px) { .l-nav__container, .l-container { width: 95%; } } .l-nav__button { color: #e0e0e0; background-color: #3392CC; padding: 10px; text-align: center; width: 30%; border-radius: 5px; } .l-nav__button:hover { background-color: #2e83b8; color: white; } .l-container { display: block; padding-top: 115px; } /* MODULE ==================== */ .list { display: -webkit-box; display: -ms-flexbox; display: flex; background-color: white; margin: 10px; padding: 5px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .list:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), 0 5px 8px rgba(0, 0, 0, 0.22); cursor: pointer; } .list__profile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: left; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .list__photos { display: -webkit-box; display: -ms-flexbox; display: flex; text-align: right; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .list__photos img { width: 100px; } @media screen and (max-width: 400px) { .list__photos img { width: 75px; } } .list__label { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 15px; } .list__label--header { color: #9a9a9a; } .list__label--value { font-size: 1.3em; } @media screen and (max-width: 650px) { .list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .list__profile { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 10px; } .list__label { width: 170px; } .list__photos { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } /* STATE ==================== */ .is-list-selected { background: #cb2d3e; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #cb2d3e, #ef473a); background: -webkit-linear-gradient(left, #cb2d3e, #ef473a); background: linear-gradient(to right, #cb2d3e, #ef473a); color: white; }
// Add state class for selected $(".list").click(function() { $(this).toggleClass("is-list-selected"); }); // Iterate through list and find selected $('.l-nav__button').click(function(){ var marked = []; var not_marked = []; $('.list').each(function(){ var has_selected = $(this).hasClass("is-list-selected"); if (has_selected == true) { value = $(this).data("name"); marked.push(value); } else { value = $(this).data("name"); not_marked.push(value); } }); console.log(marked); console.log(not_marked); });

Related: See More


Questions / Comments: