7+ CSS News Card Examples

This post contains a total of 7+ CSS News Card Examples with Source Code. All these News Cards are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS News Card Examples

1. News Card Animation

Made by Andrei. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@-webkit-keyframes width-animate {
  0% {
    opacity: 0;
    width: 10%;
  }
  100% {
    opacity: 1;
    width: 45%;
  }
}
@keyframes width-animate {
  0% {
    opacity: 0;
    width: 10%;
  }
  100% {
    opacity: 1;
    width: 45%;
  }
}
@-webkit-keyframes width-animate-back {
  0% {
    opacity: 1;
    width: 45%;
  }
  100% {
    opacity: 0;
    width: 10%;
  }
}
@keyframes width-animate-back {
  0% {
    opacity: 1;
    width: 45%;
  }
  100% {
    opacity: 0;
    width: 10%;
  }
}
body {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #353535;
}

.links {
  list-style: none;
  float: left;
}
.links a {
  display: block;
  color: #353535;
  font-size: 3em;
  margin-left: 100px;
  transition: 0.3s;
}
.links a.dribble:hover {
  color: #ea4c89;
}
.links a.git:hover {
  color: #f7c549;
}

.inactive .card-image:before {
  -webkit-animation: width-animate-back 0.3s forwards !important;
          animation: width-animate-back 0.3s forwards !important;
}
.inactive .author__divider {
  -webkit-animation: width-animate-back 0.3s forwards !important;
          animation: width-animate-back 0.3s forwards !important;
}

.active {
  display: flex !important;
}
.active .card-image:before {
  -webkit-animation: width-animate 0.3s forwards;
          animation: width-animate 0.3s forwards;
}
.active .author__divider {
  -webkit-animation: width-animate 0.3s forwards;
          animation: width-animate 0.3s forwards;
}

.card:last-of-type .nav__next {
  display: none;
}

.card {
  overflow: hidden;
  display: none;
  flex-flow: row wrap;
  justify-content: flex-start;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
  width: 60%;
  margin: 0 auto;
  position: relative;
  height: 100vh;
}
.card .card-content {
  padding: 2em 2em 2em 3em;
  display: flex;
  flex-direction: column;
  width: 40%;
  justify-content: space-between;
}
.card .card-content .card-content__nav {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  margin-top: 1em;
}
.card .card-content .card-content__nav a {
  text-decoration: none;
  color: #585858;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.2s;
}
.card .card-content .card-content__nav a:hover {
  color: #ababab;
}
.card .card-content .card-content__text .text__content {
  color: #a7a7a7;
  margin: 2em 0em;
  position: relative;
}
.card .card-content .card-content__text .text__content:after {
  background: linear-gradient(to top, #fff 0, transparent 100%);
  content: " ";
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.card .card-content .card-content__text .text__content .text__content__button {
  cursor: pointer;
  position: absolute;
  font-size: 4em;
  top: -10px;
  left: 45%;
}
.card .card-content .card-content__text .text__time {
  margin: 1em 0em;
}
.card .card-content .card-content__text .fa-clock-o {
  padding-right: 10px;
  color: #a7a7a7;
}
.card .card-content .card-content__title {
  font-weight: 900;
  font-size: 2em;
  color: #252525;
}
.card .card-content .card-content__author {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  position: relative;
  margin-bottom: 2em;
}
.card .card-content .card-content__author .author__divider {
  width: 50%;
  height: 1em;
  position: relative;
  top: 3px;
}
.card .card-content .card-content__author .author__name {
  font-weight: 700;
  font-size: 1.2em;
}
.card .card-image {
  width: 45%;
  transition: width 2s;
}
.card .card-image:before {
  content: "";
  position: absolute;
  width: 5%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  transition: width 2s;
}
.card .card-month {
  padding: 2em 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.card .card-month .card-month__name {
  -webkit-text-orientation: upright;
          text-orientation: upright;
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  letter-spacing: 1em;
  text-transform: uppercase;
  font-weight: 900;
}
.card .card-month .card-month__divider {
  height: 10em;
  background: #000;
  width: 3px;
  margin-left: 8px;
  margin-top: 2em;
  margin-bottom: 2em;
}
.card .card-month .card-month__date {
  font-weight: 900;
}
.card.aqua .card-month__divider {
  background: #40daae;
}
.card.aqua .card-image:before {
  background-image: url(http://i.imgur.com/Etx8s9g.jpg);
}
.card.aqua .author__divider {
  background: #40daae;
}
.card.aqua .text__content__button i {
  color: #40daae;
  text-shadow: 0px 0px 10px #40daae;
}
.card.green .card-month__divider {
  background: #8fc30f;
}
.card.green .card-image:before {
  background-image: url(http://i.imgur.com/X5CqPG8.jpg);
}
.card.green .author__divider {
  background: #8fc30f;
}
.card.green .text__content__button i {
  color: #8fc30f;
  text-shadow: 0px 0px 10px #8fc30f;
}
.card.ochra .card-month__divider {
  background: #f7c549;
}
.card.ochra .card-image:before {
  background-image: url(http://i.imgur.com/NayL3CM.jpg);
}
.card.ochra .author__divider {
  background: #f7c549;
}
.card.ochra .text__content__button i {
  color: #f7c549;
  text-shadow: 0px 0px 10px #f7c549;
}
</style>
</head>
<body>
  <head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div class="links">
    <a href="https://github.com/thesheepman" class='git'><i class="fa fa-github" aria-hidden="true"></i></a>
    <a class="dribble" href='https://dribbble.com/shots/3678061-Card-Animation'><i class="fa fa-dribbble" aria-hidden="true"></i></a></div>
  <div class="card aqua active">
    <div class="card-month">
      <div class="card-month__name">july</div>
      <div class="card-month__divider"></div>
      <div class="card-month__date">17</div>
    </div>
    <div class="card-image"></div>
    <div class="card-content">
      <div class="card-content__author">
        <div class="author__divider"></div>
        <div class="author__name">Andrey Andrey</div>
      </div>
      <div class="card-content__title">The Blue Waves</div>
      <div class="card-content__text">
        <div class="text__time"><i class="fa fa-clock-o" aria-hidden="true"></i> 8 minutes read</div>
        <div class="text__content">
          <i>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum error cumque repellat atque amet, officiis commodi quos explicabo dignissimos. Saepe.</i>
          <a class="text__content__button" href='#'><i class="fa fa-play-circle" aria-hidden="true"></i></a>
        </div>
      </div>
      <div class="card-content__nav" style='justify-content: flex-end'>
        <!--  <a class="nav__prev" href='#'>prev</a> -->
        <a class="nav__next" href='#'>next</a>
      </div>
    </div>
  </div>
  <div class="card green">
    <div class="card-month">
      <div class="card-month__name">june</div>
      <div class="card-month__divider"></div>
      <div class="card-month__date">21</div>
    </div>
    <div class="card-image"></div>
    <div class="card-content">
      <div class="card-content__author">
        <div class="author__divider"></div>
        <div class="author__name">Igor Mathewshonok</div>
      </div>
      <div class="card-content__title">A Green Revolution</div>
      <div class="card-content__text">
        <div class="text__time"><i class="fa fa-clock-o" aria-hidden="true"></i> 3 minutes read</div>
        <div class="text__content">
          <i>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum error cumque repellat atque amet, officiis commodi quos explicabo dignissimos. Saepe.</i>
          <a class="text__content__button" href='#'><i class="fa fa-play-circle" aria-hidden="true"></i></a>
        </div>
      </div>
      <div class="card-content__nav">
        <a class="nav__prev" href='#'>prev</a>
        <a class="nav__next" href='#'>next</a>
      </div>
    </div>
  </div>
  <div class="card ochra">
    <div class="card-month">
      <div class="card-month__name">March</div>
      <div class="card-month__divider"></div>
      <div class="card-month__date">17</div>
    </div>
    <div class="card-image"></div>
    <div class="card-content">
      <div class="card-content__author">
        <div class="author__divider"></div>
        <div class="author__name">Abstract Museum</div>
      </div>
      <div class="card-content__title">The Mystery Path</div>
      <div class="card-content__text">
        <div class="text__time"><i class="fa fa-clock-o" aria-hidden="true"></i> 17 minutes read</div>
        <div class="text__content">
          <i>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum error cumque repellat atque amet, officiis commodi quos explicabo dignissimos. Saepe.</i>
          <a class="text__content__button" href='#'><i class="fa fa-play-circle" aria-hidden="true"></i></a>
        </div>
      </div>
      <div class="card-content__nav">
        <a class="nav__prev" href='#'>prev</a>
        <a class="nav__next" href='#'>next</a>
      </div>
    </div>
  </div>
</body>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script id="rendered-js" >
var animationSpeed = 250; //ms
var activeClass = "active";
var inactiveClass = "inactive";

$(".nav__next").click(function () {
  event.preventDefault();
  $(".card.active").addClass(inactiveClass);
  setTimeout(function () {
    $(".card.active").removeClass(activeClass).next().addClass(activeClass);
  }, animationSpeed);
});
$(".nav__prev").click(function () {
  event.preventDefault();
  $(".card.active").addClass(inactiveClass);
  setTimeout(function () {
    $(".card.active").
    removeClass(activeClass).
    removeClass(inactiveClass).
    prev().
    removeClass(inactiveClass).
    addClass(activeClass);
  }, animationSpeed);
});
    </script>
</body>
</html>

2. News cards with hover effects

Made by LittleSnippets.net. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://www.littlesnippets.net/css/codepen-result.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1529 {
  background-color: #000000;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  margin: 10px;
  max-width: 310px;
  min-width: 250px;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
}

.snip1529 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.snip1529 img {
  max-width: 100%;
  vertical-align: top;
  position: relative;
  opacity: 0.75;
}

.snip1529 figcaption {
  padding: 25px 20px 25px;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.snip1529 .date {
  background-color: #fff;
  color: #333;
  font-size: 18px;
  font-weight: 800;
  min-height: 48px;
  min-width: 48px;
  padding: 10px 0;
  position: absolute;
  right: 15px;
  text-align: center;
  text-transform: uppercase;
  top: 0;
}

.snip1529 .date span {
  display: block;
  line-height: 14px;
}

.snip1529 .date .month {
  font-size: 11px;
}

.snip1529 h3,
.snip1529 p {
  margin: 0;
  padding: 0;
}

.snip1529 h3 {
  font-weight: 800;
  letter-spacing: -0.4px;
}

.snip1529 .hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  background-color: rgba(236, 188, 46, 0.75);
  display: flex;
  font-size: 65px;
  justify-content: center;
  opacity: 0;
}

.snip1529 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}

.snip1529:hover .hover,
.snip1529.hover .hover {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  opacity: 1;
}

.snip1529:hover figcaption,
.snip1529.hover figcaption {
  opacity: 0;
}

.snip1529:hover .date,
.snip1529.hover .date {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}


/* Demo purposes only */

body {
  background-color: #212121;
}
</style>
</head>
<body>
  <figure class="snip1529">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample13.jpg" alt="pr-sample13" />
  <div class="date"><span class="day">28</span><span class="month">Apr</span></div>
  <figcaption>
    <h3>An Abstract Post Heading</h3>
    <p>Which is worse, that everyone has his price, or that the price is always so low.</p>
  </figcaption>
  <div class="hover"><i class="ion-android-open"></i></div>
  <a href="#"></a>
</figure>
<figure class="snip1529 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample21.jpg" alt="pr-sample21" />
  <div class="date"><span class="day">17</span><span class="month">May</span></div>
  <figcaption>
    <h3>Down with this sort of thing</h3>
    <p>I'm killing time while I wait for life to shower me with meaning and happiness.</p>
  </figcaption>
  <div class="hover"><i class="ion-android-open"></i></div>
  <a href="#"></a>
</figure>
<figure class="snip1529"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample23.jpg" alt="pr-sample23" />
  <div class="date"><span class="day">08</span><span class="month">June</span></div>
  <figcaption>
    <h3>The World Ended Yesterday</h3>
    <p>The only skills I have the patience to learn are those that have no real application in life. </p>
  </figcaption>
  <div class="hover"><i class="ion-android-open"></i></div>
  <a href="#"></a>
</figure>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script id="rendered-js" >
/* Demo purposes only */
$(".hover").mouseleave(
function () {
  $(this).removeClass("hover");
});
//# sourceURL=pen.js
    </script>
</body>
</html>

3. Carlos Mortera’s News Card Design

Made by Brendan Bohn. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<style>
body {
  background-color: #2F7DC9;
}

.card {
  position: relative;
  width: 350px;
  height: 600px;
  background-color: #1C1F22;
  margin: 20px auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  overflow: hidden;
}

ul {
  position: absolute;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  width: 100%;
  top: -17px;
  height: 40px;
}

li {
  display: inline;
  color: white;
  padding: 0 7px;
}

li .left {
  position: relative;
  right: 25px;
  top: 8px;
}

li .right {
  position: relative;
  left: 210px;
  top: 8px;
}

.ion-android-checkbox-outline {
  color: #2F7DC9;
  vertical-align: middle;
}

.article-img {
  height: 200px;
  width: 350px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, #1c1f22 100%), url("http://www.trbimg.com/img-552a29ae/turbine/la-fg-pope-armenian-pictures-20150412/600/600x338");
  background-size: cover;
}

.title {
  margin: 0 0 0 20px;
}

.add-premium {
  background-color: #3399ff;
  padding: 0 5px;
}

h2 {
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  font-family: sans-serif;
  font-weight: lighter;
  margin: 10px 0 5px 0;
}

h1 {
  color: white;
  margin: 15px 0 5px 0;
}

h3 {
  color: #8E8E91;
  font-family: sans-serif;
  font-size: 9px;
  line-height: 5px;
  text-transform: uppercase;
}

.sub-heading {
  margin: 20px 0 30px 0;
}

.article-tags {
  padding: 20px 20px 0 20px;
  height: 40px;
  border-top: 1px solid gray;
}

.article-tag {
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  color: #D0756D;
  border: 1px solid #D0756D;
  border-radius: 15px;
  padding: 5px 10px;
  margin: 40px 0 5px 0;
}

.text {
  background-color: white;
  padding: 1px 0 15px 24px;
}

p {
  line-height: 25px;
}

.first-letter {
  float: left;
  font-size: 50px;
  font-weight: heavier;
  padding: 0 2px 0 0;
  position: relative;
  top: 11px;
  right: 0;
}
</style>
</head>
<body>
  <div class="card">
    <ul>
      <li><i class="ion-android-arrow-back left"></i></li>
      <li><i class="ion-ios-upload-outline right"></i></li>
      <li><i class="ion-android-checkbox-outline right"></i></li>
    </ul>
    <div class="article-img"></div>
    <div class="title">
      <h2><span class="add-premium">+</span> Premium</h2>
      <h1>Editorial: US should call Armenian Genocide by its name</h1>
      <div class="sub-heading">
         <h3>By The Times Editorial Board</h3>
         <h3>April 9, 2015, 4:00PM</h3>
      </div>
    </div>
    <div class="article-tags">
      <span class="article-tag">
      Middle East
      </span>
    </div>
    <div class="text">
      <span class="first-letter">I</span><p> n eu finibus purus. Aliquam erat volutpat. Donec nec purus eget nunc tempor placerat. Fusce id congue ligula. Morbi cursus eleifend massa, vitae consequat lectus fermentum non. Duis a mauris nec quam suscipit consectetur a eget sapien. Duis vel accumsan mi. Sed erat sem, ultrices in velit a, hendrerit luctus dolor. Suspendisse bibendum turpis eu pellentesque semper. Nullam auctor fermentum varius.</p>
    </div>
  </div>
</body>
</html>

4. Latest news card

Another News Card by LittleSnippets.net with hover and flip effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://www.littlesnippets.net/css/codepen-result.css'> 
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,600,700,800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip1208 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  width: 100%;
  background-color: #ffffff;
  color: #000000;
  text-align: left;
  font-size: 16px;
}
figure.snip1208 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
figure.snip1208 img {
  max-width: 100%;
  vertical-align: top;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
figure.snip1208 figcaption {
  padding: 25px;
  position: relative;
}
figure.snip1208 .date,
figure.snip1208 i {
  background-color: #1abc9c;
  top: 25px;
  color: #fff;
  left: 25px;
  min-height: 60px;
  min-width: 60px;
  position: absolute;
  text-align: center;
}
figure.snip1208 .date {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
}
figure.snip1208 .date span {
  display: block;
  line-height: 30px;
}
figure.snip1208 .date .month {
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.1);
}
figure.snip1208 i {
  line-height: 60px;
  font-size: 30px;
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip1208 h3,
figure.snip1208 p {
  margin: 0;
  padding: 0;
}
figure.snip1208 h3 {
  margin-bottom: 10px;
  display: inline-block;
  font-weight: 600;
  color: #333333;
  text-transform: uppercase;
}
figure.snip1208 p {
  font-size: 0.8em;
  margin-bottom: 20px;
  line-height: 1.6em;
}
figure.snip1208 button {
  border: medium none;
  padding: 10px 20px;
  background-color: #1abc9c;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.8em;
}
figure.snip1208 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1208:hover img,
figure.snip1208.hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
figure.snip1208:hover .date,
figure.snip1208.hover .date {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip1208:hover i,
figure.snip1208.hover i {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure.snip1208:hover button,
figure.snip1208.hover button {
  background-color: #117964;
}
</style>
</head>
<body>
  <figure class="snip1208">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample66.jpg" alt="sample66"/>
  <div class="date"><span class="day">28</span><span class="month">Oct</span></div><i class="ion-film-marker"></i>
  <figcaption>
    <h3>The World Ended Yesterday</h3>
    <p>
      I don't need to compromise my principles, because they don't have the slightest bearing on what happens to me anyway.
    </p>
    <button>Read More</button>
  </figcaption><a href="#"></a>
</figure>
<figure class="snip1208 hover">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample9.jpg" alt="sample9"/>
  <div class="date"><span class="day">17</span><span class="month">Nov</span></div><i class="ion-headphone"> </i>
  <figcaption>
    <h3>An Abstract Post Heading</h3>
    <p>
      Sometimes the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
    </p>
    <button>Read More</button>
  </figcaption><a href="#"></a>
</figure>
<figure class="snip1208">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample6.jpg" alt="sample6"/>
  <div class="date"><span class="day">01</span><span class="month">Dec</span></div><i class="ion-checkmark"> </i>
  <figcaption>
    <h3>Down with this sort of thing</h3>
    <p>
      I don't need to compromise my principles, because they don't have the slightest bearing on what happens to me anyway.
    </p>
    <button>Read More</button>
  </figcaption><a href="#"></a>
</figure>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
/* Demo purposes only */
$(".hover").mouseleave(
function () {
  $(this).removeClass("hover");
});
    </script>
</body>
</html>

5. Article News Card

Made by Markus. Simple Article News card with hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
  
<style>
@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400, 600";

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  background: linear-gradient(to right, #c471ed, #12c2e9);
}

.card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fafafa;
  border: 0px;
  transition: all 0.3s ease-in-out;
}

.card .card-img {
  height: auto;
  width: 100%;
  background-color: #4426a8;
  position: relative;
  background-size: cover;
  background-position: center top;
}

.card:hover {
  transition: all .35s;
  transform: translate3d(0, -5px, 0);
}

.card .card-content span {
  margin-bottom: 0.5rem;
  position: relative;
  display: block;
}

.card svg {
  position: absolute;
  top: 0;
}

.card .card-content {
  width: 100%;
  overflow-x: hidden;
  padding: 10px 20px 30px 20px;
  position: relative;
  overflow-y: hidden;
}

.card .card-content .bttn {
  display: inline-block;
  padding: 7px 8px;
  text-align: center;
  border-radius: 3px;
  background-color: #39454b;
  text-decoration: none;
  color: #fff;
  transition: 300ms all;
}

.card .card-content .bttn:hover {
  background-color: #3e4c53;
  color: #fff;
}

.card .card-content p:first-of-type {
  margin-top: 0px;
  text-align: left;
}
</style>
</head>
<body>
  <div class="container">
  <div class="row mt-5 mb-5">
    
    <!-- card 1 -->
    <div class="col-xs-12 col-sm-12 col-md-4 d-flex align-items-stretch mb-3">
      <div class="card">
 <img class="card-img" src="https://i.imgur.com/R1JoEnD.jpeg">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 449">
            <path
              d="M-6.84 362.89c28.01-16.38 76.91-39.23 136.86-38.95 14.79.07 54.58.26 97.9 16.84 11.73 4.49 21.07 9.17 40 14.74 13.84 4.07 35.91 10.42 64.22 11.58 21.61.89 38.04-1.61 62.11-5.26 12.27-1.86 27.49-4.66 54.74-8.42 8.4-1.16 17.9-2.4 30.53-2.11 11.83.28 21.61 1.79 28.42 3.16l1.05 96.85-519-1.05c1.06-29.13 2.12-58.25 3.17-87.38z"
              fill="#fafafa" /></svg>
        <div class="card-content">
          <h4>5 ways to create inspiring articles</h4>
          <span>by Joe Bloggs</span>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue
            semper porta. Mauris massa. </p>
          <a href="#" class="bttn">Read Full Article</a>
        </div>
      </div>
    </div>

    <!-- card 2 -->
    <div class="col-xs-12 col-sm-12 col-md-4 d-flex align-items-stretch mb-3">
      <div class="card">
 <img class="card-img" src="https://i.imgur.com/tJFNRg9.jpg">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 449">
            <path
              d="M-6.84 362.89c28.01-16.38 76.91-39.23 136.86-38.95 14.79.07 54.58.26 97.9 16.84 11.73 4.49 21.07 9.17 40 14.74 13.84 4.07 35.91 10.42 64.22 11.58 21.61.89 38.04-1.61 62.11-5.26 12.27-1.86 27.49-4.66 54.74-8.42 8.4-1.16 17.9-2.4 30.53-2.11 11.83.28 21.61 1.79 28.42 3.16l1.05 96.85-519-1.05c1.06-29.13 2.12-58.25 3.17-87.38z"
              fill="#fafafa" /></svg>
        <div class="card-content">
          <h4>5 ways to create inspiring articles</h4>
          <span>by Joe Bloggs</span>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis enim ut tellus elementum sagittis vitae. Elementum eu facilisis sed odio. Commodo viverra maecenas accumsan lacus
            vel facilisis. Duis sagittis ipsum.</p>
          <a href="#" class="bttn">Read Full Article</a>
        </div>
      </div>
    </div>

    <!-- card 3 -->
    <div class="col-xs-12 col-sm-12 col-md-4 d-flex align-items-stretch mb-3">
      <div class="card">
   <img class="card-img" src="https://i.imgur.com/wRsKD0E.jpg">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 449">
            <path
              d="M-6.84 362.89c28.01-16.38 76.91-39.23 136.86-38.95 14.79.07 54.58.26 97.9 16.84 11.73 4.49 21.07 9.17 40 14.74 13.84 4.07 35.91 10.42 64.22 11.58 21.61.89 38.04-1.61 62.11-5.26 12.27-1.86 27.49-4.66 54.74-8.42 8.4-1.16 17.9-2.4 30.53-2.11 11.83.28 21.61 1.79 28.42 3.16l1.05 96.85-519-1.05c1.06-29.13 2.12-58.25 3.17-87.38z"
              fill="#fafafa" /></svg>
        <div class="card-content">
          <h4>5 ways to create inspiring articles</h4>
          <span>by Joe Bloggs</span>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis molestie a iaculis at erat pellentesque adipiscing. Vulputate dignissim suspendisse in est ante in nibh. Purus
            non enim praesent elementum.</p>
          <a href="#" class="bttn">Read Full Article</a>
        </div>
      </div>
    </div>

  </div>
</div>
</body>
</html>

6. News Card

3rd News Card by LittleSnippets.net. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://www.littlesnippets.net/css/codepen-result.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,600,700);
.snip1527 {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 16px;
  margin: 10px;
  max-width: 310px;
  min-width: 250px;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
}

.snip1527 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.snip1527 img {
  max-width: 100%;
  vertical-align: top;
  position: relative;
}

.snip1527 figcaption {
  padding: 25px 20px 25px;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.snip1527 figcaption:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #700877;
  content: '';
  background: -moz-linear-gradient(90deg, #700877 0%, #ff2759 100%, #ff2759 100%);
  background: -webkit-linear-gradient(90deg, #700877 0%, #ff2759 100%, #ff2759 100%);
  background: linear-gradient(90deg, #700877 0%, #ff2759 100%, #ff2759 100%);
  opacity: 0.8;
  z-index: -1;
}

.snip1527 .date {
  background-color: #fff;
  border-radius: 50%;
  color: #700877;
  font-size: 18px;
  font-weight: 700;
  min-height: 48px;
  min-width: 48px;
  padding: 10px 0;
  position: absolute;
  right: 15px;
  text-align: center;
  text-transform: uppercase;
  top: -25px;
}

.snip1527 .date span {
  display: block;
  line-height: 14px;
}

.snip1527 .date .month {
  font-size: 11px;
}

.snip1527 h3,
.snip1527 p {
  margin: 0;
  padding: 0;
}

.snip1527 h3 {
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 5px;
}

.snip1527 p {
  font-size: 0.8em;
  line-height: 1.6em;
  margin-bottom: 0px;
}

.snip1527 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}

.snip1527:hover img,
.snip1527.hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>
</head>
<body>
  <figure class="snip1527">
  <div class="image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample23.jpg" alt="pr-sample23" /></div>
  <figcaption>
    <div class="date"><span class="day">28</span><span class="month">Oct</span></div>
    <h3>The World Ended Yesterday</h3>
    <p>

      You know what we need, Hobbes? We need an attitude. Yeah, you can't be cool if you don't have an attitude.
    </p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1527 hover">
  <div class="image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample24.jpg" alt="pr-sample24" /></div>
  <figcaption>
    <div class="date"><span class="day">17</span><span class="month">Nov</span></div>
    <h3>An Abstract Post Heading</h3>
    <p>

      Sometimes the surest sign that intelligent life exists elsewhere in the universe is that none of it has tried to contact us.
    </p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1527">
  <div class="image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample25.jpg" alt="pr-sample25" /></div>
  <figcaption>
    <div class="date"><span class="day">01</span><span class="month">Dec</span></div>
    <h3>Down with this sort of thing</h3>
    <p>

      I don't need to compromise my principles, because they don't have the slightest bearing on what happens to me anyway.
    </p>
  </figcaption>
  <a href="#"></a>
</figure>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script id="rendered-js" >
/* Demo purposes only */
$(".hover").mouseleave(
function () {
  $(this).removeClass("hover");
});
    </script>
</body>
</html>

7. News Card Two

Made by Mehluli Hikwa. Simple news card with sliding effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - News Card Two</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
  
<style>
/* Housekeeping */
* {
    box-sizing: border-box;
}

body {
    background: #f1f1f1;
    font-family: 'Montserrat', sans-serif;
    font-size: 65.2%;
}

/*********** NEWS CARD ***********/
.news-card {
    display: flex;
    flex-direction: column;
    margin: 1rem auto;
    box-shadow: 0 3px 7px -1px rgba(0, 0, 0, .1);
    margin-bottom: 1.6%;
    background: #fff;
    line-height: 1.4;
    border-radius: 5px;
    overflow: hidden;
    z-index: 0;
}

.news-card a {
    color: inherit;
    text-decoration: none;
}

.news-card a:hover {
    color: #d9b364;
}

.news-card .img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.2s;
}

.news-card:hover .img {
    transform: scale(1.3) rotate(3deg);
}

.news-card .meta {
    position: relative;
    z-index: 0;
    height: 200px;
}




/* DETAILS */
.news-card .details {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    margin: auto;
    transition: left 0.2s;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px;
    width: 100%;
    font-size: 1.5em;
}

.news-card:hover .details {
    left: 0%;
}

.news-card .details div {
    padding: 20px 0 10px 20px;
}

.news-card .details div.date:before {
    content: "\f133";
    font-family: FontAwesome;
    margin-right: 10px;
}

.news-card .details div.category::before {
    content: "\f02b";
    font-family: FontAwesome;
    margin-right: 10px;
}




/* DESCRIPTION */
.news-card .description {
    padding: 20px;
    background: #fff;
    position: relative;
    z-index: 1;
}

.news-card .description h2 {
    font-size: 2em;
    font-weight: 300;
    text-transform: uppercase;
    color: #222;
    margin-top: 5px;
}

.news-card p {
    position: relative;
    font-size: 1.4em;
    margin: 1rem 0 0;
}

.news-card p:first-of-type:before {
    content: "";
    position: absolute;
    height: 5px;
    background: #d9b364;
    width: 35px;
    top: -0.75rem;
}

.news-card .description .read-more {
    text-align: right;
}

.news-card .description .read-more a {
    color: #d9b364;
    display: inline-block;
    position: relative;
}

.news-card .description .read-more a:after {
    content: "\f061";
    font-family: FontAwesome;
    margin-left: -10px;
    opacity: 0;
    vertical-align: middle;
    transition: margin 0.3s, opacity 0.3s;
}

.news-card .description .read-more a:hover:after {
    margin-left: 5px;
    opacity: 1;
}




/* CARD RESPONSIVENESS */
@media (min-width: 640px) {
    .news-card {
        flex-direction: row;
        max-width: 600px;
    }

    .news-card .meta {
        flex-basis: 40%;
        height: auto;
    }

    .news-card .description {
        flex-basis: 60%;
    }

    .news-card .description:before {
        content: "";
        background: #fff;
        width: 30px;
        position: absolute;
        left: -10px;
        top: 0;
        bottom: 0;
        z-index: -1;
    }

    .news-card:nth-child(even) {
        flex-direction: row-reverse;
    }

}
</style>
</head>
<body>
  <div class="news-card">
	<div class="meta">
		<div class="img" style="background-image: url(http://lorempixel.com/800/520/food/)"></div>
		<div class="details">
			<div class="date">May 10 2019</div>
			<div class="category">
				<a href="#">Foodie News</a>
			</div>
		</div>
	</div>
	<div class="description">
		<h2>Recipes - Yummy Healthy and Easy to make</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eum dolorum architecto obcaecati enim dicta praesentium, quam nobis! Neque ad aliquam facilis numquam. Veritatis, sit.</p>
		<p class="read-more">
			<a href="#">Read More</a>
		</p>
	</div>
</div>

<div class="news-card">
	<div class="meta">
		<div class="img" style="background-image: url(http://lorempixel.com/800/520/sports/)"></div>
		<div class="details">
			<div class="date">Feb 28 2019</div>
			<div class="category">
				<a href="#">Sport News</a>
			</div>
		</div>
	</div>
	<div class="description">
		<h2>Who doesnt love a good game</h2>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto assumenda voluptatum adipisci rem, sit amet, laboriosam sequi explicabo modi deserunt maiores doloremque aliquid et molestias maxime, natus soluta dignissimos saepe.</p>
		<p class="read-more">
			<a href="#">Read More</a>
		</p>
	</div>
</div>

<div class="news-card">
	<div class="meta">
		<div class="img" style="background-image: url(http://lorempixel.com/800/520/nature/)"></div>
		<div class="details">
			<div class="date">Jan 01 2019</div>
			<div class="category">
				<a href="#">Nature</a>
			</div>
		</div>
	</div>
	<div class="description">
		<h2>I am one with nature - the great outback</h2>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto assumenda voluptatum adipisci rem, sit amet, laboriosam sequi explicabo modi deserunt.</p>
		<p class="read-more">
			<a href="#">Read More</a>
		</p>
	</div>
</div>
</body>
</html>

8. Responsive CSS News Card

Made by Tenzing Gaychey. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.0.8/css/all.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700'>
  
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Open Sans";
}

body {
  background-color: #555;
}

.content-wrapper {
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 0.5rem;
}

.news-card {
  border: 0px solid aqua;
  margin: 0.5rem;
  position: relative;
  height: 12rem;
  overflow: hidden;
  border-radius: 0.5rem;
  flex: 1;
  min-width: 290px;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

@media (min-width: 900px) {

.news-card {
    height: 20rem
}
  }

.news-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);;
      z-index: 0;
    }

.news-card__card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
/*     background: rgba(255,0,0,.5); */
  }

.news-card__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 3s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    z-index: -1;
  }

.news-card__text-wrapper {
    position: absolute;
    bottom: 0rem;
    padding: 1rem;
    color: white;
/*     background-color: rgba(0, 0, 0, 0.4); */
    transition: background-color 1.5s ease;
  }

.news-card__title {
    transition: color 1s ease;
    margin-bottom: .5rem;
  }

.news-card__post-date {
    font-size: .7rem;
    margin-bottom: .5rem;
    color: #CCC;
  }

.news-card__details-wrapper {
    max-height: 0;
    opacity: 0;
    transition: max-height 1.5s ease, opacity 1s ease;
  }

@media (min-width: 900px) {
    .news-card:hover .news-card__details-wrapper {
      max-height: 20rem;
      opacity: 1;
    }
    .news-card:hover .news-card__text-wrapper {
      background-color: rgba(0, 0, 0, 0.6);
    }
    .news-card:hover .news-card__title {
      color: yellow;
    }
    .news-card:hover .news-card__image {
      transform: scale(1.2);
      z-index: -1;
    }
  }

.news-card__excerpt {
    font-weight: 300;
  }

.news-card__read-more {
    background: black;
    color: #bbb;
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: 0.3rem;
    margin-top: 1rem;
    border: 1px solid #444;
    font-size: 0.8rem;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-decoration: none;
    width: 7rem;
    margin-left: auto;
    position: relative;
    z-index: 5;
  }

.news-card__read-more i {
      position: relative;
      left: 0.2rem;
      color: #888;
      transition: left 0.5s ease, color 0.6s ease;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

.news-card__read-more:hover i {
      left: 0.5rem;
      color: yellow;
    }
</style>
</head>
<body>
  <div class="content-wrapper">
  
  <div class="news-card">
    <a href="#" class="news-card__card-link"></a>
    <img src="https://images.pexels.com/photos/127513/pexels-photo-127513.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="news-card__image">
    <div class="news-card__text-wrapper">
      <h2 class="news-card__title">Amazing First Title</h2>
      <div class="news-card__post-date">Jan 29, 2018</div>
      <div class="news-card__details-wrapper">
        <p class="news-card__excerpt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est pariatur nemo tempore repellat? Ullam sed officia iure architecto deserunt distinctio, pariatur&hellip;</p>
        <a href="#" class="news-card__read-more">Read more <i class="fas fa-long-arrow-alt-right"></i></a>
      </div>
    </div>
  </div>

  <div class="news-card">
    <a href="#" class="news-card__card-link"></a>
    <img src="https://images.pexels.com/photos/631954/pexels-photo-631954.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="news-card__image">
    <div class="news-card__text-wrapper">
      <h2 class="news-card__title">Amazing Second Title that is Quite Long</h2>
      <div class="news-card__post-date">Jan 29, 2018</div>
      <div class="news-card__details-wrapper">
        <p class="news-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam obcaecati ex natus nulla rem sequi laborum quod fugit&hellip;</p>
        <a href="#" class="news-card__read-more">Read more <i class="fas fa-long-arrow-alt-right"></i></a>
      </div>
    </div>
  </div>

  <div class="news-card">
    <a href="#" class="news-card__card-link"></a>
    <img src="https://images.pexels.com/photos/247599/pexels-photo-247599.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="news-card__image">
    <div class="news-card__text-wrapper">
      <h2 class="news-card__title">Amazing Title</h2>
      <div class="news-card__post-date">Jan 29, 2018</div>
      <div class="news-card__details-wrapper">
        <p class="news-card__excerpt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis beatae&hellip;</p>
        <a href="#" class="news-card__read-more">Read more <i class="fas fa-long-arrow-alt-right"></i></a>
      </div>
    </div>
  </div>

  <div class="news-card">
    <a href="#" class="news-card__card-link"></a>
    <img src="https://images.pexels.com/photos/248486/pexels-photo-248486.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="news-card__image">
    <div class="news-card__text-wrapper">
      <h2 class="news-card__title">Amazing Forth Title that is Quite Long</h2>
      <div class="news-card__post-date">Jan 29, 2018</div>
      <div class="news-card__details-wrapper">
        <p class="news-card__excerpt">Lorem ipsum dolor sit amet!</p>
        <a href="#" class="news-card__read-more">Read more <i class="fas fa-long-arrow-alt-right"></i></a>
      </div>
    </div>
  </div>

  <div class="news-card">
    <a href="#" class="news-card__card-link"></a>
    <img src="https://images.pexels.com/photos/206660/pexels-photo-206660.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="news-card__image">
    <div class="news-card__text-wrapper">
      <h2 class="news-card__title">Amazing Fifth Title</h2>
      <div class="news-card__post-date">Jan 29, 2018</div>
      <div class="news-card__details-wrapper">
        <p class="news-card__excerpt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est pariatur nemo tempore repellat? Ullam sed officia iure architecto deserunt distinctio&hellip;</p>
        <a href="#" class="news-card__read-more">Read more <i class="fas fa-long-arrow-alt-right"></i></a>
      </div>
    </div>
  </div>

  <div class="news-card">
    <a href="#" class="news-card__card-link"></a>
    <img src="https://images.pexels.com/photos/210243/pexels-photo-210243.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="news-card__image">
    <div class="news-card__text-wrapper">
      <h2 class="news-card__title">Amazing 6<sup>th</sup> Title</h2>
      <div class="news-card__post-date">Jan 29, 2018</div>
      <div class="news-card__details-wrapper">
        <p class="news-card__excerpt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est pariatur nemo tempore repellat? Ullam sed officia.</p>
        <a href="#" class="news-card__read-more">Read more <i class="fas fa-long-arrow-alt-right"></i></a>
      </div>
    </div>
  </div>

</div>
</body>
</html>