"Facebook card design | Image Card"
Bootstrap 4.1.1 Snippet by karthikricssion

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 ---------->
<div class="fb-cards-designs">
<div class="fb-clone-card">
<div class="fb-card-main-content">
<div class="fb-card-header">
<div class="user-post-info">
<div class="user-thumb">
<img src="https://randomuser.me/api/portraits/women/46.jpg" class="img-responsive" />
</div>
<div class="user-information">
<p>Alyssa Davidson</p>
<small>1 hr</small>
</div>
</div>
<div class="post-action">
<i class="fas fa-ellipsis-h"></i>
</div>
</div>
<div class="fb-card-body simple-text-card simple-image-card">
<p>Isn't It Beautiful?</p>
<div class="images-container">
<img src="https://raw.githubusercontent.com/karthikricssion/facebook-card-design/master/assets/images/sample_joker_poster.jpg" class="img-responsive" />
</div>
</div>
</div>
<div class="fb-card-like-comment-holder">
<div class="fb-card-like-comment">
<div class="likes-emoji-holder">
<span>14 Likes</span>
</div>
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
body {
background-color: #e9ebee;
font-family: 'Roboto', sans-serif;
}
.img-responsive {
width: 100%;
margin: auto;
}
.fb-cards-designs {
margin-top: 16px;
}
.user-thumb {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
float: left;
margin-right: 8px;
}
.fb-clone-card {
max-width: 500px;
margin: auto;
background-color: #fff;
border: 1px solid #dddfe2;
border-radius: 3px;
margin-bottom: 10px;
}
.fb-clone-card .fb-card-main-content {
padding: 12px;
padding-bottom: 0;
}
.fb-clone-card .fb-card-main-content .fb-card-header {
position: relative;
}
.fb-clone-card .fb-card-main-content .fb-card-header .user-post-info {
overflow: hidden;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: