This snippet is used on the following knowledge base article - http://kb.wpbeaverbuilder.com/article/577-create-a-card-layout-for-posts-themer

post-card-layout.css

.fl-post-grid-post {
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
  border-radius: 5px;
  -webkit-box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
          box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.fl-post-grid-post:hover {
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
  -webkit-transform: translate3D(0, -1px, 0);
          transform: translate3D(0, -1px, 0);
  -webkit-box-shadow: 0 0 1px rgba(39, 44, 49, 0.1), 0 3px 16px rgba(39, 44, 49, 0.07);
          box-shadow: 0 0 1px rgba(39, 44, 49, 0.1), 0 3px 16px rgba(39, 44, 49, 0.07);
}

.fl-post-grid-post a,
.fl-post-grid-post a:hover {
  text-decoration: none;
}

.post-card-image-link {
  overflow: hidden;
  position: relative;
  display: block;
  border-radius: 5px 5px 0 0;
}

.post-card-image {
  height: 150px;
  background-position: center;
  background-size: cover;
}

.post-card-content {
  display: block;
  padding: 25px;
  font-size: 14px;
}

.post-card-content-link {
  color: #15171a;
}

.post-card-content-link:hover {
  text-decoration: none;
}

.post-card-category {
  display: block;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #999999;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.post-card-title {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}