AroundUI Kit
Buy now

Menu

Content

Components

Utilities

Buy now

Blog components

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

Around component

Post preview (Grid)

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

// Post preview card no image
article.card.border-0.bg-secondary
  .card-body.pb-4
    .d-flex.align-items-center.mb-4.mt-n1
      span.fs-sm.text-muted July 16, 2022
      span.fs-xs.opacity-20.mx-3 |
      a(href="#").badge.text-nav.fs-xs.border
        | Inspiration
    h3.h4.card-title
      a(href="#") How to look for inspiration for new goals
    p.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...
  .card-footer.pt-3
    a(href="#").d-flex.align-items-center.text-decoration-none.pb-2
      img(src="assets/img/avatar/08.jpg", width="48", alt="Post author").rounded-circle
      h6.ps-3.mb-0 Guy Hawkins

Post preview (List)

<!-- 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"></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-muted 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-muted 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-muted 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>
// Post preview card horizontal (List view)
article.row.g-0.border-0
  a(href="#", style="background-image: url(assets/img/blog/list/03.jpg); min-height: 14rem").col-sm-5.bg-repeat-0.bg-size-cover.bg-position-center.rounded-5
  .col-sm-7
    .pt-4.pb-sm-4.ps-sm-4.pe-lg-4
      h3
        a(href="#") Destinations to inspire and restore resources
      p.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...
      .d-flex.flex-wrap.align-items-center.mt-n2
        a(href="#").nav-link.text-muted.fs-sm.fw-normal.p-0.mt-2.me-3
          | 8
          i.ai-share.fs-lg.ms-1
        a(href="#").nav-link.text-muted.fs-sm.fw-normal.d-flex.align-items-end.p-0.mt-2
          | 2
          i.ai-message.fs-lg.ms-1
        span.fs-xs.opacity-20.mt-2.mx-3 |
        span.fs-sm.text-muted.mt-2 16 hours ago
        span.fs-xs.opacity-20.mt-2.mx-3 |
        a(href="#").badge.text-nav.fs-xs.border.mt-2
          | Travel

Post preview (Simple)

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

Featured posts widget

<!-- 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-muted">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-muted">May 12, 2022</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-muted">June 10, 2022</span>
  </div>
</article>
// Featureed posts widget for sidebar area
h3.h4.pb-1 Trending posts:

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

// Item
article.position-relative.d-flex.align-items-center.mb-4
  img(src="assets/img/blog/sidebar/02.jpg", width="92", alt="Post image").rounded
  .ps-3
    h4.h6.mb-2
      a(href="#").stretched-link
        | A session with a psychologist
    span.fs-sm.text-muted May 12, 2022

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

Categories widget

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

Author widget style 1

Author image

Darlene Robertson

Duis consectetur quis enim iaculis eu sagittis posuere imperdiet

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

Author widget style 2

Author image

Darlene Robertson

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.

Share post:

<!-- 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">
            <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">
            <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">
            <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">
            <i class="ai-twitter"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
// Author card widget style 2
.border-top.border-bottom.py-4
  .d-flex.align-items-start.py-2
    img(src="assets/img/avatar/04.jpg", width="56", alt="Author image").d-block.rounded-circle.mb-3
    .d-md-flex.w-100.ps-4
      div(style="max-width: 26rem;")
        h3.h5.mb-2 Darlene Robertson
        p.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.
      .pt-4.pt-md-0.ps-md-4.ms-md-auto
        h3.h5 Share post:
        .d-flex
          a(href="#", data-bs-toggle="tooltip", data-bs-placement="bottom", title="Instagram").nav-link.p-2.me-2
            i.ai-instagram
          a(href="#", data-bs-toggle="tooltip", data-bs-placement="bottom", title="Facebook").nav-link.p-2.me-2
            i.ai-facebook
          a(href="#", data-bs-toggle="tooltip", data-bs-placement="bottom", title="Telegram").nav-link.p-2.me-2
            i.ai-telegram.fs-sm
          a(href="#", data-bs-toggle="tooltip", data-bs-placement="bottom", title="Twitter").nav-link.p-2
            i.ai-twitter

Post comments

Comment author
Jenny Wilson
2 days ago at 9:20

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

Comment author
Ralph Edwards
2 days ago at 11:45

@Jenny Wilson 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.

<!-- 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-muted">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-muted">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>
// Comment
.border-bottom.pt-2.pb-4.mb-4
  .d-flex.align-items-center.pb-1.mb-3
    img(src="assets/img/avatar/11.jpg", width="48", alt="Comment author").rounded-circle
    .ps-3
      h6.mb-0 Jenny Wilson
      span.fs-sm.text-muted 2 days ago at 9:20
  p.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
  button(type="button").nav-link.fs-sm.fw-semibold.px-0.py-2
    | Reply
    i.ai-redo.fs-xl.ms-2

  // Comment reply
  .card.card-body.border-0.bg-secondary.mt-4
    .d-flex.align-items-center.pb-1.mb-3
      img(src="assets/img/avatar/10.jpg", width="48", alt="Comment author").rounded-circle
      .ps-3
        h6.mb-0 Ralph Edwards
        span.fs-sm.text-muted 2 days ago at 11:45
    p.mb-0
      a(href="#").fw-bold.text-decoration-none
        | @Jenny Wilson
      |  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.