Blog components

<!-- Post preview card with image -->
<article class="card border-0 bg-secondary">
  <a href="#">
    <img src="assets/img/blog/grid/01.jpg" class="card-img-top" alt="Post image">
  </a>
  <div class="card-body pb-4">
    <div class="d-flex align-items-center mb-4 mt-n1">
      <span class="fs-sm text-body-secondary">12 hours ago</span>
      <span class="fs-xs opacity-20 mx-3">|</span>
      <a href="#" class="badge text-nav fs-xs border">Books</a>
    </div>
    <h3 class="h4 card-title">
      <a href="#">Top books for inspiration</a>
    </h3>
    <p class="card-text">Vulputate auctor lacus imperdiet facilisi tristique nisl pulvinar porta diam duis odio</p>
  </div>
  <div class="card-footer pt-3">
    <a href="#" class="d-flex align-items-center text-decoration-none pb-2">
      <img src="assets/img/avatar/06.jpg" class="rounded-circle" width="48" alt="Post author">
      <h6 class="ps-3 mb-0">Jenny Wilson</h6>
    </a>
  </div>
</article>

<!-- Post preview card no image -->
<article class="card border-0 bg-secondary">
  <div class="card-body pb-4">
    <div class="d-flex align-items-center mb-4 mt-n1">
      <span class="fs-sm text-body-secondary">July 16, 2023</span>
      <span class="fs-xs opacity-20 mx-3">|</span>
      <a href="#" class="badge text-nav fs-xs border">Inspiration</a>
    </div>
    <h3 class="h4 card-title">
      <a href="#">How to look for inspiration for new goals</a>
    </h3>
    <p class="card-text">Pharetra in morbi quis is massa maecenas arcu vulputate pulvinar elit non nullage a, duis tortor mi massa ipsum in eu eu eget libero pulvinar elit vulputate...</p>
  </div>
  <div class="card-footer pt-3">
    <a href="#" class="d-flex align-items-center text-decoration-none pb-2">
      <img src="assets/img/avatar/08.jpg" class="rounded-circle" width="48" alt="Post author">
      <h6 class="ps-3 mb-0">Guy Hawkins</h6>
    </a>
  </div>
</article>

<!-- Post preview card horizontal (List view) -->
<article class="row g-0 border-0">
  <a href="#" class="col-sm-5 bg-repeat-0 bg-size-cover bg-position-center rounded-5" style="background-image: url(assets/img/blog/list/03.jpg); min-height: 14rem" aria-label="Cover image"></a>
  <div class="col-sm-7">
    <div class="pt-4 pb-sm-4 ps-sm-4 pe-lg-4">
      <h3>
        <a href="#">Destinations to inspire and restore resources</a>
      </h3>
      <p class="d-sm-none d-md-block">Sapien ultrices egestas at faucibus eu diam velit diam id amet nibh quam rutrum diam fermentum diam natoque scelerisque viverra molestie fames...</p>
      <div class="d-flex flex-wrap align-items-center mt-n2">
        <a href="#" class="nav-link text-body-secondary fs-sm fw-normal p-0 mt-2 me-3">
          8
          <i class="ai-share fs-lg ms-1"></i>
        </a>
        <a href="#" class="nav-link text-body-secondary fs-sm fw-normal d-flex align-items-end p-0 mt-2">
          2
          <i class="ai-message fs-lg ms-1"></i>
        </a>
        <span class="fs-xs opacity-20 mt-2 mx-3">|</span>
        <span class="fs-sm text-body-secondary mt-2">16 hours ago</span>
        <span class="fs-xs opacity-20 mt-2 mx-3">|</span>
        <a href="#" class="badge text-nav fs-xs border mt-2">Travel</a>
      </div>
    </div>
  </div>
</article>

<!-- Simple post preview card -->
<article class="position-relative">
  <img src="assets/img/blog/list/06.jpg" class="rounded-5" alt="Post image">
  <h3 class="h4 mt-4 mb-0">
    <a href="#" class="stretched-link">A session with a psychologist as a personal choice or a fashion trend in society</a>
  </h3>
</article>

<!-- Featureed posts widget for sidebar area -->
<h3 class="h4 pb-1">Trending posts:</h3>

<!-- Item -->
<article class="position-relative d-flex align-items-center mb-4">
  <img src="assets/img/blog/sidebar/01.jpg" class="rounded" width="92" alt="Post image">
  <div class="ps-3">
    <h4 class="h6 mb-2">
      <a href="#" class="stretched-link">Instagram trends that will definitely work</a>
    </h4>
    <span class="fs-sm text-body-secondary">13 hours ago</span>
  </div>
</article>

<!-- Item -->
<article class="position-relative d-flex align-items-center mb-4">
  <img src="assets/img/blog/sidebar/02.jpg" class="rounded" width="92" alt="Post image">
  <div class="ps-3">
    <h4 class="h6 mb-2">
      <a href="#" class="stretched-link">A session with a psychologist</a>
    </h4>
    <span class="fs-sm text-body-secondary">May 12, 2023</span>
  </div>
</article>

<!-- Item -->
<article class="position-relative d-flex align-items-center">
  <img src="assets/img/blog/sidebar/03.jpg" class="rounded" width="92" alt="Post image">
  <div class="ps-3">
    <h4 class="h6 mb-2">
      <a href="#" class="stretched-link">How to look for inspiration for new goals</a>
    </h4>
    <span class="fs-sm text-body-secondary">June 10, 2023</span>
  </div>
</article>

<!-- List of categories links with count -->
<h3 class="h4">Categories:</h3>
<ul class="nav flex-column">
  <li class="mb-2">
    <a href="#" class="nav-link d-flex p-0 active">
      All categories
      <span class="fs-sm text-body-secondary ms-2">(110)</span>
    </a>
  </li>
  <li class="mb-2">
    <a href="#" class="nav-link d-flex p-0">
      Inspiration
      <span class="fs-sm text-body-secondary ms-2">(34)</span>
    </a>
  </li>
  <li class="mb-2">
    <a href="#" class="nav-link d-flex p-0">
      Brand strategy
      <span class="fs-sm text-body-secondary ms-2">(8)</span>
    </a>
  </li>
  <li class="mb-2">
    <a href="#" class="nav-link d-flex p-0">
      Advertisement
      <span class="fs-sm text-body-secondary ms-2">(45)</span>
    </a>
  </li>
  <li class="mb-2">
    <a href="#" class="nav-link d-flex p-0">
      Ecommerce
      <span class="fs-sm text-body-secondary ms-2">(17)</span>
    </a>
  </li>
  <li>
    <a href="#" class="nav-link d-flex p-0">
      Travel &amp; Vacation
      <span class="fs-sm text-body-secondary ms-2">(6)</span>
    </a>
  </li>
</ul>

<!-- Author card widget style 1 -->
<div class="card border-0 bg-secondary">
  <div class="card-body text-center">
    <img src="assets/img/avatar/03.jpg" class="d-block rounded-circle mx-auto mb-3" width="80" alt="Author image">
    <h3 class="h5 mb-2 pb-1">Darlene Robertson</h3>
    <p class="fs-sm mb-4">Duis consectetur quis enim iaculis eu sagittis posuere imperdiet</p>
    <a href="#" class="btn btn-outline-primary btn-sm">
      Follow the author
    </a>
  </div>
</div>

<!-- Author card widget style 2 -->
<div class="border-top border-bottom py-4">
  <div class="d-flex align-items-start py-2">
    <img src="assets/img/avatar/04.jpg" class="d-block rounded-circle mb-3" width="56" alt="Author image">
    <div class="d-md-flex w-100 ps-4">
      <div style="max-width: 26rem;">
        <h3 class="h5 mb-2">Darlene Robertson</h3>
        <p class="fs-sm mb-0">Porta nisl a ultrices ut libero id. Gravida mi neque, tristique justo, et pharetra laoreet nulla est nulla cras ac arcu sed mattis tristique convallis suspen enim blandit massa cursus augue dui mattis morbi velit semper nunc at etiam lacinia.</p>
      </div>
      <div class="pt-4 pt-md-0 ps-md-4 ms-md-auto">
        <h3 class="h5">Share post:</h3>
        <div class="d-flex">
          <a href="#" class="nav-link p-2 me-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Instagram" aria-label="Instagram">
            <i class="ai-instagram"></i>
          </a>
          <a href="#" class="nav-link p-2 me-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Facebook" aria-label="Facebook">
            <i class="ai-facebook"></i>
          </a>
          <a href="#" class="nav-link p-2 me-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Telegram" aria-label="Telegram">
            <i class="ai-telegram fs-sm"></i>
          </a>
          <a href="#" class="nav-link p-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Twitter" aria-label="Twitter">
            <i class="ai-twitter"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Comment -->
<div class="border-bottom pb-4">
  <div class="d-flex align-items-center pb-1 mb-3">
    <img src="assets/img/avatar/11.jpg" class="rounded-circle" width="48" alt="Comment author">
    <div class="ps-3">
      <h6 class="mb-0">Jenny Wilson</h6>
      <span class="fs-sm text-body-secondary">2 days ago at 9:20</span>
    </div>
  </div>
  <p class="pb-2 mb-0">Pellentesque urna pharetra, quis maecenas. Sit dolor amet nulla aenean eu, ac. Nisl mi tempus, iaculis viverra vestibulum scelerisque imperdiet montes mauris massa elit pretium elementum eget tortor quis</p>
  <button type="button" class="nav-link fs-sm fw-semibold px-0 py-2">
    Reply
    <i class="ai-redo fs-xl ms-2"></i>
  </button>

  <!-- Comment reply -->
  <div class="card card-body border-0 bg-secondary mt-4">
    <div class="d-flex align-items-center pb-1 mb-3">
      <img src="assets/img/avatar/10.jpg" class="rounded-circle" width="48" alt="Comment author">
      <div class="ps-3">
        <h6 class="mb-0">Ralph Edwards</h6>
        <span class="fs-sm text-body-secondary">2 days ago at 11:45</span>
      </div>
    </div>
    <p class="mb-0"><a href="#" class="fw-bold text-decoration-none">@Jenny Wilson</a> Massa morbi duis et ornare urna dictum vestibulum pulvinar nunc facilisis ornare id at at ut arcu integer tristique placerat non turpis nibh turpis ullamcorper est porttitor.</p>
  </div>
</div>