Blog

These sections showcase a collection of articles, insights, or updates published by the brand or individual.

Overview

"Blog" blocks are sections on websites or applications that showcase a collection of articles, insights, or updates published by the brand or individual. These blocks typically display blog titles, brief summaries, publication dates, and thumbnails, allowing users to browse and access content easily.

Some of these examples make use of Swiper.js, a mobile-friendly slider library. To include Swiper in your project, add the following CDN links to your HTML file.

JavaScript

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

CSS

<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet" />

Examples

Below are a few examples of “Blog” sections.

Example 1

Blogs

Stay informed with our latest blog posts

Blog Image
Development 12 Jan 2025
5 Tools Every Remote Developer Should Be Using

Boost productivity with these essential tools for remote coding.

Read more
Blog Image
Design 20 Feb 2025
Designing for Simplicity in a Complex World

Learn how minimal design improves usability and user experience.

Read more
Blog Image
Marketing 6 Jan 2025
Why Brand Storytelling Still Matters in 2025

Discover how storytelling builds trust and drives customer loyalty.

Read more
Blog Image
Startups 10 Mar 2025
From Idea to Launch: Building MVPs That Matter

A quick guide to launching focused, validated minimum viable products.

Read more
Blog Image
UI/UX 30 Mar 2025
Dark Mode Design: Aesthetic or Accessibility Choice?

Unpacking the benefits and tradeoffs of dark mode interfaces.

Read more 
<section class="bg-body py-5">
  <div class="container">
      <div class="text-center">
          <h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Blogs</h1>
          <h2 class="mb-4">Stay informed with our latest blog posts</h2>
      </div>
      <div class="swiper swiper1">
          <div class="swiper-wrapper mb-5">
              <div class="swiper-slide" style="height: auto;">
                  <div class="card border h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
                      <div class="card-body d-flex flex-column p-4">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge text-muted text-uppercase border shadow">Development</span>
                              <span class="text-muted small">12 Jan 2025</span>
                          </div>
                          <h5 class="card-title mb-2">5 Tools Every Remote Developer Should Be Using</h5>
                          <p class="text-muted mb-2">Boost productivity with these essential tools for remote coding.</p>
                          <a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card border h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
                      <div class="card-body d-flex flex-column p-4">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge text-muted text-uppercase border shadow">Design</span>
                              <span class="text-muted small">20 Feb 2025</span>
                          </div>
                          <h5 class="card-title mb-2">Designing for Simplicity in a Complex World</h5>
                          <p class="text-muted mb-2">Learn how minimal design improves usability and user experience.</p>
                          <a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card border h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
                      <div class="card-body d-flex flex-column p-4">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge text-muted text-uppercase border shadow">Marketing</span>
                              <span class="text-muted small">6 Jan 2025</span>
                          </div>
                          <h5 class="card-title mb-2">Why Brand Storytelling Still Matters in 2025</h5>
                          <p class="text-muted mb-2">Discover how storytelling builds trust and drives customer loyalty.</p>
                          <a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card border h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
                      <div class="card-body d-flex flex-column p-4">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge text-muted text-uppercase border shadow">Startups</span>
                              <span class="text-muted small">10 Mar 2025</span>
                          </div>
                          <h5 class="card-title mb-2">From Idea to Launch: Building MVPs That Matter</h5>
                          <p class="text-muted mb-2">A quick guide to launching focused, validated minimum viable products.</p>
                          <a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card border h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
                      <div class="card-body d-flex flex-column p-4">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge text-muted text-uppercase border shadow">UI/UX</span>
                              <span class="text-muted small">30 Mar 2025</span>
                          </div>
                          <h5 class="card-title mb-2">Dark Mode Design: Aesthetic or Accessibility Choice?</h5>
                          <p class="text-muted mb-2">Unpacking the benefits and tradeoffs of dark mode interfaces.</p>
                          <a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                      </div>
                  </div>
              </div>
          </div>
          <div class="swiper-pagination"></div>
      </div>
  </div>
</section>
  .swiper-pagination-bullet {
    background: var(--bs-primary);
  }
  .swiper-pagination-bullet-active {
    background: var(--bs-primary);
  }

document.addEventListener('DOMContentLoaded', () => {
  var swiper = new Swiper(".swiper1", {
      slidesPerView: 1,
      spaceBetween: 20,
      pagination: {
          el: ".swiper-pagination",
          clickable: true,
      },
      autoplay: {
          delay: 3000,
          disableOnInteraction: false,
      },
      breakpoints: {
          576: {
              slidesPerView: 2,
              spaceBetween: 24,
          },
          992: {
              slidesPerView: 3,
              spaceBetween: 30,
          }
      }
  });
});

Example 2

Blogs

Stay informed with our latest blog posts

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.

Blog Image
Development 12 Jan 2025
5 Tools Every Remote Developer Should Be Using

Boost productivity with these essential tools for remote coding.

Read more
Blog Image
Design 20 Feb 2025
Designing for Simplicity in a Complex World

Learn how minimal design improves usability and user experience.

Read more
Blog Image
Marketing 6 Jan 2025
Why Brand Storytelling Still Matters in 2025

Discover how storytelling builds trust and drives customer loyalty.

Read more
Blog Image
Startups 10 Mar 2025
From Idea to Launch: Building MVPs That Matter

A quick guide to launching focused, validated minimum viable products.

Read more
Blog Image
UI/UX 30 Mar 2025
Dark Mode Design: Aesthetic or Accessibility Choice?

Unpacking the benefits and tradeoffs of dark mode interfaces.

Read more 
<section class="bg-body py-5">
  <div class="container">
      <div class="row mb-4">
          <div class="col-lg-6 mb-2 mb-lg-0">
              <h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Blogs</h1>
              <h2 class="mb-0">Stay informed with our latest blog posts</h2>
          </div>
          <div class="col-lg-6">
              <p class="text-muted mb-0">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
              corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.
              </p>
          </div>
      </div>
      <div class="swiper swiper2">
          <div class="swiper-wrapper mb-5">
              <div class="swiper-slide" style="height: auto;">
                  <div class="card border h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
                      <div class="card-body d-flex flex-column p-4">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge text-muted text-uppercase border shadow">Development</span>
                              <span class="text-muted small">12 Jan 2025</span>
                          </div>
                          <h5 class="card-title mb-2">5 Tools Every Remote Developer Should Be Using</h5>
                          <p class="text-muted mb-2">Boost productivity with these essential tools for remote coding.</p>
                          <a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card border h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
                      <div class="card-body d-flex flex-column p-4">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge text-muted text-uppercase border shadow">Design</span>
                              <span class="text-muted small">20 Feb 2025</span>
                          </div>
                          <h5 class="card-title mb-2">Designing for Simplicity in a Complex World</h5>
                          <p class="text-muted mb-2">Learn how minimal design improves usability and user experience.</p>
                          <a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card border h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
                      <div class="card-body d-flex flex-column p-4">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge text-muted text-uppercase border shadow">Marketing</span>
                              <span class="text-muted small">6 Jan 2025</span>
                          </div>
                          <h5 class="card-title mb-2">Why Brand Storytelling Still Matters in 2025</h5>
                          <p class="text-muted mb-2">Discover how storytelling builds trust and drives customer loyalty.</p>
                          <a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card border h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
                      <div class="card-body d-flex flex-column p-4">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge text-muted text-uppercase border shadow">Startups</span>
                              <span class="text-muted small">10 Mar 2025</span>
                          </div>
                          <h5 class="card-title mb-2">From Idea to Launch: Building MVPs That Matter</h5>
                          <p class="text-muted mb-2">A quick guide to launching focused, validated minimum viable products.</p>
                          <a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card border h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top" alt="Blog Image">
                      <div class="card-body d-flex flex-column p-4">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge text-muted text-uppercase border shadow">UI/UX</span>
                              <span class="text-muted small">30 Mar 2025</span>
                          </div>
                          <h5 class="card-title mb-2">Dark Mode Design: Aesthetic or Accessibility Choice?</h5>
                          <p class="text-muted mb-2">Unpacking the benefits and tradeoffs of dark mode interfaces.</p>
                          <a href="#" class="text-decoration-none text-primary mt-auto">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                      </div>
                  </div>
              </div>
          </div>
          <div class="swiper-pagination"></div>
      </div>
  </div>
</section>
  .swiper-pagination-bullet {
    background: var(--bs-primary);
  }
  .swiper-pagination-bullet-active {
    background: var(--bs-primary);
  }

document.addEventListener('DOMContentLoaded', () => {
  var swiper = new Swiper(".swiper2", {
      slidesPerView: 1,
      spaceBetween: 20,
      pagination: {
          el: ".swiper-pagination",
          clickable: true,
      },
      autoplay: {
          delay: 3000,
          disableOnInteraction: false,
      },
      breakpoints: {
          576: {
              slidesPerView: 2,
              spaceBetween: 24,
          },
          992: {
              slidesPerView: 3,
              spaceBetween: 30,
          }
      }
  });
});

Example 3

Blogs

Stay informed with our latest blog posts

Blog Image
Design 20 Feb 2025
Designing for Simplicity in a Complex World

Learn how minimal design improves usability and user experience.

Read more
Blog Image
Development 12 Jan 2025
5 Tools Every Remote Developer Should Be Using

Boost productivity with these essential tools for remote coding.

Read more
Blog Image
Marketing 6 Jan 2025
Why Brand Storytelling Still Matters in 2025

Discover how storytelling builds trust and drives customer loyalty.

Read more
Blog Image
Startups 10 Mar 2025
From Idea to Launch: Building MVPs That Matter

A quick guide to launching focused, validated minimum viable products.

Read more
Blog Image
UI/UX 30 Mar 2025
Dark Mode Design: Aesthetic or Accessibility Choice?

Unpacking the benefits and tradeoffs of dark mode interfaces.

Read more 
<section class="bg-body py-5">
  <div class="container">
      <div class="text-center text-md-start">
          <h1 class="text-primary text-uppercase fw-semibold fs-5 mb-2">Blogs</h1>
          <h2 class="mb-4">Stay informed with our latest blog posts</h2>
      </div>
      <div class="swiper swiper3">
          <div class="swiper-wrapper mb-5">
              <div class="swiper-slide" style="height: auto;">
                  <div class="card text-light shadow border-0 position-relative overflow-hidden h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog Image">
                      <div class="card-body position-relative p-4" style="z-index: 2; background: rgba(0, 0, 0, 0.5);">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge bg-secondary text-muted text-uppercase">Design</span>
                              <span class="small">20 Feb 2025</span>
                          </div>
                          <h5 class="h4 mb-2">Designing for Simplicity in a Complex World</h5>
                          <p class="mb-2">Learn how minimal design improves usability and user experience.</p>
                          <a href="#" class="link-light">Read more <i class="ri-arrow-right-line"></i></a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card text-light shadow border-0 position-relative overflow-hidden h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog Image">
                      <div class="card-body position-relative p-4" style="z-index: 2; background: rgba(0, 0, 0, 0.5);">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge bg-secondary text-muted text-uppercase">Development</span>
                              <span class="small">12 Jan 2025</span>
                          </div>
                          <h5 class="h4 mb-2">5 Tools Every Remote Developer Should Be Using</h5>
                          <p class="mb-2">Boost productivity with these essential tools for remote coding.</p>
                          <a href="#" class="link-light">Read more <i class="ri-arrow-right-line"></i></a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card text-light shadow border-0 position-relative overflow-hidden h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog Image">
                      <div class="card-body position-relative p-4" style="z-index: 2; background: rgba(0, 0, 0, 0.5);">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge bg-secondary text-muted text-uppercase">Marketing</span>
                              <span class="small">6 Jan 2025</span>
                          </div>
                          <h5 class="h4 mb-2">Why Brand Storytelling Still Matters in 2025</h5>
                          <p class="mb-2">Discover how storytelling builds trust and drives customer loyalty.</p>
                          <a href="#" class="link-light">Read more <i class="ri-arrow-right-line"></i></a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card text-light shadow border-0 position-relative overflow-hidden h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog Image">
                      <div class="card-body position-relative p-4" style="z-index: 2; background: rgba(0, 0, 0, 0.5);">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge bg-secondary text-muted text-uppercase">Startups</span>
                              <span class="small">10 Mar 2025</span>
                          </div>
                          <h5 class="h4 mb-2">From Idea to Launch: Building MVPs That Matter</h5>
                          <p class="mb-2">A quick guide to launching focused, validated minimum viable products.</p>
                          <a href="#" class="link-light">Read more <i class="ri-arrow-right-line"></i></a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card text-light shadow border-0 position-relative overflow-hidden h-100 p-0">
                      <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="w-100 h-100 object-fit-cover position-absolute top-0 start-0" alt="Blog Image">
                      <div class="card-body position-relative p-4" style="z-index: 2; background: rgba(0, 0, 0, 0.5);">
                          <div class="d-flex align-items-center justify-content-between mb-3">
                              <span class="badge bg-secondary text-muted text-uppercase">UI/UX</span>
                              <span class="small">30 Mar 2025</span>
                          </div>
                          <h5 class="h4 mb-2">Dark Mode Design: Aesthetic or Accessibility Choice?</h5>
                          <p class="mb-2">Unpacking the benefits and tradeoffs of dark mode interfaces.</p>
                          <a href="#" class="link-light">Read more <i class="ri-arrow-right-line"></i></a>
                      </div>
                  </div>
              </div>
          </div>
          <div class="swiper-pagination"></div>
      </div>
      <div class="text-center mt-2">
          <button class="btn btn-outline-secondary">Check all blogs<i class="ri-arrow-right-line ms-2"></i></button>
      </div>
  </div>
</section>
  .swiper-pagination-bullet {
    background: var(--bs-primary);
  }
  .swiper-pagination-bullet-active {
    background: var(--bs-primary);
  }

document.addEventListener('DOMContentLoaded', () => {
  var swiper = new Swiper(".swiper3", {
      slidesPerView: 1,
      spaceBetween: 20,
      pagination: {
          el: ".swiper-pagination",
          clickable: true,
      },
      autoplay: {
          delay: 3000,
          disableOnInteraction: false,
      },
      breakpoints: {
          768: {
              slidesPerView: 2,
              spaceBetween: 24,
          },
          992: {
              slidesPerView: 3,
              spaceBetween: 30,
          }
      }
  });
});

Example 4

Blogs

Stay informed with our latest blog posts

Blog Image
Development 12 Jan 2025
5 Tools Every Remote Developer Should Be Using

Boost productivity with these essential tools for remote coding.

Read more
Editor's Picks
Design 20 Feb 2025
Designing for Simplicity in a Complex World

Learn how minimal design improves usability and user experience.

Read more
Marketing 6 Jan 2025
Why Brand Storytelling Still Matters in 2025

Discover how storytelling builds trust and drives customer loyalty.

Read more
Startups 10 Mar 2025
From Idea to Launch: Building MVPs That Matter

A quick guide to launching focused, validated minimum viable products.

Read more 
<section class="bg-body py-5">
  <div class="container">
      <div class="text-center text-lg-start">
          <h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Blogs</h1>
          <h2 class="mb-4">Stay informed with our latest blog posts</h2>
      </div>
      <div class="row">
          <div class="col-lg-7 mb-4 mb-lg-0">
              <div class="card bg-secondary shadow border-0 p-0">
                  <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="card-img-top object-fit-cover" style="max-height: 480px;" alt="Blog Image">
                  <div class="card-body p-3">
                      <div class="d-flex align-items-center justify-content-between mb-2">
                          <span class="badge text-muted text-uppercase border shadow">Development</span>
                          <span class="text-muted">12 Jan 2025</span>
                      </div>
                      <h5 class="h4 mb-2"><a href="#" class="text-decoration-none">5 Tools Every Remote Developer Should Be Using</a></h5>
                      <p class="text-muted mb-2">Boost productivity with these essential tools for remote coding.</p>
                      <a href="#" class="text-decoration-none link-primary">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                  </div>
              </div>
          </div>
          <div class="col-lg-5">
              <h5 class="mb-2"><i class="ri-star-fill text-primary fs-5 me-2"></i>Editor's Picks</h5>
              <div class="card bg-secondary shadow border-0 p-0 mb-3">
                  <div class="card-body p-3">
                      <div class="d-flex align-items-center justify-content-between mb-2">
                          <span class="badge text-muted text-uppercase border shadow">Design</span>
                          <span class="text-muted">20 Feb 2025</span>
                      </div>
                      <h5 class="card-title mb-2"><a href="#" class="text-decoration-none">Designing for Simplicity in a Complex World</a></h5>
                      <p class="text-muted mb-2">Learn how minimal design improves usability and user experience.</p>
                      <a href="#" class="text-decoration-none link-primary">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                  </div>
              </div>
              <div class="card bg-secondary shadow border-0 p-0 mb-3">
                  <div class="card-body p-3">
                      <div class="d-flex align-items-center justify-content-between mb-2">
                          <span class="badge text-muted text-uppercase border shadow">Marketing</span>
                          <span class="text-muted">6 Jan 2025</span>
                      </div>
                      <h5 class="card-title mb-2"><a href="#" class="text-decoration-none">Why Brand Storytelling Still Matters in 2025</a></h5>
                      <p class="text-muted mb-2">Discover how storytelling builds trust and drives customer loyalty.</p>
                      <a href="#" class="text-decoration-none link-primary">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                  </div>
              </div>
              <div class="card bg-secondary shadow border-0 p-0 mb-3">
                  <div class="card-body p-3">
                      <div class="d-flex align-items-center justify-content-between mb-2">
                          <span class="badge text-muted text-uppercase border shadow">Startups</span>
                          <span class="text-muted">10 Mar 2025</span>
                      </div>
                      <h5 class="card-title mb-2">From Idea to Launch: Building MVPs That Matter</h5>
                      <p class="text-muted mb-2">A quick guide to launching focused, validated minimum viable products.</p>
                      <a href="#" class="text-decoration-none link-primary">Read more<i class="ri-arrow-right-line ms-2"></i></a>
                  </div>
              </div>
              <div class="text-center text-md-end">
                  <button class="btn btn-outline-secondary">Check all blogs<i class="ri-arrow-right-line ms-2"></i></button>
              </div>
          </div>
      </div>
  </div>
</section>

Example 5

Blog list

Explore our latest insights and stories

Discover practical tips, industry news, and inspiring stories from our team and community.

Blog Feature Image
How to stay productive while working remotely

Remote work can be challenging, but with the right habits and tools, you can maintain focus and achieve your goals from anywhere.

Blog Feature Image
Design trends to watch the next year

Stay ahead of the curve with our roundup of the latest design trends shaping digital experiences this year.

Blog Feature Image
Building customer trust through transparency

Learn how open communication and honest practices can help your brand foster long-lasting customer relationships. 

<section class="py-5">
  <div class="container">
      <div class="text-center">
          <span class="fs-6 fw-medium text-uppercase">Blog list</span>
          <h1 class="fw-semibold my-2">Explore our latest insights and stories</h1>
          <p class="fs-4 text-muted mb-5">Discover practical tips, industry news, and inspiring stories from our team and community.</p>
      </div>
      <div class="row g-4">
          <div class="col-lg-4">
              <div class="card border p-0 h-100">
                  <img src="/assets/images/theme-images/1.jpg" class="card-img-top object-fit-cover" style="max-height: 240px;" alt="Blog Feature Image" />
                  <div class="card-body d-flex flex-column align-items-start p-4">
                      <h5 class="fs-4"><a href="#" class="text-decoration-none text-body">How to stay productive while working remotely</a></h5>
                      <p class="fs-5 text-muted">Remote work can be challenging, but with the right habits and tools, you can maintain focus and achieve your goals from anywhere.</p>
                      <button class="btn btn-primary mt-auto">Read More <i class="ri-arrow-right-line ms-1"></i></button>
                  </div>
              </div>
          </div>
          <div class="col-lg-4">
              <div class="card border p-0 h-100">
                  <img src="/assets/images/theme-images/2.jpg" class="card-img-top object-fit-cover" style="max-height: 240px;" alt="Blog Feature Image" />
                  <div class="card-body d-flex flex-column align-items-start p-4">
                      <h5 class="fs-4"><a href="#" class="text-decoration-none text-body">Design trends to watch the next year</a></h5>
                      <p class="fs-5 text-muted">Stay ahead of the curve with our roundup of the latest design trends shaping digital experiences this year.</p>
                      <button class="btn btn-primary mt-auto">Read More <i class="ri-arrow-right-line ms-1"></i></button>
                  </div>
              </div>
          </div>
          <div class="col-lg-4">
              <div class="card border p-0 h-100">
                  <img src="/assets/images/theme-images/3.jpg" class="card-img-top object-fit-cover" style="max-height: 240px;" alt="Blog Feature Image" />
                  <div class="card-body d-flex flex-column align-items-start p-4">
                      <h5 class="fs-4"><a href="#" class="text-decoration-none text-body">Building customer trust through transparency</a></h5>
                      <p class="fs-5 text-muted">Learn how open communication and honest practices can help your brand foster long-lasting customer relationships.</p>
                      <button class="btn btn-primary mt-auto">Read More <i class="ri-arrow-right-line ms-1"></i></button>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>

Example 6

Our Blog

Get expert advice, actionable tips, and the latest updates from our team of professionals.

Blog Feature Image
Nguyen Minh 19 Nov, 2020
Mastering time management for busy professionals

Discover proven strategies to organize your schedule, prioritize tasks, and boost your productivity every day—helping you stay focused, reduce stress, and achieve your goals more efficiently...

Avatar
Nguyen Minh

Customer Success Manager

Blog Feature Image
Blog Feature Image
Blog Feature Image
See All Blogs 
<section class="bg-secondary py-5">
  <div class="container">
      <div class="text-center col-lg-6 offset-lg-3">
          <h1 class="fw-semibold">Our Blog</h1>
          <p class="fs-4 text-muted mb-5">Get expert advice, actionable tips, and the latest updates from our team of professionals.</p>
      </div>
      <div class="row g-4">
          <div class="col-lg-6">
              <div class="card border">
                  <div class="card-body">
                      <img src="/assets/images/theme-images/4.jpg" class="object-fit-cover rounded w-100 mb-3" style="max-height: 240px;" alt="Blog Feature Image" />
                      <div class="fs-5 d-flex gap-2 mb-2">
                          <a href="#" class="fw-medium text-decoration-none">Nguyen Minh</a>
                          <span class="text-muted">19 Nov, 2020</span>
                      </div>
                      <h5 class="fs-2 fw-medium mb-3"><a href="#" class="text-decoration-none">Mastering time management for busy professionals</a></h5>
                      <p class="fs-5 text-muted mb-4">Discover proven strategies to organize your schedule, prioritize tasks, and boost your productivity every day—helping you stay focused, reduce stress, and achieve your goals more efficiently...</p>
                      <div class="d-flex flex-row align-items-center gap-2">
                          <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="38" height="38" />
                          <div>
                              <h5 class="fw-medium mb-1"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                              <p class="text-muted fs-6 mb-0">Customer Success Manager</p>
                          </div>
                      </div>
                  </div>
              </div>
          </div>

          <div class="col-lg-6">
              <div class="d-flex flex-column flex-sm-row gap-3 border-bottom py-3">
                  <div>
                      <div class="fs-5 d-flex gap-2 mb-2">
                          <a href="#" class="fw-medium text-decoration-none">Nguyen Minh</a>
                          <span class="text-muted">5 Sep, 2020</span>
                      </div>
                      <h5 class="fs-4 fw-medium"><a href="#" class="text-decoration-none">The benefits of daily journaling for mental clarity</a></h5>
                      <a href="#" class="badge text-body bg-secondary rounded-pill border text-decoration-none">Wellness</a>
                      <a href="#" class="badge text-body bg-secondary rounded-pill border text-decoration-none">Productivity</a>
                  </div>
                  <img src="/assets/images/theme-images/1.jpg" class="img-fluid object-fit-cover rounded ms-sm-auto" style="max-height: 140px;" alt="Blog Feature Image" />
              </div>
              <div class="d-flex flex-column flex-sm-row gap-3 border-bottom py-3">
                  <div>
                      <div class="fs-5 d-flex gap-2 mb-2">
                          <a href="#" class="fw-medium text-decoration-none">Nguyen Minh</a>
                          <span class="text-muted">16 Nov, 2020</span>
                      </div>
                      <h5 class="fs-4 fw-medium"><a href="#" class="text-decoration-none">How to create engaging presentations</a></h5>
                      <a href="#" class="badge text-body bg-secondary rounded-pill border text-decoration-none">Communication</a>
                      <a href="#" class="badge text-body bg-secondary rounded-pill border text-decoration-none">Design</a>
                  </div>
                  <img src="/assets/images/theme-images/2.jpg" class="img-fluid object-fit-cover rounded ms-sm-auto" style="max-height: 140px;" alt="Blog Feature Image" />
              </div>
              <div class="d-flex flex-column flex-sm-row gap-3 border-bottom py-3">
                  <div>
                      <div class="fs-5 d-flex gap-2 mb-2">
                          <a href="#" class="fw-medium text-decoration-none">Nguyen Minh</a>
                          <span class="text-muted">4 Aug, 2021</span>
                      </div>
                      <h5 class="fs-4 fw-medium"><a href="#" class="text-decoration-none">Tips for effective remote collaboration</a></h5>
                      <a href="#" class="badge text-body bg-secondary rounded-pill border text-decoration-none">Remote Work</a>
                      <a href="#" class="badge text-body bg-secondary rounded-pill border text-decoration-none">Teamwork</a>
                  </div>
                  <img src="/assets/images/theme-images/3.jpg" class="img-fluid object-fit-cover rounded ms-sm-auto" style="max-height: 140px;" alt="Blog Feature Image" />
              </div>
          </div>
      </div>
      <div class="text-center mt-5">
          <a href="#" class="btn btn-primary">See All Blogs</a>
      </div>
  </div>

</section>

Example 7

Discover stories that matter

Explore in-depth articles, expert tips, and trending topics from around the world.

Blog Feature Image
Mastering time management for busy professionals

19 Nov, 2020

Avatar
Nguyen Minh

Customer Success Manager

Read More
Blog Feature Image
The benefits of daily journaling for mental clarity

20 July, 2020

Avatar
Nguyen Minh

Customer Success Manager

Read More
Blog Feature Image
How to create engaging presentations

16 Nov, 2020

Avatar
Nguyen Minh

Customer Success Manager

Read More
Blog Feature Image
Tips for effective remote collaboration

4 Aug, 2021

Avatar
Nguyen Minh

Customer Success Manager

Read More 
<section class="py-5">
  <div class="container">
      <div class="text-center col-lg-6 offset-lg-3">
          <h1 class="fw-semibold">Discover stories that matter</h1>
          <p class="fs-4 text-muted mb-5">Explore in-depth articles, expert tips, and trending topics from around the world.</p>
      </div>

      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 border-bottom py-3">
          <div class="d-flex flex-wrap flex-row align-items-center gap-4">
              <img src="/assets/images/theme-images/4.jpg" class="img-fluid object-fit-cover rounded" style="aspect-ratio: 4 / 3; max-height: 180px;" alt="Blog Feature Image" />
              <div>
                  <h5 class="fs-4 fw-medium"><a href="#" class="text-decoration-none">Mastering time management for busy professionals</a></h5>
                  <p class="text-muted">19 Nov, 2020</p>
                  <div class="d-flex flex-wrap flex-row align-items-center gap-2">
                      <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="38" height="38" />
                      <div>
                          <h5 class="fw-medium mb-1"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                          <p class="text-muted fs-6 mb-0">Customer Success Manager</p>
                      </div>
                  </div>
              </div>
          </div>
          <a href="#" class="btn btn-secondary text-nowrap">Read More <i class="ri-arrow-right-line ms-1"></i></a>
      </div>

      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 border-bottom py-3">
          <div class="d-flex flex-wrap flex-row align-items-center gap-4">
              <img src="/assets/images/theme-images/1.jpg" class="img-fluid object-fit-cover rounded" style="aspect-ratio: 4 / 3; max-height: 180px;" alt="Blog Feature Image" />
              <div>
                  <h5 class="fs-4 fw-medium"><a href="#" class="text-decoration-none">The benefits of daily journaling for mental clarity</a></h5>
                  <p class="text-muted">20 July, 2020</p>
                  <div class="d-flex flex-wrap flex-row align-items-center gap-2">
                      <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="38" height="38" />
                      <div>
                          <h5 class="fw-medium mb-1"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                          <p class="text-muted fs-6 mb-0">Customer Success Manager</p>
                      </div>
                  </div>
              </div>
          </div>
          <a href="#" class="btn btn-secondary text-nowrap">Read More <i class="ri-arrow-right-line ms-1"></i></a>
      </div>

      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 border-bottom py-3">
          <div class="d-flex flex-wrap flex-row align-items-center gap-4">
              <img src="/assets/images/theme-images/2.jpg" class="img-fluid object-fit-cover rounded" style="aspect-ratio: 4 / 3; max-height: 180px;" alt="Blog Feature Image" />
              <div>
                  <h5 class="fs-4 fw-medium"><a href="#" class="text-decoration-none">How to create engaging presentations</a></h5>
                  <p class="text-muted">16 Nov, 2020</p>
                  <div class="d-flex flex-wrap flex-row align-items-center gap-2">
                      <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="38" height="38" />
                      <div>
                          <h5 class="fw-medium mb-1"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                          <p class="text-muted fs-6 mb-0">Customer Success Manager</p>
                      </div>
                  </div>
              </div>
          </div>
          <a href="#" class="btn btn-secondary text-nowrap">Read More <i class="ri-arrow-right-line ms-1"></i></a>
      </div>

      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 border-bottom py-3">
          <div class="d-flex flex-wrap flex-row align-items-center gap-4">
              <img src="/assets/images/theme-images/3.jpg" class="img-fluid object-fit-cover rounded" style="aspect-ratio: 4 / 3; max-height: 180px;" alt="Blog Feature Image" />
              <div>
                  <h5 class="fs-4 fw-medium"><a href="#" class="text-decoration-none">Tips for effective remote collaboration</a></h5>
                  <p class="text-muted">4 Aug, 2021</p>
                  <div class="d-flex flex-wrap flex-row align-items-center gap-2">
                      <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="38" height="38" />
                      <div>
                          <h5 class="fw-medium mb-1"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                          <p class="text-muted fs-6 mb-0">Customer Success Manager</p>
                      </div>
                  </div>
              </div>
          </div>
          <a href="#" class="btn btn-secondary text-nowrap">Read More <i class="ri-arrow-right-line ms-1"></i></a>
      </div>
  </div>

</section>

Example 8

<section class="py-5">
  <div class="container">
      <div class="text-center">
          <span class="badge fs-6 text-body fw-medium border rounded-pill">Blog List</span>
          <h1 class="fw-semibold mt-2">Discover stories that matter</h1>
          <p class="fs-4 text-muted mb-5">Explore in-depth articles, expert tips, and trending topics from around the world.</p>
      </div>

      <div class="row g-4 mb-5">
          <div class="col-lg-6">
              <div class="card border position-relative h-100" style="background-image: url('/assets/images/theme-images/4.jpg'); background-size: cover; background-position: center;">

                  <!-- Overlay -->
                  <div class="position-absolute rounded-4 top-0 start-0 w-100 h-100 bg-dark opacity-25"></div>

                  <!-- Content -->
                  <div class="position-relative card-body d-flex flex-column align-items-start" style="padding-top: 64px;">
                      <span class="badge text-bg-secondary mt-auto" style="font-size: 12px;">Productivity</span>
                      <h5 class="fs-2 mt-2"><a href="#" class="link-light text-decoration-none">Mastering time management for busy professionals</a></h5>
                      <div class="d-flex align-items-center gap-2">
                          <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="38" height="38" />
                          <h5 class="fw-medium mb-0"><a href="#" class="link-light text-decoration-none">Nguyen Minh</a></h5>
                      </div>
                  </div>
              </div>
          </div>

          <div class="col-lg-6">
              <div class="card border position-relative mb-4" style="background-image: url('/assets/images/theme-images/2.jpg'); background-size: cover; background-position: center;">

                  <!-- Overlay -->
                  <div class="position-absolute rounded-4 top-0 start-0 w-100 h-100 bg-dark opacity-25"></div>

                  <!-- Content -->
                  <div class="position-relative card-body d-flex flex-column align-items-start" style="padding-top: 64px;">
                      <span class="badge text-bg-secondary" style="font-size: 12px;">Productivity</span>
                      <h5 class="fs-2 mt-2"><a href="#" class="link-light text-decoration-none">The benefits of daily journaling for mental clarity</a></h5>
                      <div class="d-flex align-items-center gap-2">
                          <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="38" height="38" />
                          <h5 class="fw-medium mb-0"><a href="#" class="link-light text-decoration-none">Nguyen Minh</a></h5>
                      </div>
                  </div>
              </div>

              <div class="card border position-relative" style="background-image: url('/assets/images/theme-images/3.jpg'); background-size: cover; background-position: center;">

                  <!-- Overlay -->
                  <div class="position-absolute rounded-4 top-0 start-0 w-100 h-100 bg-dark opacity-25"></div>

                  <!-- Content -->
                  <div class="position-relative card-body d-flex flex-column align-items-start" style="padding-top: 64px;">
                      <span class="badge text-bg-secondary" style="font-size: 12px;">Productivity</span>
                      <h5 class="fs-2 mt-2"><a href="#" class="link-light text-decoration-none">How to create engaging presentations</a></h5>
                      <div class="d-flex align-items-center gap-2">
                          <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="38" height="38" />
                          <h5 class="fw-medium mb-0"><a href="#" class="link-light text-decoration-none">Nguyen Minh</a></h5>
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <h2>Editor's Picks</h2>
      <p class="fs-5 text-muted">Featured Articles</p>

      <div class="row g-4">
          <div class="col-md-6 col-xl-3">
              <div class="card border p-0 h-100">
                  <img src="/assets/images/theme-images/1.jpg" class="card-img-top object-fit-cover" style="height: 160px;" alt="Blog Feature Image" />
                  <div class="card-body p-3">
                      <div class="d-flex flex-row align-items-center gap-3">
                          <span class="fs-2">1</span>
                          <div>
                              <p class="mb-1"><a href="#" class="text-muted text-decoration-none">Nguyen Minh</a></p>
                              <h5 class="fw-medium lh-lg mb-0"><a href="#" class="text-decoration-none">Mastering time management for busy professionals</a></h5>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-md-6 col-xl-3">
              <div class="card border p-0 h-100">
                  <img src="/assets/images/theme-images/2.jpg" class="card-img-top object-fit-cover" style="height: 160px;" alt="Blog Feature Image" />
                  <div class="card-body p-3">
                      <div class="d-flex flex-row align-items-center gap-3">
                          <span class="fs-2">2</span>
                          <div>
                              <p class="mb-1"><a href="#" class="text-muted text-decoration-none">Nguyen Minh</a></p>
                              <h5 class="fw-medium lh-lg mb-0"><a href="#" class="text-decoration-none">The benefits of daily journaling for mental clarity</a></h5>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-md-6 col-xl-3">
              <div class="card border p-0 h-100">
                  <img src="/assets/images/theme-images/3.jpg" class="card-img-top object-fit-cover" style="height: 160px;" alt="Blog Feature Image" />
                  <div class="card-body p-3">
                      <div class="d-flex flex-row align-items-center gap-3">
                          <span class="fs-2">3</span>
                          <div>
                              <p class="mb-1"><a href="#" class="text-muted text-decoration-none">Nguyen Minh</a></p>
                              <h5 class="fw-medium lh-lg mb-0"><a href="#" class="text-decoration-none">How to create engaging presentations</a></h5>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-md-6 col-xl-3">
              <div class="card border p-0 h-100">
                  <img src="/assets/images/theme-images/4.jpg" class="card-img-top object-fit-cover" style="height: 160px;" alt="Blog Feature Image" />
                  <div class="card-body p-3">
                      <div class="d-flex flex-row align-items-center gap-3">
                          <span class="fs-2">4</span>
                          <div>
                              <p class="mb-1"><a href="#" class="text-muted text-decoration-none">Nguyen Minh</a></p>
                              <h5 class="fw-medium lh-lg mb-0"><a href="#" class="text-decoration-none">Tips for effective remote collaboration</a></h5>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

</section>

Example 9

Latest from our blogs

Explore in-depth articles, expert tips, and trending topics from around the world.

Blog Feature Image

19 Nov, 2020

Mastering time management for busy professionals
Avatar
Nguyen Minh

Customer Success Manager

Blog Feature Image

20 July, 2020

The benefits of daily journaling for mental clarity
Avatar
Nguyen Minh

Customer Success Manager

Blog Feature Image

16 Nov, 2020

How to create engaging presentations
Avatar
Nguyen Minh

Customer Success Manager

Blog Feature Image

4 Aug, 2021

Tips for effective remote collaboration
Avatar
Nguyen Minh

Customer Success Manager

<section class="py-5">
  <div class="container">
      <div class="text-center">
          <h1 class="fw-semibold">Latest from our blogs</h1>
          <p class="fs-4 text-muted mb-5">Explore in-depth articles, expert tips, and trending topics from around the world.</p>
      </div>

      <div class="row g-4">
          <div class="col-lg-6">
              <div class="card border">
                  <div class="card-body">
                      <div class="row align-items-center g-4">
                          <div class="col-sm-5">
                              <img src="/assets/images/theme-images/1.jpg" class="object-fit-cover rounded w-100" alt="Blog Feature Image" />
                          </div>
                          <div class="col-sm-7">
                              <p class="text-muted mb-2">19 Nov, 2020</p>
                              <h5 class="fs-4 fw-medium mb-3"><a href="#" class="text-decoration-none">Mastering time management for busy professionals</a></h5>
                              <div class="d-flex flex-wrap flex-row align-items-center gap-2">
                                  <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="32" height="32">
                                  <div>
                                      <h5 class="fw-medium mb-1"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                                      <p class="text-muted mb-0">Customer Success Manager</p>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-lg-6">
              <div class="card border">
                  <div class="card-body">
                      <div class="row align-items-center g-4">
                          <div class="col-sm-5">
                              <img src="/assets/images/theme-images/2.jpg" class="object-fit-cover rounded w-100" alt="Blog Feature Image" />
                          </div>
                          <div class="col-sm-7">
                              <p class="text-muted mb-2">20 July, 2020</p>
                              <h5 class="fs-4 fw-medium mb-3"><a href="#" class="text-decoration-none">The benefits of daily journaling for mental clarity</a></h5>
                              <div class="d-flex flex-wrap flex-row align-items-center gap-2">
                                  <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="32" height="32">
                                  <div>
                                      <h5 class="fw-medium mb-1"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                                      <p class="text-muted mb-0">Customer Success Manager</p>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-lg-6">
              <div class="card border">
                  <div class="card-body">
                      <div class="row align-items-center g-4">
                          <div class="col-sm-5">
                              <img src="/assets/images/theme-images/3.jpg" class="object-fit-cover rounded w-100" alt="Blog Feature Image" />
                          </div>
                          <div class="col-sm-7">
                              <p class="text-muted mb-2">16 Nov, 2020</p>
                              <h5 class="fs-4 fw-medium mb-3"><a href="#" class="text-decoration-none">How to create engaging presentations</a></h5>
                              <div class="d-flex flex-wrap flex-row align-items-center gap-2">
                                  <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="32" height="32">
                                  <div>
                                      <h5 class="fw-medium mb-1"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                                      <p class="text-muted mb-0">Customer Success Manager</p>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-lg-6">
              <div class="card border">
                  <div class="card-body">
                      <div class="row align-items-center g-4">
                          <div class="col-sm-5">
                              <img src="/assets/images/theme-images/4.jpg" class="object-fit-cover rounded w-100" alt="Blog Feature Image" />
                          </div>
                          <div class="col-sm-7">
                              <p class="text-muted mb-2">4 Aug, 2021</p>
                              <h5 class="fs-4 fw-medium mb-3"><a href="#" class="text-decoration-none">Tips for effective remote collaboration</a></h5>
                              <div class="d-flex flex-wrap flex-row align-items-center gap-2">
                                  <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="32" height="32">
                                  <div>
                                      <h5 class="fw-medium mb-1"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                                      <p class="text-muted mb-0">Customer Success Manager</p>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

</section>

Example 10

Blogs

Explore the latest posts and expert insights from our blog

Explore in-depth articles, expert tips, and trending topics from around the world.

See All Blogs

Stay Updated with our latest insights

Subscribe to our newsletter and receive the latest articles, tips, and updates straight to your inbox.

Blog Feature Image
Productivity Work
Mastering time management for busy professionals

19 Nov, 2020

Blog Feature Image
Productivity Work
The benefits of daily journaling for mental clarity

20 July, 2020

Blog Feature Image
Productivity Work
How to create engaging presentations

16 Nov, 2020

<section class="py-5">
  <div class="container">
      <div class="row g-4 mb-5">
          <div class="col-lg-6">
              <p class="fs-6 fw-medium text-uppercase mb-2">Blogs</p>
              <h1 class="fw-semibold">Explore the latest posts and expert insights from our blog</h1>
              <p class="fs-4 text-muted">Explore in-depth articles, expert tips, and trending topics from around the world.</p>
              <a href="#" class="btn btn-primary">See All Blogs <i class="ri-arrow-right-line ms-1"></i></a>
          </div>
          <div class="col-lg-6">
              <div class="card border">
                  <div class="card-body">
                      <div class="d-flex flex-column flex-sm-row align-items-start gap-3">
                          <div class="bg-primary-subtle rounded p-3">
                              <i class="ri-mail-add-line text-primary lh-1 fs-2"></i>
                          </div>
                          <div>
                              <h4>Stay Updated with our latest insights</h4>
                              <p class="fs-5 text-muted">Subscribe to our newsletter and receive the latest articles, tips, and updates straight to your inbox.</p>
                          </div>
                      </div>
                      <form class="d-flex flex-column flex-sm-row gap-2">
                          <input
                              type="email"
                              class="form-control form-control-lg"
                              placeholder="Enter your email"
                              required
                          >
                          <button type="submit" class="btn btn-lg btn-primary">Subscribe</button>
                      </form>
                  </div>
              </div>
          </div>
      </div>
      <div class="row g-4">
          <div class="col-lg-4">
              <div class="card border p-0 h-100">
                  <img src="/assets/images/theme-images/1.jpg" class="card-img-top object-fit-cover" style="height: 200px;" alt="Blog Feature Image" />
                  <div class="card-body p-4">
                      <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Productivity</a>
                      <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Work</a>
                      <h5 class="fs-4 fw-medium mt-2"><a href="#" class="text-decoration-none">Mastering time management for busy professionals</a></h5>
                      <p class="text-muted mb-0"><i class="ri-time-line me-1"></i> 19 Nov, 2020</p>
                  </div>
              </div>
          </div>
          <div class="col-lg-4">
              <div class="card border p-0 h-100">
                  <img src="/assets/images/theme-images/2.jpg" class="card-img-top object-fit-cover" style="height: 200px;" alt="Blog Feature Image" />
                  <div class="card-body p-4">
                      <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Productivity</a>
                      <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Work</a>
                      <h5 class="fs-4 fw-medium mt-2"><a href="#" class="text-decoration-none">The benefits of daily journaling for mental clarity</a></h5>
                      <p class="text-muted mb-0"><i class="ri-time-line me-1"></i> 20 July, 2020</p>
                  </div>
              </div>
          </div>
          <div class="col-lg-4">
              <div class="card border p-0 h-100">
                  <img src="/assets/images/theme-images/3.jpg" class="card-img-top object-fit-cover" style="height: 200px;" alt="Blog Feature Image" />
                  <div class="card-body p-4">
                      <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Productivity</a>
                      <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Work</a>
                      <h5 class="fs-4 fw-medium mt-2"><a href="#" class="text-decoration-none">How to create engaging presentations</a></h5>
                      <p class="text-muted mb-0"><i class="ri-time-line me-1"></i> 16 Nov, 2020</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>

Example 11

Explore our latest posts

Read in-depth articles and trending topics from around the world.

Blog Feature Image

Mastering time management for busy professionals

Discover proven strategies to organize your schedule, prioritize tasks, and boost your productivity every day...

Avatar
Nguyen Minh

Customer Success Manager

Blog Feature Image

The benefits of daily journaling for mental clarity

Explore how daily journaling can help clear mental clutter, and improve focus through reflective writing habits...

Avatar
Nguyen Minh

Customer Success Manager

Most Popular

Blog Feature Image
Blog Feature Image
Blog Feature Image 
<section class="py-5">
  <div class="container">
      <h1 class="fw-semibold">Explore our latest posts</h1>
      <p class="fs-4 text-muted mb-4">Read in-depth articles and trending topics from around the world.</p>
      <div class="row g-4">
          <div class="col-lg-4">
              <div class="card border">
                  <div class="card-body">
                      <img src="/assets/images/theme-images/1.jpg" class="img-fluid object-fit-cover rounded mb-4" style="aspect-ratio: 4 / 3;" alt="Blog Feature Image" />
                      <h4 class="fw-medium"><a href="#" class="text-decoration-none">Mastering time management for busy professionals</a></h4>
                      <p class="text-muted fs-5">Discover proven strategies to organize your schedule, prioritize tasks, and boost your productivity every day...</p>
                      <div class="d-flex flex-row align-items-center gap-3">
                          <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="38" height="38" />
                          <div>
                              <h5 class="fw-medium mb-1"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                              <p class="text-muted fs-6 mb-0">Customer Success Manager</p>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-lg-4">
              <div class="card border">
                  <div class="card-body">
                      <img src="/assets/images/theme-images/2.jpg" class="img-fluid object-fit-cover rounded mb-4" style="aspect-ratio: 4 / 3;" alt="Blog Feature Image" />
                      <h4 class="fw-medium"><a href="#" class="text-decoration-none">The benefits of daily journaling for mental clarity</a></h4>
                      <p class="text-muted fs-5">Explore how daily journaling can help clear mental clutter, and improve focus through reflective writing habits...</p>
                      <div class="d-flex flex-row align-items-center gap-3">
                          <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="38" height="38" />
                          <div>
                              <h5 class="fw-medium mb-1"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                              <p class="text-muted fs-6 mb-0">Customer Success Manager</p>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-lg-4">
              <h2 class="fs-3 mt-3 mt-lg-0 mb-3">Most Popular</h2>
              <div class="card border mb-4">
                  <div class="card-body d-flex flex-row align-items-center gap-3">
                      <div>
                          <h5 class="fw-medium"><a href="#" class="text-decoration-none">The benefits of daily journaling for mental clarity</a></h5>
                          <a href="#" class="text-muted text-decoration-none fs-5">Nguyen Minh</a>
                      </div>
                      <img src="/assets/images/theme-images/1.jpg" class="img-fluid rounded ms-auto" style="max-height: 92px;" alt="Blog Feature Image" />
                  </div>
              </div>
              <div class="card border mb-4">
                  <div class="card-body d-flex flex-row align-items-center gap-3">
                      <div>
                          <h5 class="fw-medium"><a href="#" class="text-decoration-none">Mastering time management for busy professionals</a></h5>
                          <a href="#" class="text-muted text-decoration-none fs-5">Nguyen Minh</a>
                      </div>
                      <img src="/assets/images/theme-images/2.jpg" class="img-fluid rounded ms-auto" style="max-height: 92px;" alt="Blog Feature Image" />
                  </div>
              </div>
              <div class="card border">
                  <div class="card-body d-flex flex-row align-items-center gap-3">
                      <div>
                          <h5 class="fw-medium"><a href="#" class="text-decoration-none">The benefits of daily journaling for mental clarity</a></h5>
                          <a href="#" class="text-muted text-decoration-none fs-5">Nguyen Minh</a>
                      </div>
                      <img src="/assets/images/theme-images/3.jpg" class="img-fluid rounded ms-auto" style="max-height: 92px;" alt="Blog Feature Image" />
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>

Example 12

Our latest posts

Read in-depth articles and trending topics from around the world.

See All Blogs
Productivity

Tips and strategies to manage time...

Wellness

Insights on mindfulness, and more...

Lifestyle

Ideas and tips for a fulfilling life...

Creativity

Techniques to think more creatively....

Motivation

Mindset shifts to always stay inspired...

<section class="py-5">
  <div class="container">
      <div class="row g-4">
          <div class="col-md-6 col-xl-4">
              <h1 class="fw-semibold">Our latest posts</h1>
              <p class="fs-4 text-muted">Read in-depth articles and trending topics from around the world.</p>
              <a href="#" class="btn btn-lg btn-primary">See All Blogs <i class="ri-arrow-right-line ms-1"></i></a>
          </div>
          <div class="col-md-6 col-xl-4">
              <div class="card border position-relative h-100" style="background-image: url('/assets/images/theme-images/1.jpg'); background-size: cover; background-position: center;">

                  <!-- Overlay -->
                  <div class="position-absolute rounded-4 top-0 start-0 w-100 h-100 bg-dark opacity-25"></div>

                  <!-- Content -->
                  <div class="position-relative card-body" style="padding-top: 128px;">
                      <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-end gap-3 mt-auto">
                          <div>
                              <h5 class="fs-4"><a href="#" class="link-light text-decoration-none">Productivity</a></h5>
                              <p class="text-light fs-5 mb-0">Tips and strategies to manage time...</p>
                          </div>
                          <a href="#" class="btn btn-light"><i class="ri-external-link-line fs-4"></i></a>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-md-6 col-xl-4">
              <div class="card border position-relative h-100" style="background-image: url('/assets/images/theme-images/2.jpg'); background-size: cover; background-position: center;">

                  <!-- Overlay -->
                  <div class="position-absolute rounded-4 top-0 start-0 w-100 h-100 bg-dark opacity-25"></div>

                  <!-- Content -->
                  <div class="position-relative card-body" style="padding-top: 128px;">
                      <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-end gap-3 mt-auto">
                          <div>
                              <h5 class="fs-4"><a href="#" class="link-light text-decoration-none">Wellness</a></h5>
                              <p class="text-light fs-5 mb-0">Insights on mindfulness, and more...</p>
                          </div>
                          <a href="#" class="btn btn-light"><i class="ri-external-link-line fs-4"></i></a>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-md-6 col-xl-4">
              <div class="card border position-relative h-100" style="background-image: url('/assets/images/theme-images/3.jpg'); background-size: cover; background-position: center;">

                  <!-- Overlay -->
                  <div class="position-absolute rounded-4 top-0 start-0 w-100 h-100 bg-dark opacity-25"></div>

                  <!-- Content -->
                  <div class="position-relative card-body" style="padding-top: 128px;">
                      <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-end gap-3 mt-auto">
                          <div>
                              <h5 class="fs-4"><a href="#" class="link-light text-decoration-none">Lifestyle</a></h5>
                              <p class="text-light fs-5 mb-0">Ideas and tips for a fulfilling life...</p>
                          </div>
                          <a href="#" class="btn btn-light"><i class="ri-external-link-line fs-4"></i></a>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-md-6 col-xl-4">
              <div class="card border position-relative h-100" style="background-image: url('/assets/images/theme-images/4.jpg'); background-size: cover; background-position: center;">

                  <!-- Overlay -->
                  <div class="position-absolute rounded-4 top-0 start-0 w-100 h-100 bg-dark opacity-25"></div>

                  <!-- Content -->
                  <div class="position-relative card-body" style="padding-top: 128px;">
                      <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-end gap-3 mt-auto">
                          <div>
                              <h5 class="fs-4"><a href="#" class="link-light text-decoration-none">Creativity</a></h5>
                              <p class="text-light fs-5 mb-0">Techniques to think more creatively....</p>
                          </div>
                          <a href="#" class="btn btn-light"><i class="ri-external-link-line fs-4"></i></a>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-md-6 col-xl-4">
              <div class="card border position-relative h-100" style="background-image: url('/assets/images/theme-images/5.jpg'); background-size: cover; background-position: center;">

                  <!-- Overlay -->
                  <div class="position-absolute rounded-4 top-0 start-0 w-100 h-100 bg-dark opacity-25"></div>

                  <!-- Content -->
                  <div class="position-relative card-body" style="padding-top: 128px;">
                      <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-end gap-3 mt-auto">
                          <div>
                              <h5 class="fs-4"><a href="#" class="link-light text-decoration-none">Motivation</a></h5>
                              <p class="text-light fs-5 mb-0">Mindset shifts to always stay inspired...</p>
                          </div>
                          <a href="#" class="btn btn-light"><i class="ri-external-link-line fs-4"></i></a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

</section>

Example 13

Blog List

Discover stories that matter

Read in-depth articles and trending topics from around the world.

See All Blogs
Productivity
Mastering time management for busy professionals
Avatar
Nguyen Minh
Productivity
The benefits of daily journaling for mental clarity
Avatar
Nguyen Minh
Productivity
How to create engaging presentations
Avatar
Nguyen Minh 
<section class="py-5">
  <div class="container">
      <div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-4">
          <div>
              <span class="badge fs-6 text-body fw-medium border rounded-pill">Blog List</span>
              <h1 class="fw-semibold mt-2">Discover stories that matter</h1>
              <p class="fs-4 text-muted mb-0">Read in-depth articles and trending topics from around the world.</p>
          </div>
          <a href="#" class="btn btn-lg btn-primary text-nowrap">See All Blogs <i class="ri-arrow-right-line ms-1"></i></a>
      </div>

      <div class="row g-4">
          <div class="col-lg-4">
              <div class="card border position-relative h-100" style="background-image: url('/assets/images/theme-images/4.jpg'); background-size: cover; background-position: center;">

                  <!-- Overlay -->
                  <div class="position-absolute rounded-4 top-0 start-0 w-100 h-100 bg-dark opacity-25"></div>

                  <!-- Content -->
                  <div class="position-relative card-body d-flex flex-column align-items-start" style="padding-top: 220px;">
                      <span class="badge text-bg-secondary mt-auto" style="font-size: 12px;">Productivity</span>
                      <h5 class="fs-4 my-3"><a href="#" class="link-light text-decoration-none">Mastering time management for busy professionals</a></h5>
                      <div class="d-flex align-items-center gap-2">
                          <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="38" height="38">
                          <h5 class="fw-medium mb-0"><a href="#" class="link-light text-decoration-none">Nguyen Minh</a></h5>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-lg-4">
              <div class="card border position-relative h-100" style="background-image: url('/assets/images/theme-images/2.jpg'); background-size: cover; background-position: center;">

                  <!-- Overlay -->
                  <div class="position-absolute rounded-4 top-0 start-0 w-100 h-100 bg-dark opacity-25"></div>

                  <!-- Content -->
                  <div class="position-relative card-body d-flex flex-column align-items-start" style="padding-top: 220px;">
                      <span class="badge text-bg-secondary mt-auto" style="font-size: 12px;">Productivity</span>
                      <h5 class="fs-4 my-3"><a href="#" class="link-light text-decoration-none">The benefits of daily journaling for mental clarity</a></h5>
                      <div class="d-flex align-items-center gap-2">
                          <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="38" height="38">
                          <h5 class="fw-medium mb-0"><a href="#" class="link-light text-decoration-none">Nguyen Minh</a></h5>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-lg-4">
              <div class="card border position-relative h-100" style="background-image: url('/assets/images/theme-images/6.jpg'); background-size: cover; background-position: center;">

                  <!-- Overlay -->
                  <div class="position-absolute rounded-4 top-0 start-0 w-100 h-100 bg-dark opacity-25"></div>

                  <!-- Content -->
                  <div class="position-relative card-body d-flex flex-column align-items-start" style="padding-top: 220px;">
                      <span class="badge text-bg-secondary mt-auto" style="font-size: 12px;">Productivity</span>
                      <h5 class="fs-4 my-3"><a href="#" class="link-light text-decoration-none">How to create engaging presentations</a></h5>
                      <div class="d-flex align-items-center gap-2">
                          <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="38" height="38">
                          <h5 class="fw-medium mb-0"><a href="#" class="link-light text-decoration-none">Nguyen Minh</a></h5>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

</section>

Example 14

Blog List

Discover stories that matter

Read in-depth articles and trending topics from around the world, offering insights, ideas, and perspectives that inform and inspire.

Avatar
Nguyen Minh

Customer Success Manager

19 Nov, 2020 • 4 min read

Mastering time management for busy professionals

Productivity Work
Avatar
Nguyen Minh

Customer Success Manager

20 July, 2020 • 6 min read

The benefits of daily journaling for mental clarity

Productivity Work
Avatar
Nguyen Minh

Customer Success Manager

16 Nov, 2020 • 5 min read

How to create engaging presentations

Productivity Work
Avatar
Nguyen Minh

Customer Success Manager

4 Aug, 2021 • 7 min read

Tips for effective remote collaboration

Productivity Work
Avatar
Nguyen Minh

Customer Success Manager

18 Oct, 2020 • 4 min read

The power of goal setting for long-term success

Productivity Work
Avatar
Nguyen Minh

Customer Success Manager

20 Aug, 2020 • 6 min read

How to organize your tasks for maximum efficiency

Productivity Work 
<section class="py-5">
  <div class="container">
      <div class="d-flex flex-column flex-md-row align-items-start align-items-md-end justify-content-between gap-3 mb-4">
          <div>
              <span class="badge fs-6 text-body fw-medium border rounded-pill">Blog List</span>
              <h1 class="fw-semibold mt-2">Discover stories that matter</h1>
              <p class="fs-4 text-muted mb-0">Read in-depth articles and trending topics from around the world, offering insights, ideas, and perspectives that inform and inspire.</p>
          </div>
          <div class="d-flex flex-row gap-2">
              <a href="#" class="btn btn-lg btn-outline-secondary" id="swiper4-button-prev"><i class="ri-arrow-left-line"></i></a>
              <a href="#" class="btn btn-lg btn-outline-secondary" id="swiper4-button-next"><i class="ri-arrow-right-line"></i></a>
          </div>
      </div>

      <div class="swiper swiper4">
          <div class="swiper-wrapper">
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary border-0">
                      <div class="card-body">
                          <div class="d-flex flex-row align-items-center gap-3">
                              <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="48" height="48">
                              <div>
                                  <h5 class="fs-5 fw-medium"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                                  <p class="text-muted mb-0">Customer Success Manager</p>
                              </div>
                          </div>

                          <div class="text-muted" style="padding-top: 128px;"><span>19 Nov, 2020</span> • <span>4 min read</span></div>

                          <h4 class="fw-medium fs-3 my-3"><a href="#" class="text-decoration-none">Mastering time management for busy professionals</a></h4>

                          <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Productivity</a>
                          <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Work</a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary border-0">
                      <div class="card-body">
                          <div class="d-flex flex-row align-items-center gap-3">
                              <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="48" height="48">
                              <div>
                                  <h5 class="fs-5 fw-medium"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                                  <p class="text-muted mb-0">Customer Success Manager</p>
                              </div>
                          </div>

                          <div class="text-muted" style="padding-top: 128px;"><span>20 July, 2020</span> • <span>6 min read</span></div>

                          <h4 class="fw-medium fs-3 my-3"><a href="#" class="text-decoration-none">The benefits of daily journaling for mental clarity</a></h4>

                          <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Productivity</a>
                          <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Work</a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary border-0">
                      <div class="card-body">
                          <div class="d-flex flex-row align-items-center gap-3">
                              <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="48" height="48">
                              <div>
                                  <h5 class="fs-5 fw-medium"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                                  <p class="text-muted mb-0">Customer Success Manager</p>
                              </div>
                          </div>

                          <div class="text-muted" style="padding-top: 128px;"><span>16 Nov, 2020</span> • <span>5 min read</span></div>

                          <h4 class="fw-medium fs-3 my-3"><a href="#" class="text-decoration-none">How to create engaging presentations</a></h4>

                          <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Productivity</a>
                          <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Work</a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary border-0">
                      <div class="card-body">
                          <div class="d-flex flex-row align-items-center gap-3">
                              <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="48" height="48">
                              <div>
                                  <h5 class="fs-5 fw-medium"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                                  <p class="text-muted mb-0">Customer Success Manager</p>
                              </div>
                          </div>

                          <div class="text-muted" style="padding-top: 128px;"><span>4 Aug, 2021</span> • <span>7 min read</span></div>

                          <h4 class="fw-medium fs-3 my-3"><a href="#" class="text-decoration-none">Tips for effective remote collaboration</a></h4>

                          <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Productivity</a>
                          <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Work</a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary border-0">
                      <div class="card-body">
                          <div class="d-flex flex-row align-items-center gap-3">
                              <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="48" height="48">
                              <div>
                                  <h5 class="fs-5 fw-medium"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                                  <p class="text-muted mb-0">Customer Success Manager</p>
                              </div>
                          </div>

                          <div class="text-muted" style="padding-top: 128px;"><span>18 Oct, 2020</span> • <span>4 min read</span></div>

                          <h4 class="fw-medium fs-3 my-3"><a href="#" class="text-decoration-none">The power of goal setting for long-term success</a></h4>

                          <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Productivity</a>
                          <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Work</a>
                      </div>
                  </div>
              </div>
              <div class="swiper-slide" style="height: auto;">
                  <div class="card bg-secondary border-0">
                      <div class="card-body">
                          <div class="d-flex flex-row align-items-center gap-3">
                              <img src="/assets/images/avatars/avatar8.jpg" alt="Avatar" class="rounded-circle" width="48" height="48">
                              <div>
                                  <h5 class="fs-5 fw-medium"><a href="#" class="text-decoration-none">Nguyen Minh</a></h5>
                                  <p class="text-muted mb-0">Customer Success Manager</p>
                              </div>
                          </div>

                          <div class="text-muted" style="padding-top: 128px;"><span>20 Aug, 2020</span> • <span>6 min read</span></div>

                          <h4 class="fw-medium fs-3 my-3"><a href="#" class="text-decoration-none">How to organize your tasks for maximum efficiency</a></h4>

                          <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Productivity</a>
                          <a href="#" class="badge bg-primary-subtle text-body fs-6 fw-medium rounded-pill text-decoration-none">Work</a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

</section>
document.addEventListener('DOMContentLoaded', () => {
  var swiper = new Swiper(".swiper4", {
      slidesPerView: 1,
      spaceBetween: 24,
      navigation: {
          nextEl: "#swiper4-button-next",
          prevEl: "#swiper4-button-prev",
      },
      autoplay: {
          delay: 2500,
          disableOnInteraction: false,
      },
      breakpoints: {
          768: {
              slidesPerView: 2,
              spaceBetween: 30,
          },
          992: {
              slidesPerView: 3,
              spaceBetween: 30,
          }
      }
  });
});

Example 15

Latest from our blogs

Explore in-depth articles, expert tips, and trending topics from around the world.

See All Blogs
Blog Feature Image
Mastering time management for busy professionals

Discover proven strategies to organize your schedule, prioritize tasks, and boost your productivity.

Blog Feature Image
The benefits of daily journaling for mental clarity

Learn how daily journaling can help reduce stress, organize your thoughts, and emotional well-being.

Blog Feature Image
How to create engaging presentations

Explore practical tips to design compelling slides, and keep your audience engaged from start to finish. 

<section class="py-5">
  <div class="container">
      <div class="text-center mb-5">
          <h1 class="fw-semibold">Latest from our blogs</h1>
          <p class="fs-4 text-muted">Explore in-depth articles, expert tips, and trending topics from around the world.</p>
          <a href="#" class="btn btn-lg btn-primary">See All Blogs <i class="ri-arrow-right-line ms-1"></i></a>
      </div>
      <div class="row g-4">
          <div class="col-lg-4">
              <div class="position-relative">
                  <img src="/assets/images/theme-images/1.jpg" class="img-fluid object-fit-cover rounded w-100" style="height: 240px;" alt="Blog Feature Image" />

                  <div class="position-absolute bottom-0 end-0 p-2">
                      <button class="btn btn-lg btn-outline-secondary"><i class="ri-arrow-right-up-line"></i></button>
                  </div>
              </div>
              <h5 class="fw-medium fs-3 mt-3"><a href="#" class="text-decoration-none">Mastering time management for busy professionals</a></h5>
              <p class="text-muted fs-5 mb-0">Discover proven strategies to organize your schedule, prioritize tasks, and boost your productivity.</p>
          </div>
          <div class="col-lg-4">
              <div class="position-relative">
                  <img src="/assets/images/theme-images/2.jpg" class="img-fluid object-fit-cover rounded w-100" style="height: 240px;" alt="Blog Feature Image" />

                  <div class="position-absolute bottom-0 end-0 p-2">
                      <button class="btn btn-lg btn-outline-secondary"><i class="ri-arrow-right-up-line"></i></button>
                  </div>
              </div>
              <h5 class="fw-medium fs-3 mt-3"><a href="#" class="text-decoration-none">The benefits of daily journaling for mental clarity</a></h5>
              <p class="text-muted fs-5 mb-0">Learn how daily journaling can help reduce stress, organize your thoughts, and emotional well-being.</p>
          </div>
          <div class="col-lg-4">
              <div class="position-relative">
                  <img src="/assets/images/theme-images/3.jpg" class="img-fluid object-fit-cover rounded w-100" style="height: 240px;" alt="Blog Feature Image" />

                  <div class="position-absolute bottom-0 end-0 p-2">
                      <button class="btn btn-lg btn-outline-secondary"><i class="ri-arrow-right-up-line"></i></button>
                  </div>
              </div>
              <h5 class="fw-medium fs-3 mt-3"><a href="#" class="text-decoration-none">How to create engaging presentations</a></h5>
              <p class="text-muted fs-5 mb-0">Explore practical tips to design compelling slides, and keep your audience engaged from start to finish.</p>
          </div>
      </div>
  </div>

</section>

Example 16

Our Blogs

Explore in-depth articles, expert tips, and trending topics from around the world.

Mastering time management for busy professionals

Discover proven strategies to organize your schedule, prioritize tasks, and boost your productivity.

Read More
The benefits of daily journaling for mental clarity

Learn how daily journaling can help reduce stress, organize your thoughts, and emotional well-being.

Read More
How to create engaging presentations

Explore practical tips to design compelling slides, and keep your audience engaged from start to finish.

Read More
Tips for effective remote collaboration

Discover best practices for communicating, staying aligned, and working productively with remote teams.

Read More
The power of goal setting for long-term success

Learn how setting clear, achievable goals can guide your decisions, and drive lasting professional growth.

Read More
How to organize your tasks for maximum efficiency

Find practical methods to prioritize tasks, and streamline your day for better productivity and focus.

Read More 
<section class="py-5">
  <div class="container">
      <div class="text-center">
          <h1 class="fw-semibold">Our Blogs</h1>
          <p class="fs-4 text-muted mb-5">Explore in-depth articles, expert tips, and trending topics from around the world.</p>
      </div>
      <div class="row g-4">
          <div class="col-md-6">
              <div class="card card-lift bg-primary-subtle border-0 h-100 position-relative">
                  <div class="card-body d-flex flex-column">
                      <h5 class="fw-medium fs-3"><a href="#" class="text-decoration-none">Mastering time management for busy professionals</a></h5>
                      <p class="text-muted fs-5">Discover proven strategies to organize your schedule, prioritize tasks, and boost your productivity.</p>
                      <a href="#" class="link-primary text-decoration-none mt-auto">Read More <i class="ri-arrow-right-line"></i></a>

                      <div class="position-absolute end-0 bottom-0 d-none d-xl-block">
                          <i class="ri-calendar-schedule-fill text-primary opacity-25 lh-1" style="font-size: 120px;"></i>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-md-6 col-xl-3">
              <div class="card card-lift bg-red bg-opacity-25 border-0 h-100">
                  <div class="card-body d-flex flex-column">
                      <h5 class="fw-medium fs-3"><a href="#" class="text-decoration-none">The benefits of daily journaling for mental clarity</a></h5>
                      <p class="text-muted fs-5">Learn how daily journaling can help reduce stress, organize your thoughts, and emotional well-being.</p>
                      <a href="#" class="link-primary text-decoration-none mt-auto">Read More <i class="ri-arrow-right-line"></i></a>
                  </div>
              </div>
          </div>
          <div class="col-md-6 col-xl-3">
              <div class="card card-lift bg-yellow bg-opacity-25 border-0 h-100">
                  <div class="card-body d-flex flex-column">
                      <h5 class="fw-medium fs-3"><a href="#" class="text-decoration-none">How to create engaging presentations</a></h5>
                      <p class="text-muted fs-5">Explore practical tips to design compelling slides, and keep your audience engaged from start to finish.</p>
                      <a href="#" class="link-primary text-decoration-none mt-auto">Read More <i class="ri-arrow-right-line"></i></a>
                  </div>
              </div>
          </div>
          <div class="col-md-6 col-xl-3">
              <div class="card card-lift bg-green bg-opacity-25 border-0 h-100">
                  <div class="card-body d-flex flex-column">
                      <h5 class="fw-medium fs-3"><a href="#" class="text-decoration-none">Tips for effective remote collaboration</a></h5>
                      <p class="text-muted fs-5">Discover best practices for communicating, staying aligned, and working productively with remote teams.</p>
                      <a href="#" class="link-primary text-decoration-none mt-auto">Read More <i class="ri-arrow-right-line"></i></a>
                  </div>
              </div>
          </div>
          <div class="col-md-6 col-xl-3">
              <div class="card card-lift bg-yellow bg-opacity-25 border-0 h-100">
                  <div class="card-body d-flex flex-column">
                      <h5 class="fw-medium fs-3"><a href="#" class="text-decoration-none">The power of goal setting for long-term success</a></h5>
                      <p class="text-muted fs-5">Learn how setting clear, achievable goals can guide your decisions, and drive lasting professional growth.</p>
                      <a href="#" class="link-primary text-decoration-none mt-auto">Read More <i class="ri-arrow-right-line"></i></a>
                  </div>
              </div>
          </div>
          <div class="col-md-6">
              <div class="card card-lift bg-primary-subtle border-0 h-100 position-relative">
                  <div class="card-body d-flex flex-column">
                      <h5 class="fw-medium fs-3"><a href="#" class="text-decoration-none">How to organize your tasks for maximum efficiency</a></h5>
                      <p class="text-muted fs-5">Find practical methods to prioritize tasks, and streamline your day for better productivity and focus.</p>
                      <a href="#" class="link-primary text-decoration-none mt-auto">Read More <i class="ri-arrow-right-line"></i></a>

                      <div class="position-absolute end-0 bottom-0 d-none d-xl-block">
                          <i class="ri-folder-2-fill text-primary opacity-25 lh-1" style="font-size: 120px;"></i>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

</section>

Example 17

Blog List

Latest from our blogs

Explore in-depth articles, expert tips, and trending topics from around the world.

Productivity
Mastering time management for busy professionals
The benefits of daily journaling for mental clarity
Productivity Wellness Lifestyle Creativity Leadership Motivation Learning
View All Categories
Productivity
How to create engaging presentations

Explore practical tips to design compelling slides, and keep your audience engaged from start to finish. 

<section class="py-5">
  <div class="container">
      <div class="text-center">
          <span class="badge fs-6 text-body fw-medium border rounded-pill">Blog List</span>
          <h1 class="fw-semibold mt-2">Latest from our blogs</h1>
          <p class="fs-4 text-muted mb-5">Explore in-depth articles, expert tips, and trending topics from around the world.</p>
      </div>
      <div class="row g-4">
          <div class="col-lg-4 d-flex flex-column">
              <div class="card border-0 position-relative flex-fill" style="background-image: url('/assets/images/theme-images/4.jpg'); background-size: cover; background-position: center;">

                  <!-- Overlay -->
                  <div class="position-absolute rounded-4 top-0 start-0 w-100 h-100 bg-dark opacity-25"></div>

                  <!-- Content -->
                  <div class="position-relative card-body d-flex flex-column align-items-start" style="padding-top: 128px;">
                      <span class="badge text-bg-secondary fw-medium rounded-pill mt-auto">Productivity</span>
                      <h5 class="fw-medium fs-3 mt-2 mb-0"><a href="#" class="link-light text-decoration-none">Mastering time management for busy professionals</a></h5>
                  </div>
              </div>
          </div>
          <div class="col-lg-4 d-flex flex-column">
              <div class="card border-0 position-relative flex-fill mb-4" style="background-image: url('/assets/images/theme-images/2.jpg'); background-size: cover; background-position: center;">

                  <!-- Overlay -->
                  <div class="position-absolute rounded-4 top-0 start-0 w-100 h-100 bg-dark opacity-25"></div>

                  <!-- Content -->
                  <div class="position-relative card-body d-flex flex-column align-items-start" style="padding-top: 128px;">
                      <h5 class="fw-medium fs-3 mb-0 mt-auto"><a href="#" class="link-light text-decoration-none">The benefits of daily journaling for mental clarity</a></h5>
                  </div>
              </div>

              <div class="card bg-primary-subtle border-0 flex-fill">
                  <div class="card-body d-flex flex-column align-items-start">
                      <div class="d-flex flex-wrap justify-content-center gap-2">
                          <a href="#" class="badge fs-6 text-primary bg-primary bg-opacity-10 fw-medium rounded-pill text-decoration-none">Productivity</a>
                          <a href="#" class="badge fs-6 text-primary bg-primary bg-opacity-10 fw-medium rounded-pill text-decoration-none">Wellness</a>
                          <a href="#" class="badge fs-6 text-primary bg-primary bg-opacity-10 fw-medium rounded-pill text-decoration-none">Lifestyle</a>
                          <a href="#" class="badge fs-6 text-primary bg-primary bg-opacity-10 fw-medium rounded-pill text-decoration-none">Creativity</a>
                          <a href="#" class="badge fs-6 text-primary bg-primary bg-opacity-10 fw-medium rounded-pill text-decoration-none">Leadership</a>
                          <a href="#" class="badge fs-6 text-primary bg-primary bg-opacity-10 fw-medium rounded-pill text-decoration-none">Motivation</a>
                          <a href="#" class="badge fs-6 text-primary bg-primary bg-opacity-10 fw-medium rounded-pill text-decoration-none">Learning</a>
                      </div>

                      <div class="d-flex align-items-center justify-content-between w-100 pt-4 mt-auto">
                          <h5 class="fw-medium fs-4 mb-0">View All Categories</h5>
                          <button class="btn btn-primary"><i class="ri-arrow-right-line"></i></button>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-lg-4 d-flex flex-column">
              <div class="card text-bg-dark border-0 flex-fill mb-4 position-relative">
                  <div class="card-body">
                      <span class="badge border fw-medium rounded-pill">Productivity</span>
                      <h5 class="fw-medium fs-2 mt-2"><a href="#" class="link-light text-decoration-none">How to create engaging presentations</a></h5>
                      <p class="fs-5 opacity-75 mb-0">Explore practical tips to design compelling slides, and keep your audience engaged from start to finish.</p>
                  </div>

                  <div class="position-absolute top-0 end-0 p-4 z-1">
                  <a href="#" class="btn btn-dark"><i class="ri-arrow-right-up-line"></i></a>
                  </div>
              </div>

              <div class="card border-0 flex-fill" style="background-image: url('/assets/images/theme-images/6.jpg'); background-size: cover; background-position: center; min-height: 220px;"></div>
          </div>
      </div>
  </div>

</section>

Example 18

Our Blogs

Explore our blogs

Discover practical tips, industry news, and inspiring stories from our team and community.

View All Blogs 
<section class="py-5">
  <div class="container">
      <div class="row g-4">
          <div class="col-lg-5">
              <span class="fs-6 fw-medium text-uppercase">Our Blogs</span>
              <h1 class="fw-semibold my-2">Explore our blogs</h1>
              <p class="fs-4 text-muted">Discover practical tips, industry news, and inspiring stories from our team and community.</p>
              <a href="#" class="btn btn-lg btn-outline-secondary">View All Blogs <i class="ri-arrow-right-line ms-1"></i></a>
          </div>
          <div class="col-lg-7">
              <div class="d-flex flex-column gap-4">
                  <div class="card bg-secondary border-0 shadow">
                      <div class="card-body">
                          <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-4">
                              <div>
                                  <div class="d-flex flex-wrap fs-5 gap-2 mb-2">
                                      <span class="fw-medium"><a href="#" class="text-decoration-none">Productivity</a></span>
                                      <span>•</span>
                                      <span class="text-muted">19 Nov, 2020</span>
                                  </div>
                                  <h5 class="fw-medium fs-3 mb-0"><a href="#" class="text-decoration-none">Mastering time management for busy professionals</a></h5>
                              </div>
                              <a href="#" class="btn btn-lg btn-outline-secondary" aria-label="Open blog post"><i class="ri-arrow-right-up-line"></i></a>
                          </div>
                      </div>
                  </div>

                  <div class="card bg-secondary border-0 shadow">
                      <div class="card-body">
                          <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-4">
                              <div>
                                  <div class="d-flex flex-wrap fs-5 gap-2 mb-2">
                                      <span class="fw-medium"><a href="#" class="text-decoration-none">Productivity</a></span>
                                      <span>•</span>
                                      <span class="text-muted">20 Jul, 2020</span>
                                  </div>
                                  <h5 class="fw-medium fs-3 mb-0"><a href="#" class="text-decoration-none">The benefits of daily journaling for mental clarity</a></h5>
                              </div>
                              <a href="#" class="btn btn-lg btn-outline-secondary" aria-label="Open blog post"><i class="ri-arrow-right-up-line"></i></a>
                          </div>
                      </div>
                  </div>

                  <div class="card bg-secondary border-0 shadow">
                      <div class="card-body">
                          <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-4">
                              <div>
                                  <div class="d-flex flex-wrap fs-5 gap-2 mb-2">
                                      <span class="fw-medium"><a href="#" class="text-decoration-none">Productivity</a></span>
                                      <span>•</span>
                                      <span class="text-muted">16 Nov, 2020</span>
                                  </div>
                                  <h5 class="fw-medium fs-3 mb-0"><a href="#" class="text-decoration-none">How to create engaging presentations</a></h5>
                              </div>
                              <a href="#" class="btn btn-lg btn-outline-secondary" aria-label="Open blog post"><i class="ri-arrow-right-up-line"></i></a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

</section>
Quick Links
Home Docs
Admin
Admin Dashboard Example
Themes
Website Example (Classic)
Website Example (Modern)
Dog Breeder 1 (Beagle)
Dog Breeder 2 (Golden Retriever)
Dog Breeder 3 (French Bulldog)
Dog Breeder 4 (Poodle)
Dog Breeder 5 (German Shepherd)
Dog Breeder 6 (Yorkshire Terrier)
Cat Breeder 1 (Persian)
Cat Breeder 2 (Siamese)
Cat Breeder 3 (Bengal)
Cat Breeder 4 (Abyssinian)
Cat Breeder 5 (Himalayan)
HOA 1
HOA 2
HOA 3
Real Estate 1
Real Estate 2
Other
AsteroBuilder
AsteroDigital
Paanstation
Jazzup Salon
HomeStyle Furnitech
MAK Holding Group
Takshila Institute
Clinic Demo