"Material Design Card - Responsive"
Bootstrap 4.1.1 Snippet by Siddharth Panchal

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="container py-5 text-center">
<h2>Material Design Card - Responsive</h2>
<hr/><br/><br/>
<div class="row active-with-click">
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Red">
<h2>
<span>Siddharth Panchal</span>
<strong>
<i class="fa fa-fw fa-magic"></i>
Front-End-Developer
</strong>
</h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
</div>
</div>
<a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
<h4>
Social
</h4>
<a target="_parent" href="#!" class="fa fa-fw fa-facebook ripple"></a>
<a target="_parent" href="#!" class="fa fa-fw fa-twitter ripple"></a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&display=swap");
.container{margin-top:20px}
.fa-spin-fast{-webkit-animation:fa-spin-fast .1s infinite linear;animation:fa-spin-fast 0.1s infinite linear}
@-webkit-keyframes fa-spin-fast{0%{-webkit-transform:rotate(0);transform:rotate(0)}
100%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}
@keyframes fa-spin-fast{0%{-webkit-transform:rotate(0);transform:rotate(0)}
100%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}
.material-card{position:relative;height:0;padding-bottom:calc(100% - 16px);margin-bottom:6.6em}
.material-card h2{position:absolute;top:calc(100% - 16px);left:0;width:100%;padding:10px 16px 10px 20px;height:82px;color:#fff;font-size:1.4em;line-height:1.6em;margin:0;z-index:10;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;box-shadow: 0 2px 20px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);}
.material-card h2 span{display:block}
.material-card h2 strong{font-weight:300;display:block;font-size:.76em}
.material-card h2:after,.material-card h2:before{content:' ';position:absolute;left:0;top:-16px;width:0;border:8px solid;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s}
.material-card h2:after{top:auto;bottom:0}
@media screen and (max-width:767px){.material-card.mc-active{padding-bottom:0;height:auto}
}
.material-card.mc-active h2{top:0;padding:10px 16px 10px 90px}
.material-card.mc-active h2:before{top:0}
.material-card.mc-active h2:after{bottom:-16px}
.material-card .mc-content{position:absolute;right:0;top:0;bottom:16px;left:16px;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;box-shadow:0 2px 20px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);}
.material-card .mc-btn-action{position:absolute;right:16px;top:15px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid;width:54px;height:54px;line-height:46px;text-align:center;color:#fff!important;cursor:pointer;z-index:20;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s}
.material-card .mc-btn-action:hover{box-shadow:0 0px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;}
.material-card.mc-active .mc-btn-action{top:62px;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);}
.material-card .mc-description{position:absolute;top:100%;right:30px;left:30px;bottom:54px;overflow:hidden;opacity:0;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-ms-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
.material-card .mc-footer{height:0;overflow:hidden;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s}
.material-card .mc-footer h4{position:absolute;top:200px;left:30px;padding:0;margin:0;font-size:16px;font-weight:700;-webkit-transition:all .4s;-moz-transition:all 0.4s;-ms-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
.material-card .mc-footer a{display:block;float:left;position:relative;width:40px;height:40px;margin-left:10px;font-size:16px;color:#fff;line-height:36px;text-decoration:none;top:200px;border-radius:50px;}
.material-card .mc-footer a:nth-child(1){-webkit-transition:all .1s;-moz-transition:all .1s;-ms-transition:all .1s;-o-transition:all .1s;transition:all .1s}
.material-card .mc-footer a:nth-child(2){-webkit-transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;-o-transition:all .2s;transition:all .2s}
.material-card .mc-footer a:nth-child(3){-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s}
.material-card .mc-footer a:nth-child(4){-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;transition:all .4s}
.material-card .mc-footer a:nth-child(5){-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}
.material-card .img-container{overflow:hidden;position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;}
.material-card.mc-active .img-container{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;left:0;top:12px;width:55px;height:55px;z-index:20}
.img-fluid{max-width:100%}
.material-card.mc-active .mc-content{padding-top:5.6em}
@media screen and (max-width:767px){.material-card.mc-active .mc-content{position:relative;margin-right:16px}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(function() {
$('.material-card > .mc-btn-action').click(function () {
var card = $(this).parent('.material-card');
var icon = $(this).children('i');
icon.addClass('fa-spin-fast');
if (card.hasClass('mc-active')) {
card.removeClass('mc-active');
window.setTimeout(function() {
icon
.removeClass('fa-arrow-left ripple')
.removeClass('fa-spin-fast')
.addClass('fa-bars');
}, 800);
} else {
card.addClass('mc-active');
window.setTimeout(function() {
icon
.removeClass('fa-bars')
.removeClass('fa-spin-fast')
.addClass('fa-arrow-left ripple');
}, 800);
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Dashboard PRO
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: