CSS News Cards
CSS news cards are an effective way to showcase your news content on your website. They can be customized to highlight new posts, featured content, and more. You can also add features like author/post information, comments, ratings, and related posts.
News card with hover effect
What to watch
Stream the Acme event
<div className="product-card">
<div className="header">
<p>What to watch</p>
<h4>Stream the Acme event</h4>
</div>
<div className="card-img">
<img src="https://nextui.org/images/card-example-4.jpeg" atl="card-image" />
</div>
</div>.main-contents {
padding: 1rem;
border: 1px solid;
}
.main-contents .card-display {
background-color: blue;
}
.main-contents .card-languages {
margin-top: 1rem;
border-radius: 20px;
background-color: gray;
padding: 0.5rem;
min-height: 400px;
}
.main-contents {
padding: 1rem;
border: 1px solid;
}
.main-contents .card-display {
background-color: blue;
}
.main-contents .card-languages {
margin-top: 1rem;
border-radius: 20px;
background-color: gray;
padding: 0.5rem;
min-height: 400px;
}.product-card {
border-radius: 14px;
background: #000;
color: #fff;
position: relative;
overflow: hidden;
width: 300px;
height: auto;
box-sizing: border-box;
.header {
position: absolute;
z-index: 1;
top: 5px;
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
padding: 0.75rem;
p {
color: rgb(158, 158, 158);
font-size: 12px;
margin: inherit;
text-transform: uppercase;
}
h4 {
color: white;
margin: inherit;
text-transform: none;
font-size: 1.25rem;
font-weight: 600;
}
}
.card-img {
margin: 0px auto;
position: relative;
overflow: hidden;
max-width: 100%;
transition: transform 250ms ease 0ms, opacity 200ms ease-in 0ms;
img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
max-width: 100%;
}
}
}News card HTML CSS
Origins: Hunting the Source of Covid-19
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam, fuga nihil. Asperiores deserunt omnis tempora beatae dolore quaerat.
6h
<div class="news-card-1">
<div class="news-cover">
<img src="https://source.unsplash.com/j2c7yf223Mk" alt="cover img" />
</div>
<div class="news-info">
<h4>Origins: Hunting the Source of Covid-19</h4>
<div class="news-description">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam, fuga nihil. Asperiores deserunt omnis
tempora beatae dolore quaerat.</p>
</div>
<div class="news-overview">
<div class="news-time">6h</div>
<div class="news-origan">
<a href="#" alt="Europe">Europe</a>
</div>
</div>
</div>
</div>.news-card-1 {
position: relative;
border-radius: 15px;
overflow: hidden;
background-color: #fff;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.news-card-1 .news-cover {
max-height: 250px;
overflow: hidden;
}
.news-card-1 .news-cover img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 200px;
width: 100%;
}
.news-card-1 .news-info {
padding: 20px 18px;
}
.news-card-1 .news-info h4{
color: #212121;
font-weight: normal;
}
.news-card-1 .news-description {
margin-top: 10px;
}
.news-card-1 .news-description p{
font-size: 14px;
color: #212121;
}
.news-card-1 .news-description p:nth-last-child(1){
margin-bottom: 0;
}
.news-card-1 .news-tags {
margin-top: 20px;
}
.news-card-1 .news-tags a{
text-decoration: none;
}
.news-card-1 .news-tags span{
background: #233145;
padding: 5px 14px;
border-radius: 50px;
font-size: 12px;
font-weight: 300;
margin-right: 5px;
color: #dbdbdb;
}
.news-card-1 .news-tags span:hover{
background: #ececec;
color: #162130;
}
.news-card-1 .news-overview {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 0.5rem;
margin-top: 10px;
}
.news-card-1 .news-overview > div:not(:nth-last-child(1)) {
border-right: 1px solid #dbdbdb;
padding-right: 0.5rem;
}
.news-card-1 .news-time {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
color: #808080;
}
.news-card-1 .news-time::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23808080' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
width: 20px;
height: 20px;
margin-right: 4px;
}
.news-card-1 .news-origan {
font-size: 14px;
color: #808080;
}
.news-card-1 .news-origan a{
color: #212121;
text-decoration: none;
}
.news-card-1 .news-origan a:hover{
text-decoration: underline;
}.news-card-1 {
position: relative;
border-radius: 15px;
overflow: hidden;
background-color: #fff;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
.news-cover {
max-height: 250px;
overflow: hidden;
img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 200px;
width: 100%;
}
}
.news-info {
padding: 20px 18px;
h4 {
color: #212121;
font-weight: normal;
}
}
.news-description {
margin-top: 10px;
p {
font-size: 14px;
color: #212121;
&:nth-last-child(1) {
margin-bottom: 0;
}
}
}
.news-tags {
margin-top: 20px;
a {
text-decoration: none;
}
span {
background: #233145;
padding: 5px 14px;
border-radius: 50px;
font-size: 12px;
font-weight: 300;
margin-right: 5px;
color: #dbdbdb;
&:hover {
background: #ececec;
color: #162130;
}
}
}
.news-overview {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 0.5rem;
margin-top: 10px;
>div {
&:not(:nth-last-child(1)) {
border-right: 1px solid #dbdbdb;
padding-right: 0.5rem;
}
}
}
.news-time {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
color: #808080;
&::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23808080' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
width: 20px;
height: 20px;
margin-right: 4px;
}
}
.news-origan {
font-size: 14px;
color: #808080;
a {
color: #212121;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}Sample news card
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%);
}
}
}
}News cards vertical design
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;
}
}
}
}News card with bottom black gradient
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%);
}
}
}
}