Blog components

<!-- Post preview card: Vertical layout -->
<article class="card h-100 border-0 shadow-sm">
  <div class="position-relative">
    <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
    <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
      <i class="bx bx-bookmark"></i>
    </a>
    <img src="assets/img/blog/01.jpg" class="card-img-top" alt="Image">
  </div>
  <div class="card-body pb-4">
    <div class="d-flex align-items-center justify-content-between mb-3">
      <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Web design</a>
      <span class="fs-sm text-muted">May 19, 2021</span>
    </div>
    <h3 class="h5 mb-0">
      <a href="#">5 Bad Landing Page Examples & How We Would Fix Them</a>
    </h3>
  </div>
  <div class="card-footer py-4">
    <a href="#" class="d-flex align-items-center fw-bold text-dark text-decoration-none">
      <img src="assets/img/avatar/02.jpg" class="rounded-circle me-3" width="48" alt="Avatar">
      Ralph Edwards
    </a>
  </div>
</article>

<!-- Post preview card: Horizontal layout -->
<article class="card border-0 shadow-sm overflow-hidden">
  <div class="row g-0">
    <div class="col-sm-4 position-relative bg-position-center bg-repeat-0 bg-size-cover" style="background-image: url(assets/img/blog/09.jpg); min-height: 15rem;">
      <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
      <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
        <i class="bx bx-bookmark"></i>
      </a>
    </div>
    <div class="col-sm-8">
      <div class="card-body">
        <div class="d-flex align-items-center mb-3">
          <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Strategy</a>
          <span class="fs-sm text-muted border-start ps-3 ms-3">May 19, 2021</span>
        </div>
        <h3 class="h4">
          <a href="#">This Long-Awaited Technology May Finally Change the World</a>
        </h3>
        <p>Sapien, nulla placerat in at. Vitae tincidunt quam ornare massa porttitor. Neque a vitae feugiat in sit habitant integer. Cursus et at pulvinar sed neque vitae. Aliquam vitae hac phasellus.</p>
        <hr class="my-4">
        <div class="d-flex align-items-center justify-content-between">
          <a href="#" class="d-flex align-items-center fw-bold text-dark text-decoration-none me-3">
            <img src="assets/img/avatar/03.jpg" class="rounded-circle me-3" width="48" alt="Avatar">
            Esther Howard
          </a>
          <div class="d-flex align-items-center text-muted">
            <div class="d-flex align-items-center me-3">
              <i class="bx bx-like fs-lg me-1"></i>
              <span class="fs-sm">8</span>
            </div>
            <div class="d-flex align-items-center me-3">
              <i class="bx bx-comment fs-lg me-1"></i>
              <span class="fs-sm">7</span>
            </div>
            <div class="d-flex align-items-center">
              <i class="bx bx-share-alt fs-lg me-1"></i>
              <span class="fs-sm">4</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

<!-- Alternative post preview card: Vertical layout -->
<article class="card border-0 bg-transparent">
  <div class="position-relative overflow-hidden rounded-3">
    <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
    <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
      <i class="bx bx-bookmark"></i>
    </a>
    <img src="assets/img/blog/05.jpg" alt="Image">
  </div>
  <div class="card-body px-0">
    <a href="#" class="badge fs-sm text-white bg-info shadow-info text-decoration-none mb-3">Marketing</a>
    <h3 class="h4">
      <a href="#">Inclusive Marketing: Why and How Does it Work?</a>
    </h3>
    <p class="mb-4">Nunc aliquet scelerisque pellentesque imperdiet tortor elit, dictum. Tristique odio at dignissim viverra aliquet eleifend erat. Tellus, at arcu, egestas praesent.</p>
    <div class="d-flex align-items-center text-muted">
      <div class="fs-sm border-end pe-3 me-3">Oct 9, 2021</div>

      <div class="d-flex align-items-center me-3">
        <i class="bx bx-like fs-lg me-1"></i>
        <span class="fs-sm">8</span>
      </div>
      <div class="d-flex align-items-center me-3">
        <i class="bx bx-comment fs-lg me-1"></i>
        <span class="fs-sm">7</span>
      </div>
      <div class="d-flex align-items-center">
        <i class="bx bx-share-alt fs-lg me-1"></i>
        <span class="fs-sm">4</span>
      </div>
    </div>
  </div>
</article>
  
<!-- Without image -->
<article class="card">
  <div class="card-body">
    <div class="d-flex justify-content-between mb-3">
      <a href="#" class="badge fs-sm text-white bg-success shadow-success text-decoration-none">Gadgets</a>
      <a href="#" class="btn btn-icon btn-secondary btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
        <i class="bx bx-bookmark"></i>
      </a>
    </div>
    <h3 class="h4">
      <a href="#">A Study on Smartwatch Design Qualities and People’s Preferences</a>
    </h3>
    <p class="mb-4">Dignissim varius vehicula sagittis, cursus purus, congue. Tempor aliquam ut ridiculus dolor nibh felis. Feugiat in ut neque pellentesque. Urna adipiscing sodales pretium, pretium ornare enim lacus, ultrices amet. Enim in facilisis sit scelerisque sit.</p>
    <div class="d-flex align-items-center text-muted">
      <div class="fs-sm border-end pe-3 me-3">Sep 3, 2021</div>
      <div class="d-flex align-items-center me-3">
        <i class="bx bx-like fs-lg me-1"></i>
        <span class="fs-sm">8</span>
      </div>
      <div class="d-flex align-items-center me-3">
        <i class="bx bx-comment fs-lg me-1"></i>
        <span class="fs-sm">7</span>
      </div>
      <div class="d-flex align-items-center">
        <i class="bx bx-share-alt fs-lg me-1"></i>
        <span class="fs-sm">4</span>
      </div>
    </div>
  </div>
</article>

<!-- Alternative post preview card: Horizontal layout -->
<article class="card border-0 bg-transparent">
  <div class="row g-0">
    <div class="col-sm-4 position-relative bg-position-center bg-repeat-0 bg-size-cover rounded-3" style="background-image: url(assets/img/blog/02.jpg); min-height: 15rem;">
      <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
      <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
        <i class="bx bx-bookmark"></i>
      </a>
    </div>
    <div class="col-sm-8">
      <div class="card-body px-0 pt-sm-0 ps-sm-4 pb-0 pb-sm-4">
        <a href="#" class="badge fs-sm text-white bg-warning shadow-warning text-decoration-none mb-3">Web design</a>
        <h3 class="h4">
          <a href="#">Why UX Design Matters and How it Affects Ranking</a>
        </h3>
        <p class="mb-4">Nunc, enim donec venenatis quis amet, magna vulputate rhoncus. Interdum lacus, nam elementum, cursus felis cras eros vel tincidunt. Felis nunc rhoncus quis curabitur facilisi. Odio cursus in vel et pretium. Ornare interdum in cras nibh lectus fusce. Neque, donec nunc, tellus, bibendum. Id euismod urna diam dolor lobortis consectetu.</p>
        <div class="d-flex align-items-center text-muted">
          <div class="fs-sm border-end pe-3 me-3">Aug 17, 2021</div>
          <div class="d-flex align-items-center me-3">
            <i class="bx bx-like fs-lg me-1"></i>
            <span class="fs-sm">6</span>
          </div>
          <div class="d-flex align-items-center me-3">
            <i class="bx bx-comment fs-lg me-1"></i>
            <span class="fs-sm">2</span>
          </div>
          <div class="d-flex align-items-center">
            <i class="bx bx-share-alt fs-lg me-1"></i>
            <span class="fs-sm">9</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>
  
<!-- Without image -->
<article class="card">
  <div class="card-body">
    <div class="d-flex justify-content-between mb-3">
      <a href="#" class="badge fs-sm text-white bg-danger shadow-danger text-decoration-none">Technology</a>
      <a href="#" class="btn btn-icon btn-secondary btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
        <i class="bx bx-bookmark"></i>
      </a>
    </div>
    <h3 class="h4">
      <a href="#">This Week in Search: New Limits and Exciting Features</a>
    </h3>
    <p class="mb-4">Sed parturient in faucibus porttitor morbi rutrum in. Amet fermentum, scelerisque suspendisse nisi faucibus quis lacus. Convallis eget pretium leo, egestas nisl, congue quam et ultrices. Pharetra, elementum pulvinar massa mattis sapien, sit. Id sollicitudin viverra morbi vitae ac tempor bibendum pulvinar vel. Integer non mattis ultrices est morbi ullamcorper scelerisque hac mi. Id semper ut dui sit magna.</p>
    <div class="d-flex align-items-center text-muted">
      <div class="fs-sm border-end pe-3 me-3">Sep 15, 2021</div>
      <div class="d-flex align-items-center me-3">
        <i class="bx bx-like fs-lg me-1"></i>
        <span class="fs-sm">4</span>
      </div>
      <div class="d-flex align-items-center me-3">
        <i class="bx bx-comment fs-lg me-1"></i>
        <span class="fs-sm">6</span>
      </div>
      <div class="d-flex align-items-center">
        <i class="bx bx-share-alt fs-lg me-1"></i>
        <span class="fs-sm">0</span>
      </div>
    </div>
  </div>
</article>

<!-- Color background on hover -->
<article class="card border-0 shadow-sm card-hover-primary">
  <div class="card-body pb-0">
    <div class="d-flex align-items-center justify-content-between mb-3">
      <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none position-relative zindex-2">Software</a>
      <span class="fs-sm text-muted">May 24, 2021</span>
    </div>
    <h3 class="h4">
      <a href="#" class="stretched-link">What the Software Stock Slump Means for the Market</a>
    </h3>
    <p class="mb-0">Id mollis consectetur congue egestas egestas suspendisse blandit justo. Tellus augue commodo id quis tempus etiam pulvinar at maecenas.</p>
  </div>
  <div class="card-footer d-flex align-items-center py-4 text-muted border-top-0">
    <div class="fs-sm border-end pe-3 me-3">Sep 15, 2021</div>
    <div class="d-flex align-items-center me-3">
      <i class="bx bx-like fs-lg me-1"></i>
      <span class="fs-sm">4</span>
    </div>
    <div class="d-flex align-items-center me-3">
      <i class="bx bx-comment fs-lg me-1"></i>
      <span class="fs-sm">6</span>
    </div>
    <div class="d-flex align-items-center">
      <i class="bx bx-share-alt fs-lg me-1"></i>
      <span class="fs-sm">0</span>
    </div>
  </div>
</article>

<!-- Podcast preview card -->
<article>
  <div class="d-block position-relative rounded-3 mb-3">
    <a href="#" class="btn btn-icon btn-light bg-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Listen later">
      <i class="bx bx-bookmark"></i>
    </a>
    <img src="assets/img/avatar/06.jpg" class="position-absolute top-0 start-0 rounded-circle zindex-2 mt-3 ms-3" width="48" alt="Avatar">
    <span class="badge bg-dark position-absolute bottom-0 end-0 zindex-2 mb-3 me-3">1:53:19</span>
    <a href="#" class="position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-35 rounded-3" aria-label="Listen podcast"></a>
    <img src="assets/img/blog/podcasts/01.jpg" class="rounded-3" alt="Image">
  </div>
  <div class="d-flex align-items-center mb-2">
    <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Startups</a>
    <span class="fs-sm text-muted border-start ps-3 ms-3">10 hours ago</span>
  </div>
  <h3 class="h5">
    <a href="#">How to Choose a Fantastic SEO Agency</a>
  </h3>
  <div class="d-flex align-items-center text-muted">
    <div class="d-flex align-items-center me-3">
      <i class="bx bx-like fs-lg me-1"></i>
      <span class="fs-sm">18</span>
    </div>
    <div class="d-flex align-items-center me-3">
      <i class="bx bx-comment fs-lg me-1"></i>
      <span class="fs-sm">9</span>
    </div>
    <div class="d-flex align-items-center">
      <i class="bx bx-share-alt fs-lg me-1"></i>
      <span class="fs-sm">5</span>
    </div>
  </div>
  <a href="#" class="btn btn-link px-0 mt-3">
    <i class="bx bx-play-circle fs-lg me-2"></i>
    Listen now
  </a>
</article>

<!-- Simple feed example -->
<ul class="list-unstyled mb-0">

  <!-- Item -->
  <li class="mb-4">
    <h3 class="h4 mb-2">
      <a href="#">5 Bad Landing Page Examples &amp; How We Would Fix Them</a>
    </h3>
    <div class="d-flex align-items-center text-muted pt-1">
      <div class="fs-sm border-end pe-3 me-3">12 hours ago</div>
      <div class="d-flex align-items-center me-3">
        <i class="bx bx-like fs-lg me-1"></i>
        <span class="fs-sm">8</span>
      </div>
      <div class="d-flex align-items-center me-3">
        <i class="bx bx-comment fs-lg me-1"></i>
        <span class="fs-sm">4</span>
      </div>
      <div class="d-flex align-items-center">
        <i class="bx bx-share-alt fs-lg me-1"></i>
        <span class="fs-sm">2</span>
      </div>
    </div>
  </li>

  <!-- Item -->
  <li class="mb-4">
    <h3 class="h4 mb-2">
      <a href="#">How Agile is Your Forecasting Process?</a>
    </h3>
    <div class="d-flex align-items-center text-muted pt-1">
      <div class="fs-sm border-end pe-3 me-3">Oct 9, 2021</div>
      <div class="d-flex align-items-center me-3">
        <i class="bx bx-like fs-lg me-1"></i>
        <span class="fs-sm">4</span>
      </div>
      <div class="d-flex align-items-center me-3">
        <i class="bx bx-comment fs-lg me-1"></i>
        <span class="fs-sm">1</span>
      </div>
      <div class="d-flex align-items-center">
        <i class="bx bx-share-alt fs-lg me-1"></i>
        <span class="fs-sm">0</span>
      </div>
    </div>
  </li>

  <!-- Add as many items as you need -->
  ...
</ul>

<!-- List of blog categories -->
<div class="card card-body">
  <h3 class="h5">Categories</h3>
  <ul class="nav flex-column fs-sm">
    <li class="nav-item mb-1">
      <a href="#" class="nav-link py-1 px-0 active">All topics <span class="fw-normal opacity-60 ms-1">(48)</span></a>
    </li>
    <li class="nav-item mb-1">
      <a href="#" class="nav-link py-1 px-0">Digital <span class="fw-normal opacity-60 ms-1">(12)</span></a>
    </li>
    <li class="nav-item mb-1">
      <a href="#" class="nav-link py-1 px-0">Marketing <span class="fw-normal opacity-60 ms-1">(5)</span></a>
    </li>
    <li class="nav-item mb-1">
      <a href="#" class="nav-link py-1 px-0">Startups <span class="fw-normal opacity-60 ms-1">(10)</span></a>
    </li>
    <li class="nav-item mb-1">
      <a href="#" class="nav-link py-1 px-0">Technology <span class="fw-normal opacity-60 ms-1">(9)</span></a>
    </li>
    <li class="nav-item mb-1">
      <a href="#" class="nav-link py-1 px-0">Business <span class="fw-normal opacity-60 ms-1">(4)</span></a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link py-1 px-0">Processes & Tools <span class="fw-normal opacity-60 ms-1">(3)</span></a>
    </li>
  </ul>
</div>

<!-- Popular / recent posts widget -->
<div class="card card-body border-0 position-relative">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-primary opacity-10 rounded-3"></span>
  <div class="position-relative zindex-2">
    <h3 class="h5">Popular posts</h3>
    <ul class="list-unstyled mb-0">
      <li class="border-bottom pb-3 mb-3">
        <h4 class="h6 mb-2">
          <a href="#">5 Bad Landing Page Examples &amp; How We Would Fix Them</a>
        </h4>
        <div class="d-flex align-items-center text-muted pt-1">
          <div class="fs-xs border-end pe-3 me-3">12 hours ago</div>
          <div class="d-flex align-items-center me-3">
            <i class="bx bx-like fs-base me-1"></i>
            <span class="fs-xs">8</span>
          </div>
          <div class="d-flex align-items-center me-3">
            <i class="bx bx-comment fs-base me-1"></i>
            <span class="fs-xs">4</span>
          </div>
          <div class="d-flex align-items-center">
            <i class="bx bx-share-alt fs-base me-1"></i>
            <span class="fs-xs">2</span>
          </div>
        </div>
      </li>
      <li class="border-bottom pb-3 mb-3">
        <h4 class="h6 mb-2">
          <a href="#">How Agile is Your Forecasting Process?</a>
        </h4>
        <div class="d-flex align-items-center text-muted pt-1">
          <div class="fs-xs border-end pe-3 me-3">Oct 9, 2021</div>
          <div class="d-flex align-items-center me-3">
            <i class="bx bx-like fs-base me-1"></i>
            <span class="fs-xs">4</span>
          </div>
          <div class="d-flex align-items-center me-3">
            <i class="bx bx-comment fs-base me-1"></i>
            <span class="fs-xs">1</span>
          </div>
          <div class="d-flex align-items-center">
            <i class="bx bx-share-alt fs-base me-1"></i>
            <span class="fs-xs">0</span>
          </div>
        </div>
      </li>
      <li>
        <h4 class="h6 mb-2">
          <a href="#">Inclusive Marketing: Why and How Does it Work?</a>
        </h4>
        <div class="d-flex align-items-center text-muted pt-1">
          <div class="fs-xs border-end pe-3 me-3">Sep 13, 2021</div>
          <div class="d-flex align-items-center me-3">
            <i class="bx bx-like fs-base me-1"></i>
            <span class="fs-xs">5</span>
          </div>
          <div class="d-flex align-items-center me-3">
            <i class="bx bx-comment fs-base me-1"></i>
            <span class="fs-xs">2</span>
          </div>
          <div class="d-flex align-items-center">
            <i class="bx bx-share-alt fs-base me-1"></i>
            <span class="fs-xs">4</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

<!-- Popular tags widget -->
<div class="card card-body">
  <h3 class="h5">Tags</h3>
  <div class="d-flex flex-wrap">
    <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#lifestyle</a>
    <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#ux</a>
    <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#tech</a>
    <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#user</a>
    <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#software</a>
    <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#it</a>
    <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#network</a>
    <a href="#" class="btn btn-outline-secondary btn-sm px-3 my-1 me-2">#engineering</a>
  </div>
</div>