blog-grid

Summary

Three-up news-and-blog teaser row preceded by a left-aligned section title and a right-aligned "See More Services" outline button. Each card has a cover image with an overlapping circular author chip, tag and date meta, headline, and a level-up arrow read-more.

HTML structure (minimal)

<section class="news_blog_wrapper section-padding">
  <div class="container">
    <div class="row align-items-center mb-30">
      <div class="col-md-7">
        <div class="section-title wow fadeInLeft" data-wow-duration="1s">
          <h6><img src="bage_head.svg" alt="">News & Blog</h6>
          <h2>Learn something more from our latest blog</h2>
        </div>
      </div>
      <div class="col-md-5 text-md-end">
        <a href="#" class="theme-btn theme-border">See More Services<i class="icon-arrow-right-2"></i></a>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 col-sm-6 mt-30">
        <div class="single_blog_widget wow fadeInUp" data-wow-duration="1s">
          <div class="single_blog_img">
            <img src="card_420x300.jpg" alt="">
            <div class="author_info">
              <div class="author_img bg-center bg-cover" style="background-image: url(man_80x80.jpg)"></div>
              <h5>by Ashik islam</h5>
            </div>
          </div>
          <div class="content">
            <div class="blog_date">
              <a href="#"><i class="fal fa-tag"></i> Education</a>
              <a href="#"><i class="fas fa-calendar-alt"></i> 26 March, 2022</a>
            </div>
            <h4>Key trends in client service that lawyers need to know</h4>
            <a href="#" class="btnd">Read More <i class="far fa-level-up-alt"></i></a>
          </div>
        </div>
      </div>
      <!-- 2 more cards 1.5s, 2s -->
    </div>
  </div>
</section>

Key SCSS tokens

.news_blog_wrapper .single_blog_widget {
  background: #fff;
  border: 1px solid rgba(34,33,39,0.08);
  border-radius: 4px;
  overflow: hidden;
  transition: 0.3s ease;

  .single_blog_img {
    position: relative;
    img { width: 100%; height: 240px; object-fit: cover; }
    .author_info {
      position: absolute; left: 18px; bottom: -22px;
      display: flex; align-items: center; gap: 10px;
      background: #fff;
      padding: 6px 14px 6px 6px;
      border-radius: 100px;
      box-shadow: 0 6px 18px rgba(34,33,39,0.10);
      .author_img { width: 38px; height: 38px; border-radius: 50%; }
      h5 { font-family: 'DM Sans', sans-serif; font-size: 13px; margin: 0; }
    }
  }
  .content {
    padding: 36px 22px 22px;
    .blog_date a { color: #b69d74; font-size: 13px; margin-right: 12px; i { margin-right: 6px; } }
    h4 { font-family: 'Crimson Pro', serif; margin: 10px 0 14px; color: #222127; }
    .btnd { color: #c8242f; }
  }
  &:hover { box-shadow: 0 18px 36px rgba(34,33,39,0.10); }
}

Animation logic

new WOW().init();
// Per-card durations: 1s, 1.5s, 2s

Notable details

• The author chip is anchored half-overlapping the image bottom edge — a small "stamp" pattern that personalises a generic blog grid without adding a separate row.
• Section header pairs a left-aligned title with a right-aligned "See More" button, sharing the same row — saves vertical space versus the standard centered-title+below-button layout.
• Brass #b69d74 for category/date meta keeps it visually subordinate to the headline.

Use when

• Mid-page blog teaser where you want each card to read like a print article (image + byline chip + headline + read more).
• Brands that publish under named authors who want their faces on cards.
• Designs where the meta row should feel like an editorial caption rather than tech taxonomy.

Caveats

• Author chip's bottom: -22px requires .content top padding ≥ ~32px or the chip overlaps the meta row.
• Three cards in source share placeholder cover image and identical headline — replace before launch.