Blog components

Components that are related to the blog / news section of the website.

Silicon component

Post preview card: Vertical (grid)

<!-- 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" aria-label="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, 2023</span>
    </div>
    <h3 class="h5 mb-0">
      <a href="#">5 Bad Landing Page Examples &amp; 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 (list)

<!-- 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" aria-label="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, 2023</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>

Alt post preview card: Vertical (grid)

<!-- 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" aria-label="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, 2023</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" aria-label="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, 2023</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>

Alt post preview card: Horizontal (list)

This Week in Search: New Limits and Exciting Features

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.

Sep 15, 2023
4
6
0
<!-- 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" aria-label="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, 2023</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" aria-label="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, 2023</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

<!-- 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, 2023</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, 2023</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

<!-- 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" aria-label="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

<!-- 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, 2023</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>

Categories widget

<!-- 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

<!-- 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, 2023</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, 2023</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>

Tags widget

<!-- 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>

Post comments

Avatar
Esther Howard
4 mins ago
Reply

Nibh enim porta ut augue felis, donec sit luctus. Quis ullamcorper dolor sit mauris. Hendrerit eu libero, eu tristique sodales ultrices etiam adipiscing. Donec viverra sodales arcu gravida nibh at. Neque lobortis quis porta integer et placerat lectus scelerisque. Velit eget malesuada morbi faucibus at sed euismod. Tortor, eu ut id tincidunt leo placerat luctus.


Avatar
Ralph Edwards
September 9 at 12:48
Reply

Eget amet, ac scelerisque tellus sed. Sapien duis sit neque pulvinar. Est sit aenean nisl etiam donec mattis ut diam. Luctus massa eu nunc aliquam viverra tempus, eu amet, luctus. Ac faucibus vestibulum eu lacus. Ullamcorper sem ultrices tincidunt pharetra?

Avatar
Albert Flores
16 hours ago
Reply

@Ralph Edwards Vulputate malesuada amet, consequat ullamcorper. Orci, cras maecenas in sit purus pellentesque. Ridiculus blandit pellentesque eget arcu morbi nisl. Morbi volutpat adipiscing sapien sed ut tempor.

<!-- Post comments -->

<!-- Comment -->
<div class="py-4">
  <div class="d-flex align-items-center justify-content-between pb-2 mb-1">
    <div class="d-flex align-items-center me-3">
      <img src="assets/img/avatar/03.jpg" class="rounded-circle" width="48" alt="Avatar">
      <div class="ps-3">
        <h6 class="fw-semibold mb-0">Esther Howard</h6>
        <span class="fs-sm text-muted">4 mins ago</span>
      </div>
    </div>
    <a href="#" class="nav-link fs-sm px-0">
      <i class="bx bx-share fs-lg me-2"></i>
      Reply
    </a>
  </div>
  <p class="mb-0">Nibh enim porta ut augue felis, donec sit luctus. Quis ullamcorper dolor sit mauris. Hendrerit eu libero, eu tristique sodales ultrices etiam adipiscing. Donec viverra sodales arcu gravida nibh at. Neque lobortis quis porta integer et placerat lectus scelerisque. Velit eget malesuada morbi faucibus at sed euismod. Tortor, eu ut id tincidunt leo placerat luctus.</p>
</div>

<hr class="my-2">

<!-- Comment -->
<div class="py-4">
  <div class="d-flex align-items-center justify-content-between pb-2 mb-1">
    <div class="d-flex align-items-center me-3">
      <img src="assets/img/avatar/02.jpg" class="rounded-circle" width="48" alt="Avatar">
      <div class="ps-3">
        <h6 class="fw-semibold mb-0">Ralph Edwards</h6>
        <span class="fs-sm text-muted">September 9 at 12:48</span>
      </div>
    </div>
    <a href="#" class="nav-link fs-sm px-0">
      <i class="bx bx-share fs-lg me-2"></i>
      Reply
    </a>
  </div>
  <p class="mb-0 pb-2">Eget amet, ac scelerisque tellus sed. Sapien duis sit neque pulvinar. Est sit aenean nisl etiam donec mattis ut diam. Luctus massa eu nunc aliquam viverra tempus, eu amet, luctus. Ac faucibus vestibulum eu lacus. Ullamcorper sem ultrices tincidunt pharetra?</p>

  <!-- Comment reply -->
  <div class="position-relative ps-4 mt-4">
    <span class="position-absolute top-0 start-0 w-1 h-100 bg-primary"></span>
    <div class="d-flex align-items-center justify-content-between ps-3 pb-2 mb-1">
      <div class="d-flex align-items-center me-3">
        <img src="assets/img/avatar/05.jpg" class="rounded-circle" width="48" alt="Avatar">
        <div class="ps-3">
          <h6 class="fw-semibold mb-0">Albert Flores</h6>
          <span class="fs-sm text-muted">16 hours ago</span>
        </div>
      </div>
      <a href="#" class="nav-link fs-sm px-0">
        <i class="bx bx-share fs-lg me-2"></i>
        Reply
      </a>
    </div>
    <p class="ps-3 mb-0"><a href="#" class="fw-semibold text-decoration-none">@Ralph Edwards</a> Vulputate malesuada amet, consequat ullamcorper. Orci, cras maecenas in sit purus pellentesque. Ridiculus blandit pellentesque eget arcu morbi nisl. Morbi volutpat adipiscing sapien sed ut tempor.</p>
  </div>
</div>
Top