blog-card-grid

Summary

Three-column "News & Latest Updates" grid. Each card has a square thumbnail at the top, a post-meta line (clock + author icons), a multi-line title link, and a Read More arrow pill at the bottom. Cards fade-up in sequence on scroll.

HTML structure (minimal)

<section class="blog-section pt-130 pb-130 fade-wrapper">
  <div class="container">
    <div class="section-heading text-center">
      <h4 class="sub-heading">NEWS & LATEST UPDATES</h4>
      <h2 class="section-title">Check Our Company Inside Story</h2>
    </div>
    <div class="post-wrap">
      <div class="post-card-wrap fade-top">
        <div class="post-card">
          <div class="post-thumb"><img src="assets/img/blog/post-1.jpg" alt="post"></div>
          <div class="post-content-wrap">
            <div class="post-content">
              <ul class="post-meta">
                <li><i class="fa-sharp fa-regular fa-clock"></i>25 June, 2024</li>
                <li><i class="fa-light fa-user"></i>Post by: Admin</li>
              </ul>
              <h3 class="title">
                <a href="blog-details.html">The Future-Focused Strategies of Our Forward-Thinking Web Design Agency</a>
              </h3>
              <a href="blog-details.html" class="rr-primary-btn blog-btn">
                Read More <i class="fa-sharp fa-regular fa-arrow-right"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- 2 more cards -->
    </div>
  </div>
</section>

Key SCSS tokens

.post-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.post-card {
  background: var(--rr-color-bg-1); border-radius: 8px; overflow: hidden;
  .post-thumb img { width: 100%; height: 250px; object-fit: cover; }
  .post-content { padding: 30px; }
  .post-meta {
    display: flex; gap: 20px; list-style: none; padding: 0;
    li { color: var(--rr-color-text-body); font-size: 14px; }
    li i { color: var(--rr-color-theme-primary); margin-right: 8px; }
  }
  .title a { color: var(--rr-color-common-white); font-size: 22px; font-weight: 600;
    line-height: 1.35; transition: color .3s ease;
    &:hover { color: var(--rr-color-theme-primary); } }
}

Animation logic

// Cards fade-up via .fade-wrapper / .fade-top loop with index*0.1s delay
// (shared across the page; see process-icon-row.md for the full snippet).

Notable details

• Title links wrap up to three lines and stay legible because line-height is locked at 1.35 and font-weight stays at 600 — agencies with long SEO-driven blog titles don't break the grid.
• The post-meta list uses two FontAwesome icon-as-prefix items rather than a separate .author block; both share var(--rr-color-theme-primary) for the icons so a single accent change flips both.
• The Read More pill is the same .rr-primary-btn button used in the hero — visual consistency across the page is enforced by reusing the button class.

Use when

• Blog/news teasers on dark agency homepages that need to look uniform with hero CTAs.
• Wherever a 3-up post grid should feel like a curated reel, not a feed dump.

Caveats

• Grid is fixed at 3 columns desktop / 1 column mobile via Bootstrap 5 col-lg-4 (in the .row flavour) or via SCSS grid here — adapting to 2-up requires SCSS edits.
• Image aspect ratio is enforced by height: 250px; object-fit: cover — supplied images need to read well with potential cropping.