CSS Blog Cards
CSS blog cards are used to showcase producst in an interactive and visually appealing way. They can include different design elements such as images, descriptions, and pricing informations.
Blog card HTML and CSS
MARKETS
Malaysia Set to Raise Debt-to-GDP Cap After Key Parliment
Ben Holland
Octorber 9, 2021
<div class="blog-card-3">
<div class="recipe-cover">
<img src="https://source.unsplash.com/6U-sSfBV-gM" alt="cover img" />
</div>
<div class="blog-info">
<div class="overlay">
<span class="blog-tag">MARKETS</span>
<h4>Malaysia Set to Raise Debt-to-GDP Cap After Key Parliment</h4>
<div class="blog-meta">
<div class="author">
<div class="author-pic">
<img src="https://source.unsplash.com/AJIqZDAUD7A" alt="cover img" />
</div>
<span>Ben Holland</span>
</div>
<div class="date">
<span>Octorber 9, 2021</span>
</div>
</div>
</div>
</div>
</div>.blog-card-3 {
position: relative;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
min-height: 350px;
}
.blog-card-3 .recipe-cover {
width: 100%;
height: 100%;
position: absolute;
}
.blog-card-3 .recipe-cover img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 100%;
width: 100%;
}
.blog-card-3 .blog-info {
position: absolute;
bottom: 0;
left: 0;
padding: 12px 18px;
padding-top: 60px;
width: 100%;
}
.blog-card-3 .blog-info .overlay {
position: relative;
z-index: 99;
}
.blog-card-3 .blog-info::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
}
.blog-card-3 .blog-info .blog-tag{
color: #FFA500;
font-weight: 600;
font-size: 12px;
}
.blog-card-3 .blog-info h4{
color: #fff;
font-size: 1.25rem;
font-weight: normal;
margin: 0.2rem 0;
}
.blog-card-3 .blog-meta {
display: flex;
flex-direction: row;
}
.blog-card-3 .blog-meta .author {
display: flex;
flex-direction: row;
align-items: center;
}
.blog-card-3 .blog-meta .author span{
color: #fff;
font-size: 12px;
font-weight: 600;
}
.blog-card-3 .blog-meta .author-pic {
width: 25px;
height: 25px;
border-radius: 50px;
overflow: hidden;
margin-right: 6px;
}
.blog-card-3 .blog-meta .author-pic img{
object-fit: cover;
object-position: center;
max-width: 100%;
height: 30px;
width: 100%;
}
.blog-card-3 .blog-meta .date {
position: relative;
padding-left: 7px;
}
.blog-card-3 .blog-meta .date span {
font-size: 12px;
color: #aeaeae;
margin-left: 7px;
line-height: 3;
}
.blog-card-3 .blog-meta .date::before {
content: "";
background-color: lightgray;
position: absolute;
width: 1px;
height: 12px;
top: 50%;
transform: translateY(-50%);
}.blog-card-3 {
position: relative;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
min-height: 350px;
.recipe-cover {
width: 100%;
height: 100%;
position: absolute;
img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 100%;
width: 100%;
}
}
.blog-info {
position: absolute;
bottom: 0;
left: 0;
padding: 12px 18px;
padding-top: 60px;
width: 100%;
.overlay {
position: relative;
z-index: 99;
}
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
}
.blog-tag {
color: #FFA500;
font-weight: 600;
font-size: 12px;
}
h4 {
color: #fff;
font-size: 1.25rem;
font-weight: normal;
margin: 0.2rem 0;
}
}
.blog-meta {
display: flex;
flex-direction: row;
.author {
display: flex;
flex-direction: row;
align-items: center;
span {
color: #fff;
font-size: 12px;
font-weight: 600;
}
}
.author-pic {
width: 25px;
height: 25px;
border-radius: 50px;
overflow: hidden;
margin-right: 6px;
img {
object-fit: cover;
object-position: center;
max-width: 100%;
height: 30px;
width: 100%;
}
}
.date {
position: relative;
padding-left: 7px;
span {
font-size: 12px;
color: #aeaeae;
margin-left: 7px;
line-height: 3;
}
&::before {
content: "";
background-color: lightgray;
position: absolute;
width: 1px;
height: 12px;
top: 50%;
transform: translateY(-50%);
}
}
}
}Blog card with author box
ECONOMICS
Inflation Casts a Longer Shadow After Week of Wild Price Spikes
Ben Holland
Octorber 11, 2021
<div class="blog-card-2">
<div class="recipe-cover">
<img src="https://source.unsplash.com/UMfGoM67w48" alt="cover img" />
</div>
<div class="blog-info">
<span class="blog-tag">ECONOMICS</span>
<h4>Inflation Casts a Longer Shadow After Week of Wild Price Spikes</h4>
<div class="blog-meta">
<div class="author">
<div class="author-pic">
<img src="https://source.unsplash.com/AJIqZDAUD7A" alt="cover img" />
</div>
<span>Ben Holland</span>
</div>
<div class="date">
<span>Octorber 11, 2021</span>
</div>
</div>
</div>
</div>.blog-card-2 {
position: relative;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.blog-card-2 .recipe-cover {
max-height: 250px;
overflow: hidden;
}
.blog-card-2 .recipe-cover img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 200px;
width: 100%;
}
.blog-card-2 .blog-info {
padding: 12px 20px;
}
.blog-card-2 .blog-info .blog-tag{
color: #1DA1F2;
font-weight: 600;
font-size: 12px;
}
.blog-card-2 .blog-info h4{
color: #000;
font-size: 1.25rem;
font-weight: normal;
margin-top: 0.4rem;
}
.blog-card-2 .blog-info h2{
color: #000;
font-size: 1.25rem;
font-weight: normal;
margin-top: 0.4rem;
}
.blog-card-2 .blog-meta {
display: flex;
flex-direction: row;
}
.blog-card-2 .blog-meta .author {
display: flex;
flex-direction: row;
align-items: center;
}
.blog-card-2 .blog-meta .author span{
color: #000;
font-size: 12px;
font-weight: 600;
}
.blog-card-2 .blog-meta .author-pic {
width: 25px;
height: 25px;
border-radius: 50px;
overflow: hidden;
margin-right: 6px;
}
.blog-card-2 .blog-meta .author-pic img{
object-fit: cover;
object-position: center;
max-width: 100%;
height: 30px;
width: 100%;
}
.blog-card-2 .blog-meta .date {
position: relative;
padding-left: 7px;
}
.blog-card-2 .blog-meta .date span {
font-size: 12px;
color: gray;
margin-left: 7px;
line-height: 3;
}
.blog-card-2 .blog-meta .date::before {
content: "";
background-color: lightgray;
position: absolute;
width: 1px;
height: 12px;
top: 50%;
transform: translateY(-50%);
}.blog-card-2 {
position: relative;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
.recipe-cover {
max-height: 250px;
overflow: hidden;
img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 200px;
width: 100%;
}
}
.blog-info {
padding: 12px 20px;
.blog-tag {
color: #1DA1F2;
font-weight: 600;
font-size: 12px;
}
h4 {
color: #000;
font-size: 1.25rem;
font-weight: normal;
margin-top: 0.4rem;
}
}
.blog-meta {
display: flex;
flex-direction: row;
.author {
display: flex;
flex-direction: row;
align-items: center;
span {
color: #000;
font-size: 12px;
font-weight: 600;
}
}
.author-pic {
width: 25px;
height: 25px;
border-radius: 50px;
overflow: hidden;
margin-right: 6px;
img {
object-fit: cover;
object-position: center;
max-width: 100%;
height: 30px;
width: 100%;
}
}
.date {
position: relative;
padding-left: 7px;
span {
font-size: 12px;
color: gray;
margin-left: 7px;
line-height: 3;
}
&::before {
content: "";
background-color: lightgray;
position: absolute;
width: 1px;
height: 12px;
top: 50%;
transform: translateY(-50%);
}
}
}
}Responsive blog card CSS codepen
Author: pbruny
Blog card dark theme with badges
Tesla Model 3
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam, fuga nihil. Asperiores deserunt omnis tempora beatae dolore quaerat.
<div class="blog-card-1">
<div class="blog-cover">
<img src="https://source.unsplash.com/ZBWn5DvO0hg" alt="cover img" />
</div>
<div class="blog-info">
<h4>Tesla Model 3</h4>
<div class="blog-description">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam, fuga nihil. Asperiores deserunt omnis
tempora beatae dolore quaerat.</p>
</div>
<div class="blog-tags">
<a href="#"><span>#car</span></a>
<a href="#"><span>#auto</span></a>
<a href="#"><span>#sport</span></a>
</div>
</div>
</div>.blog-card-1 {
position: relative;
border-radius: 25px;
overflow: hidden;
background-color: #162130;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.blog-card-1 .blog-cover {
max-height: 250px;
overflow: hidden;
}
.blog-card-1 .blog-cover img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 200px;
width: 100%;
}
.blog-card-1 .blog-info {
padding: 25px 20px;
}
.blog-card-1 .blog-info h4{
color: #fff;
font-weight: normal;
}
.blog-card-1 .blog-description {
margin-top: 16px;
}
.blog-card-1 .blog-description p{
font-size: 14px;
color: darkgrey;
}
.blog-card-1 .blog-description p:nth-last-child(1){
margin-bottom: 0;
}
.blog-card-1 .blog-tags {
margin-top: 20px;
}
.blog-card-1 .blog-tags a{
text-decoration: none;
}
.blog-card-1 .blog-tags span{
background: #233145;
padding: 7px 18px;
border-radius: 50px;
font-size: 12px;
font-weight: 300;
margin-right: 5px;
color: #dbdbdb;
}
.blog-card-1 .blog-tags span:hover{
background: #ececec;
color: #162130;
}.blog-card-1 {
position: relative;
border-radius: 25px;
overflow: hidden;
background-color: #162130;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
.blog-cover {
max-height: 250px;
overflow: hidden;
img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 200px;
width: 100%;
}
}
.blog-info {
padding: 25px 20px;
h4 {
color: #fff;
font-weight: normal;
}
}
.blog-description {
margin-top: 16px;
p {
font-size: 14px;
color: darkgrey;
&:nth-last-child(1) {
margin-bottom: 0;
}
}
}
.blog-tags {
margin-top: 20px;
a {
text-decoration: none;
}
span {
background: #233145;
padding: 7px 18px;
border-radius: 50px;
font-size: 12px;
font-weight: 300;
margin-right: 5px;
color: #dbdbdb;
&:hover {
background: #ececec;
color: #162130;
}
}
}
}Blog card CSS design
ECONOMICS
Inflation Casts a Longer Shadow After Week of Wild Price Spikes
Ben Holland
Octorber 11, 2021
<div class="blog-card-4">
<div class="blog-info">
<span class="blog-tag">ECONOMICS</span>
<h4>Inflation Casts a Longer Shadow After Week of Wild Price Spikes</h4>
<div class="blog-meta">
<div class="author">
<div class="author-pic">
<img src="https://source.unsplash.com/AJIqZDAUD7A" alt="cover img" />
</div>
<span>Ben Holland</span>
</div>
<div class="date">
<span>Octorber 11, 2021</span>
</div>
</div>
</div>
<div class="recipe-cover">
<img src="https://source.unsplash.com/EY-NsTRYY8A" alt="cover img" />
</div>
</div>.blog-card-4 {
position: relative;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.blog-card-4 .recipe-cover {
max-height: 250px;
overflow: hidden;
}
.blog-card-4 .recipe-cover img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 200px;
width: 100%;
}
.blog-card-4 .blog-info {
padding: 12px 20px;
}
.blog-card-4 .blog-info .blog-tag{
color: #1DA1F2;
font-weight: 600;
font-size: 12px;
}
.blog-card-4 .blog-info h4{
color: #000;
font-size: 1.25rem;
font-weight: normal;
margin-top: 0.4rem;
}
.blog-card-4 .blog-meta {
display: flex;
flex-direction: row;
}
.blog-card-4 .blog-meta .author {
display: flex;
flex-direction: row;
align-items: center;
}
.blog-card-4 .blog-meta .author span{
color: #000;
font-size: 12px;
font-weight: 600;
}
.blog-card-4 .blog-meta .author-pic {
width: 25px;
height: 25px;
border-radius: 50px;
overflow: hidden;
margin-right: 6px;
}
.blog-card-4 .blog-meta .author-pic img{
object-fit: cover;
object-position: center;
max-width: 100%;
height: 30px;
width: 100%;
}
.blog-card-4 .blog-meta .date {
position: relative;
padding-left: 7px;
}
.blog-card-4 .blog-meta .date span {
font-size: 12px;
color: gray;
margin-left: 7px;
line-height: 3;
}
.blog-card-4 .blog-meta .date::before {
content: "";
background-color: lightgray;
position: absolute;
width: 1px;
height: 12px;
top: 50%;
transform: translateY(-50%);
}.blog-card-4 {
position: relative;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
.recipe-cover {
max-height: 250px;
overflow: hidden;
img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 200px;
width: 100%;
}
}
.blog-info {
padding: 12px 20px;
.blog-tag {
color: #1DA1F2;
font-weight: 600;
font-size: 12px;
}
h4 {
color: #000;
font-size: 1.25rem;
font-weight: normal;
margin-top: 0.4rem;
}
}
.blog-meta {
display: flex;
flex-direction: row;
.author {
display: flex;
flex-direction: row;
align-items: center;
span {
color: #000;
font-size: 12px;
font-weight: 600;
}
}
.author-pic {
width: 25px;
height: 25px;
border-radius: 50px;
overflow: hidden;
margin-right: 6px;
img {
object-fit: cover;
object-position: center;
max-width: 100%;
height: 30px;
width: 100%;
}
}
.date {
position: relative;
padding-left: 7px;
span {
font-size: 12px;
color: gray;
margin-left: 7px;
line-height: 3;
}
&::before {
content: "";
background-color: lightgray;
position: absolute;
width: 1px;
height: 12px;
top: 50%;
transform: translateY(-50%);
}
}
}
}Multiple blog cards vertical design layout
Marcus Ashworth
The Bank of England Risks Hiking Too Far Ahead
John Aurthers
Inflation Charity Does not Mean the News is Good
Andrea
Anxious Shoppers Are Hurtin Asos and the Online Boom
<div class="blog-card-5">
<div class="single-blog">
<div class="blog-info">
<div class="author">
<div class="author-pic">
<img src="https://source.unsplash.com/YUu9UAcOKZ4" alt="cover img" />
</div>
<span>Marcus Ashworth</span>
</div>
<h4>The Bank of England Risks Hiking Too Far Ahead</h4>
<div class="blog-meta">
<span class="blog-tag">ECONOMICS</span>
<div class="date">
<span>Octorber 11, 2021</span>
</div>
</div>
</div>
<div class="recipe-cover">
<img src="https://source.unsplash.com/J-wEJwSiAbQ" alt="cover img" />
</div>
</div>
<div class="single-blog">
<div class="blog-info">
<div class="author">
<div class="author-pic">
<img src="https://source.unsplash.com/0J9l9xRyMSo" alt="cover img" />
</div>
<span>John Aurthers</span>
</div>
<h4>Inflation Charity Does not Mean the News is Good</h4>
<div class="blog-meta">
<span class="blog-tag">MARKETS</span>
<div class="date">
<span>Octorber 7, 2021</span>
</div>
</div>
</div>
<div class="recipe-cover">
<img src="https://source.unsplash.com/xX7rb_8EkJk" alt="cover img" />
</div>
</div>
<div class="single-blog">
<div class="blog-info">
<div class="author">
<div class="author-pic">
<img src="https://source.unsplash.com/AJIqZDAUD7A" alt="cover img" />
</div>
<span>Andrea</span>
</div>
<h4>Anxious Shoppers Are Hurtin Asos and the Online Boom</h4>
<div class="blog-meta">
<span class="blog-tag">BUSINESS</span>
<div class="date">
<span>Octorber 1, 2021</span>
</div>
</div>
</div>
<div class="recipe-cover">
<img src="https://source.unsplash.com/hTUZW7E7krg" alt="cover img" />
</div>
</div>
</div>.blog-card-5 {
padding: 18px;
position: relative;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
padding-bottom: 10px;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.blog-card-5 .single-blog {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
flex-shrink: 0;
}
.blog-card-5 .single-blog:not(:nth-last-child(1)){
border-bottom: 1px solid #dfdfdf;
margin-bottom: 20px;
padding-bottom: 8px;
}
.blog-card-5 .recipe-cover {
max-height: 120px;
overflow: hidden;
border-radius: 10px;
height: 100px;
flex: 0 0 100px;
}
.blog-card-5 .recipe-cover img {
object-fit: cover;
object-position: center center;
max-width: 100%;
width: 100%;
height: 100%;
}
.blog-card-5 .blog-info {
width: calc(100% - 100px);
padding-right: 20px;
}
.blog-card-5 .blog-info .blog-tag{
color: gray;
font-weight: 600;
font-size: 12px;
}
.blog-card-5 .blog-info h4{
color: #000;
font-size: 1.25rem;
font-weight: normal;
margin-top: 0.4rem;
}
.blog-card-5 .blog-meta {
display: flex;
flex-direction: row;
align-items: center;
}
.blog-card-5 .author {
display: flex;
flex-direction: row;
align-items: center;
}
.blog-card-5 .author span{
color: #1DA1F2;
font-size: 14px;
font-weight: 600;
}
.blog-card-5 .author-pic {
width: 25px;
height: 25px;
border-radius: 50px;
overflow: hidden;
margin-right: 6px;
}
.blog-card-5 .author-pic img{
object-fit: cover;
object-position: center;
max-width: 100%;
height: 30px;
width: 100%;
}
.blog-card-5 .blog-meta .date {
position: relative;
padding-left: 7px;
}
.blog-card-5 .blog-meta .date span {
font-size: 12px;
color: gray;
margin-left: 7px;
line-height: 3;
}
.blog-card-5 .blog-meta .date::before {
content: "";
background-color: lightgray;
position: absolute;
width: 1px;
height: 12px;
top: 50%;
transform: translateY(-50%);
}
@media all and (max-width: 576px) {
.blog-card-5 .recipe-cover {
height: 75px;
flex: 0 0 75px;
}
.blog-card-5 .blog-info {
width: calc(100% - 75px);
padding-right: 10px;
}
.blog-card-5 .blog-info h4{
font-size: 1rem;
}
}.blog-card-5 {
padding: 18px;
position: relative;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
padding-bottom: 10px;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
.single-blog {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
flex-shrink: 0;
&:not(:nth-last-child(1)) {
border-bottom: 1px solid #dfdfdf;
margin-bottom: 20px;
padding-bottom: 8px;
}
}
.recipe-cover {
max-height: 120px;
overflow: hidden;
border-radius: 10px;
height: 100px;
flex: 0 0 100px;
img {
object-fit: cover;
object-position: center center;
max-width: 100%;
width: 100%;
height: 100%;
}
}
.blog-info {
width: calc(100% - 100px);
padding-right: 20px;
.blog-tag {
color: gray;
font-weight: 600;
font-size: 12px;
}
h4 {
color: #000;
font-size: 1.25rem;
font-weight: normal;
margin-top: 0.4rem;
}
}
.blog-meta {
display: flex;
flex-direction: row;
align-items: center;
.date {
position: relative;
padding-left: 7px;
span {
font-size: 12px;
color: gray;
margin-left: 7px;
line-height: 3;
}
&::before {
content: "";
background-color: lightgray;
position: absolute;
width: 1px;
height: 12px;
top: 50%;
transform: translateY(-50%);
}
}
}
.author {
display: flex;
flex-direction: row;
align-items: center;
span {
color: #1DA1F2;
font-size: 14px;
font-weight: 600;
}
}
.author-pic {
width: 25px;
height: 25px;
border-radius: 50px;
overflow: hidden;
margin-right: 6px;
img {
object-fit: cover;
object-position: center;
max-width: 100%;
height: 30px;
width: 100%;
}
}
}
@media all and (max-width: 576px) {
.blog-card-5 {
.recipe-cover {
height: 75px;
flex: 0 0 75px;
}
.blog-info {
width: calc(100% - 75px);
padding-right: 10px;
h4 {
font-size: 1rem;
}
}
}
}Simple blog card codepen
Author: daiquiri