Create beautiful cards in CSS

Cards that have an article or a page link are very common nowadays to show as a related link section or it can be used to show feeds.

You can easily create these cards using small HTML and CSS code. Here we are providing code that you can use in your project to show small cards with title, image and created by information.

HTML Code

HTML code required to crate the cards can be found below. You can paste this HTML where you want to create these cards.

<div class="cards_z">
   <div class="hd">Trending this week</div>
   
   <div class="bd">
      <div class="card_z">
         <a class="img_z" href="#">
            <img src="https://placeimg.com/640/480/animals/4" alt="" />
         </a>
         
         <div class="desc">
            <a class="title" href="#">Title for article 1 can be placed here</a>
            <div class="u_info">
               <span class="tag">Article</span>
               <span>
                  By <a href="#">John Deo</a>
               </span>
            </div>
         </div>
      </div>
      
      <div class="card_z">
         <a class="img_z" href="#">
            <img src="https://placeimg.com/640/480/animals/2" alt="" />
         </a>
         
         <div class="desc">
            <a class="title" href="#">Title for article 2 can be placed here</a>
            <div class="u_info">
               <span class="tag">Article</span>
               <span>
                  By <a href="#">John Deo</a>
               </span>
            </div>
         </div>
      </div>
   </div>
</div>

CSS Code

.cards_z .hd {
   font-weight: bold;
   font-size: 17px;
   margin-bottom: 20px;
}


.card_z {
   border: .9px solid #efefef;
   overflow: hidden;
   border-radius: 10px;
   background: #fff;
   margin-bottom: 20px;
}


.card_z .img_z {
   display: block;
   position: relative;
   padding-bottom: 40%;
   overflow: hidden;
}


.card_z .img_z img {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 100%;
   transform: translate(-50%, -50%);
}


.card_z .desc {
   padding: 15px;
}


.card_z .desc .title {
   font-weight: bold;
   font-size: 16px;
   color: #000;
   margin-bottom: 10px;
   display: block;
   line-height: 1.6;
}


.card_z .desc .tag {
   display: inline-block;
   font-size: 13px;
   margin-right: 10px;
   border: .9px solid #ddd;
   padding: 3px 5px;
   border-radius: 5px;
   color: #333;
   letter-spacing: 1px;
}


.card_z .desc .u_info {
   font-size: 14px;
   color: #777;
   display: flex;
   align-items: center;
}


.card_z .desc .u_info a {
   color: #777;
}