"Profile Card"
Bootstrap 4.1.1 Snippet by matheuseduardo

Post to Facebook Tweet this

<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row resultados"> <div class="col-lg-3 col-sm-6"> <div class="card hovercard"> <div class="cardheader" style="background: url('https://picsum.photos/850/280?image=717'); background-size: cover;"> </div> <div class="avatar"> <img alt="" src="https://picsum.photos/100/100?image=433" class="rounded-circle"> </div> <div class="info"> <div class="title"> Nome Teste </div> <div class="desc">Descrição aleatória. Lorem ipsum </div> </div> <div class="row mb-3 mt-3 no-gutters"> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">fotos</span> </div> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">seguidores</span> </div> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">seguindo</span> </div> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">seguindo</span> </div> </div> <div class="bottom row no-gutters"> <div class="col"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> <div class="col ml-2"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> <div class="col ml-2"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> <div class="col ml-2"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="card hovercard"> <div class="cardheader" style="background: url('https://picsum.photos/850/280?image=717'); background-size: cover;"> </div> <div class="avatar"> <img alt="" src="https://picsum.photos/100/100?image=433" class="rounded-circle"> </div> <div class="info"> <div class="title"> Nome Teste </div> <div class="desc">Descrição aleatória. Lorem ipsum </div> </div> <div class="row mb-3 mt-3 no-gutters"> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">fotos</span> </div> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">seguidores</span> </div> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">seguindo</span> </div> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">seguindo</span> </div> </div> <div class="bottom row no-gutters"> <div class="col"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> <div class="col ml-2"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> <div class="col ml-2"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> <div class="col ml-2"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="card hovercard"> <div class="cardheader" style="background: url('https://picsum.photos/850/280?image=717'); background-size: cover;"> </div> <div class="avatar"> <img alt="" src="https://picsum.photos/100/100?image=433" class="rounded-circle"> </div> <div class="info"> <div class="title"> Nome Teste </div> <div class="desc">Descrição aleatória. Lorem ipsum </div> </div> <div class="row mb-3 mt-3 no-gutters"> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">fotos</span> </div> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">seguidores</span> </div> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">seguindo</span> </div> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">seguindo</span> </div> </div> <div class="bottom row no-gutters"> <div class="col"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> <div class="col ml-2"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> <div class="col ml-2"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> <div class="col ml-2"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> </div> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="card hovercard"> <div class="cardheader" style="background: url('https://picsum.photos/850/280?image=717'); background-size: cover;"> </div> <div class="avatar"> <img alt="" src="https://picsum.photos/100/100?image=433" class="rounded-circle"> </div> <div class="info"> <div class="title"> Nome Teste </div> <div class="desc">Descrição aleatória. Lorem ipsum </div> </div> <div class="row mb-3 mt-3 no-gutters"> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">fotos</span> </div> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">seguidores</span> </div> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">seguindo</span> </div> <div class="col"> <span class="text-numero">00</span> <span class="text-desc">seguindo</span> </div> </div> <div class="bottom row no-gutters"> <div class="col"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> <div class="col ml-2"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> <div class="col ml-2"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> <div class="col ml-2"> <figure class="figure mb-0"> <img src="https://picsum.photos/200/200/?random" /> <figcaption class="figure-caption text-right">00 ♥</figcaption> </figure> </div> </div> </div> </div> </div> </div>
.card { padding-top: 20px; margin: 10px 0 20px 0; background-color: rgba(214, 224, 226, 0.2); border-top-width: 0; border-bottom-width: 2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card .card-heading { padding: 0 20px; margin: 0; } .card .card-heading.simple { font-size: 20px; font-weight: 300; color: #777; border-bottom: 1px solid #e5e5e5; } .card .card-heading.image img { display: inline-block; width: 46px; height: 46px; margin-right: 15px; vertical-align: top; border: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .card .card-heading.image .card-heading-header { display: inline-block; vertical-align: top; } .card .card-heading.image .card-heading-header h3 { margin: 0; font-size: 14px; line-height: 16px; color: #262626; } .card .card-heading.image .card-heading-header span { font-size: 12px; color: #999999; } .card .card-body { padding: 0 20px; margin-top: 20px; } .card .card-media { padding: 0 20px; margin: 0 -14px; } .card .card-media img { max-width: 100%; max-height: 100%; } .card .card-actions { min-height: 30px; padding: 0 20px 20px 20px; margin: 20px 0 0 0; } .card .card-comments { padding: 20px; margin: 0; background-color: #f8f8f8; } .card .card-comments .comments-collapse-toggle { padding: 0; margin: 0 20px 12px 20px; } .card .card-comments .comments-collapse-toggle a, .card .card-comments .comments-collapse-toggle span { padding-right: 5px; overflow: hidden; font-size: 12px; color: #999; text-overflow: ellipsis; white-space: nowrap; } .card-comments .media-heading { font-size: 13px; font-weight: bold; } .card.people { position: relative; display: inline-block; width: 170px; height: 300px; padding-top: 0; margin-left: 20px; overflow: hidden; vertical-align: top; } .card.people:first-child { margin-left: 0; } .card.people .card-top { position: absolute; top: 0; left: 0; display: inline-block; width: 170px; height: 150px; background-color: #ffffff; } .card.people .card-top.green { background-color: #53a93f; } .card.people .card-top.blue { background-color: #427fed; } .card.people .card-info { position: absolute; top: 150px; display: inline-block; width: 100%; height: 101px; overflow: hidden; background: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card.people .card-info .title { display: block; margin: 8px 14px 0 14px; overflow: hidden; font-size: 16px; font-weight: bold; line-height: 18px; color: #404040; } .card.people .card-info .desc { display: block; margin: 8px 14px 0 14px; overflow: hidden; font-size: 12px; line-height: 16px; color: #737373; text-overflow: ellipsis; } .card.people .card-bottom { position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; padding: 10px 20px; line-height: 29px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card.hovercard { position: relative; padding-top: 0; overflow: hidden; text-align: center; background-color: rgba(214, 224, 226, 0.2); } .card.hovercard .cardheader { height: 135px; max-height: 135px; } .card.hovercard .avatar { position: relative; top: -80px; margin-bottom: -80px; } .card.hovercard .avatar img { width: 140px; height: 140px; max-width: 140px; max-height: 140px; border: 4px solid rgba(255,255,255,0.5); } .card.hovercard .info { padding: 4px 8px 10px; } .card.hovercard .info .title { margin-bottom: 4px; font-size: 24px; line-height: 1; color: #262626; vertical-align: middle; } .card.hovercard .info .desc { overflow: hidden; font-size: 12px; line-height: 20px; color: #737373; text-overflow: ellipsis; } .card.hovercard .bottom { padding: 0 10px; margin-bottom: 17px; } .card.hovercard .bottom img { max-width: 100%; box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2); } .card.hovercard .bottom figure > figcaption { font-size: 12px; color: black; background-color: rgba(255,255,255,0.65); padding: 2px; position:absolute; right: 0px; bottom: 0px; } span.text-numero { font-size: 1.8em; display: block; } span.text-desc { font-size: 0.6em; display: block; }

Questions / Comments: