"list card"
Bootstrap 4.1.1 Snippet by evarevirus

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>CodePen - Material-Design-Cards with truncating labels and fixed elements</title> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { padding: 120px; } h4 { font-family: "Roboto"; font-weight: 500; font-size: 14px; color: #aeaeae; text-transform: uppercase; margin: 0; } hr { margin-bottom: 16px; border: 1px solid #eaeaea; } .border-card { background: #fff; margin-bottom: 30px; display: flex; align-items: center; font-family: "Roboto"; font-size: 14px; padding: 12px 16px; cursor: pointer; border-radius: 4px; border: 1px solid #eaeaea; box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.1); transition: all 0.25s ease; } .border-card:hover { -webkit-transform: translateY(-1px); transform: translateY(-1px); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 5px 10px 0 rgba(0, 0, 0, 0.1); } .border-card.over { background: rgba(70, 222, 151, 0.15); padding-top: 24px; padding-bottom: 24px; border: 2px solid #47DE97; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0), 0 5px 10px 0 rgba(0, 0, 0, 0); } .border-card.over .card-type-icon { color: #47DE97 !important; } .border-card.over p { color: #47DE97 !important; } .content-wrapper { display: flex; justify-content: flex-start; width: 100%; white-space: nowrap; overflow: hidden; transition: all 0.25s ease; } .min-gap { flex: 0 0 40px; } .card-type-icon { flex-grow: 0; flex-shrink: 0; margin-right: 16px; font-weight: 400; color: #323232; border-radius: 50%; width: 40px; height: 40px; text-align: center; line-height: 40px; font-size: 14px; transition: all 0.25s ease; } .card-type-icon.with-border { color: #aeaeae; border: 1px solid #eaeaea; } .card-type-icon i { line-height: 40px; } .label-group { white-space: nowrap; overflow: hidden; } .label-group.fixed { flex-shrink: 0; } .label-group p { margin: 0px; line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .label-group p.title { color: #323232; font-weight: 500; } .label-group p.title.cta { text-transform: uppercase; } .label-group p.caption { font-weight: 400; color: #aeaeae; } .end-icon { margin-left: 16px; } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <h4>Card with primary and other information</h4> <hr> <div class="border-card"> <div class="card-type-icon with-border">1</div> <div class="content-wrapper"> <div class="label-group fixed"> <p class="title">EG links</p> <p class="caption">Einheit</p> </div> <div class="min-gap"></div> <div class="label-group"> <p class="title">Test</p> <p class="caption">Eigentümer</p> </div> <div class="min-gap"></div> <div class="label-group"> <p class="title">Alexander Oemisch</p> <p class="caption">Mieter</p> </div> </a> </div> <i class="material-icons end-icon">more_vert</i> </div> <div class="border-card"> <div class="card-type-icon with-border">1</div> <div class="content-wrapper"> <div class="label-group fixed"> <p class="title">EG links</p> <p class="caption">Einheit</p> </div> <div class="min-gap"></div> <div class="label-group"> <p class="title">Marc-Philipp Weber</p> <p class="caption">Eigentümer</p> </div> <div class="min-gap"></div> <div class="label-group"> <p class="title">Alexander Oemisch</p> <p class="caption">Mieter</p> </div> </a> </div> <i class="material-icons end-icon">more_vert</i> </div> <div class="border-card"> <div class="card-type-icon with-border">1</div> <div class="content-wrapper"> <div class="label-group fixed"> <p class="title">EG links</p> <p class="caption">Einheit</p> </div> <div class="min-gap"></div> <div class="label-group"> <p class="title">Marc-Philipp Weber</p> <p class="caption">Eigentümer</p> </div> <div class="min-gap"></div> <div class="label-group"> <p class="title">Alexander Oemisch</p> <p class="caption">Mieter</p> </div> </a> </div> <i class="material-icons end-icon">more_vert</i> </div> <h4>Card with one information</h4> <hr> <div class="border-card" draggable=true> <div class="card-type-icon with-border"><i class="material-icons">insert_drive_file</i></div> <div class="content-wrapper"> <div class="label-group"> <p class="title">Einladung zur Eigentümerversammlung</p> <p class="caption">Dokument</p> </div> </div> <i class="material-icons">more_vert</i> </div> <h4>Call-To-Action Card (try dragging a file over it)</h4> <hr> <div class="border-card droppable"> <div class="card-type-icon"><i class="material-icons">cloud_upload</i></div> <div class="content-wrapper"> <div class="label-group"> <p class="title cta">Wartungsvertrag hochladen</p> </div> </div> </div> <script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script id="rendered-js"> $('.droppable').bind('dragover', function (e) { $(this).addClass('over'); if (e.originalEvent.preventDefault) e.preventDefault(); e.originalEvent.dataTransfer.dropEffect = 'copy'; return false; }); $('.droppable').bind('dragenter', function (e) { $(this).addClass('over'); }); $('.droppable').bind('dragleave', function (e) { $(this).removeClass('over'); }); $('.droppable').bind('drop', function (e) { $(this).removeClass('over'); if (e.originalEvent.stopPropagation) e.originalEvent.stopPropagation(); var stuff = $(e.originalEvent.dataTransfer.getData('stuff')); stuff.appendTo(this); return false; }); //# sourceURL=pen.js </script> </body> </html>

Related: See More


Questions / Comments: