Buy now
Blog components
Components that are related to the blog / news section of the website.
Around component
Post preview (Grid)
<!-- Post preview (Grid) with image -->
<article class="card card-hover">
<a class="card-img-top" href="#">
<img src="path-to-image" alt="Post thumbnail"/>
</a>
<div class="card-body">
<a class="meta-link fs-sm mb-2" href="#">Digital design</a>
<h2 class="h5 nav-heading mb-4">
<a href="#">Designers should always keep their users in mind</a>
</h2>
<a class="d-flex meta-link fs-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Emma Brown"/>
<div class="ps-2 ms-1 mt-n1">
by
<span class="fw-semibold ms-1">Emma Brown</span>
</div>
</a>
<div class="mt-3 text-end text-nowrap">
<a class="meta-link fs-xs" href="#">
<i class="ai-message-square me-1"></i>
6
</a>
<span class="meta-divider"></span>
<a class="meta-link fs-xs" href="#">
<i class="ai-calendar me-1 mt-n1"></i>
Feb 19
</a>
</div>
</div>
</article>
<!-- Post preview (Grid) no image -->
<article class="card card-hover">
<div class="card-body">
<a class="meta-link fs-sm mb-2" href="#">Brand strategy</a>
<h2 class="h5 nav-heading mb-4">
<a href="#">Simple steps to an effective brand strategy. Real life examples</a>
</h2>
<a class="d-flex meta-link fs-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Charlie Welch"/>
<div class="ps-2 ms-1 mt-n1">
by
<span class="fw-semibold ms-1">Charlie Welch</span>
</div>
</a>
<div class="mt-3 text-end text-nowrap">
<a class="meta-link fs-xs" href="#">
<i class="ai-message-square me-1"></i>
8
</a>
<span class="meta-divider"></span>
<a class="meta-link fs-xs" href="#">
<i class="ai-calendar me-1 mt-n1"></i>
Feb 15
</a>
</div>
</div>
</article>// Post preview (Grid) with image
article.card.card-hover
a(href="#").card-img-top
img(src="path-to-image" alt="Post thumbnail")
.card-body
a(href="#").meta-link.fs-sm.mb-2 Digital design
h2.h5.nav-heading.mb-4
a(href="#") Designers should always keep their users in mind
a(href="#").d-flex.meta-link.fs-sm.align-items-center.pt-3
img(src="path-to-image", alt="Emma Brown", width="36").rounded-circle
.ps-2.ms-1.mt-n1
| by
span.fw-semibold.ms-1 Emma Brown
.mt-3.text-end.text-nowrap
a(href="#").meta-link.fs-xs
i.ai-message-square.me-1
| 6
span.meta-divider
a(href="#").meta-link.fs-xs
i.ai-calendar.me-1.mt-n1
| Feb 19
// Post preview (Grid) no image
article.card.card-hover
.card-body
a(href="#").meta-link.fs-sm.mb-2 Brand strategy
h2.h5.nav-heading.mb-4
a(href="#") Simple steps to an effective brand strategy. Real life examples
a(href="#").d-flex.meta-link.fs-sm.align-items-center.pt-3
img(src="path-to-image", alt="Charlie Welch", width="36").rounded-circle
.ps-2.ms-1.mt-n1
| by
span.fw-semibold.ms-1 Charlie Welch
.mt-3.text-end.text-nowrap
a(href="#").meta-link.fs-xs
i.ai-message-square.me-1
| 8
span.meta-divider
a(href="#").meta-link.fs-xs
i.ai-calendar.me-1.mt-n1
| Feb 15
Post preview (List)
<!-- Post preview (List): Image on the left -->
<article class="card card-horizontal card-hover">
<a class="card-img-top" href="#" style="background-image: url(path-to-image);"></a>
<div class="card-body">
<a class="meta-link fs-sm mb-2" href="#">Technology</a>
<h2 class="h4 nav-heading mb-4">
<a href="#">Payments made easy. How new Tech will affect E-Commerce industry?</a>
</h2>
<a class="d-flex meta-link fs-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Barbara Palson"/>
<div class="ps-2 ms-1 mt-n1">
by
<span class="fw-semibold ms-1">Barbara Palson</span>
</div>
</a>
<div class="mt-3 text-right text-nowrap">
<a class="meta-link fs-xs" href="#">
<i class="ai-message-square me-1"></i>
4
</a>
<span class="meta-divider"></span>
<a class="meta-link fs-xs" href="#">
<i class="ai-calendar me-1 mt-n1"></i>
Feb 12
</a>
</div>
</div>
</article>
<!-- Post preview (List): Image on the right -->
<article class="card card-horizontal card-hover">
<a class="card-img-top order-sm-2" href="#" style="background-image: url(path-to-image);"></a>
<div class="card-body order-sm-1">
<a class="meta-link fs-sm mb-2" href="#">Travel & Vacation</a>
<h2 class="h4 nav-heading mb-4">
<a href="#">Escape to mountains with only one backpack</a>
</h2>
<a class="d-flex meta-link fs-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Emma Brown"/>
<div class="ps-2 ms-1 mt-n1">
by
<span class="fw-semibold ms-1">Emma Brown</span>
</div>
</a>
<div class="mt-3 text-right text-nowrap">
<a class="meta-link fs-xs" href="#">
<i class="ai-message-square me-1"></i>
31
</a>
<span class="meta-divider"></span>
<a class="meta-link fs-xs" href="#">
<i class="ai-calendar me-1 mt-n1"></i>
Dec 25
</a>
</div>
</div>
</article>// Post preview (List): Image on the left
article.card.card-horizontal.card-hover
a(href="#", style="background-image: url(path-to-image);").card-img-top
.card-body
a(href="#").meta-link.fs-sm.mb-2 Technology
h2.h4.nav-heading.mb-4
a(href="#") Payments made easy. How new Tech will affect E-Commerce industry?
a(href="#").d-flex.meta-link.fs-sm.align-items-center.pt-3
+image("path-to-image", "Barbara Palson")(width="36").rounded-circle
.ps-2.ms-1.mt-n1
| by
span.fw-semibold.ms-1 Barbara Palson
.mt-3.text-right.text-nowrap
a(href="#").meta-link.fs-xs
i.ai-message-square.me-1
| 4
span.meta-divider
a(href="#").meta-link.fs-xs
i.ai-calendar.me-1.mt-n1
| Feb 12
// Post preview (List): Image on the right
article.card.card-horizontal.card-hover
a(href="#", style="background-image: url(path-to-image);").card-img-top.order-sm-2
.card-body.order-sm-1
a(href="#").meta-link.fs-sm.mb-2 Travel & Vacation
h2.h4.nav-heading.mb-4
a(href="#") Escape to mountains with only one backpack
a(href="#").d-flex.meta-link.fs-sm.align-items-center.pt-3
+image("path-to-image", "Emma Brown")(width="36").rounded-circle
.ps-2.ms-1.mt-n1
| by
span.fw-semibold.ms-1 Emma Brown
.mt-3.text-right.text-nowrap
a(href="#").meta-link.fs-xs
i.ai-message-square.me-1
| 31
span.meta-divider
a(href="#").meta-link.fs-xs
i.ai-calendar.me-1.mt-n1
| Dec 25
Related posts carousel
<!-- Related posts carousel -->
<div class="tns-carousel-wrapper">
<div class="tns-carousel-inner" data-carousel-options='{"items": 2, "controls": false, "autoHeight": true, "responsive": {"0":{"items":1, "gutter": 16},"576":{"items":2, "gutter": 16},"900":{"items":3, "gutter": 16}, "1100":{"items":3, "gutter": 23}}}'>
<!-- Article-->
<div class="pb-2">
<article class="card card-hover mx-1">
<a class="card-img-top" href="#">
<img src="path-to-image" alt="Post thumbnail"/>
</a>
<div class="card-body">
<a class="meta-link fs-sm mb-2" href="#">Technology</a>
<h2 class="h5 nav-heading mb-4">
<a href="#">How technology affect our decisions</a>
</h2>
<a class="d-flex meta-link fs-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Jessica Miller"/>
<div class="ps-2 ms-1 mt-n1">by<span class="fw-semibold ms-1">Jessica Miller</span></div>
</a>
<div class="mt-3 text-end text-nowrap">
<a class="meta-link fs-xs" href="#">
<i class="ai-message-square me-1"></i>
3
</a>
<span class="meta-divider"></span>
<a class="meta-link fs-xs" href="#">
<i class="ai-calendar me-1 mt-n1"></i>
Feb 4
</a>
</div>
</div>
</article>
</div>
<!-- Article-->
<div class="pb-2">
<article class="card card-hover mx-1">
<a class="card-img-top" href="#">
<img src="path-to-image" alt="Post thumbnail"/>
</a>
<div class="card-body">
<a class="meta-link fs-sm mb-2" href="#">Business</a>
<h2 class="h5 nav-heading mb-4">
<a href="#">Open space - new trend in office design</a>
</h2>
<a class="d-flex meta-link fs-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Daniel Adams"/>
<div class="ps-2 ms-1 mt-n1">
by
<span class="fw-semibold ms-1">Daniel Adams</span>
</div>
</a>
<div class="mt-3 text-end text-nowrap">
<a class="meta-link fs-xs" href="#">
<i class="ai-message-square me-1"></i>
12
</a>
<span class="meta-divider"></span>
<a class="meta-link fs-xs" href="#">
<i class="ai-calendar me-1 mt-n1"></i>
Jan 10
</a>
</div>
</div>
</article>
</div>
<!-- Article-->
<div class="pb-2">
<article class="card card-hover mx-1">
<a class="card-img-top" href="#">
<img src="path-to-image" alt="Post thumbnail"/>
</a>
<div class="card-body">
<a class="meta-link fs-sm mb-2" href="#">Business</a>
<h2 class="h5 nav-heading mb-4">
<a href="#">Business offices of Fortune 500 companies</a>
</h2>
<a class="d-flex meta-link fs-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Barbara Palson"/>
<div class="ps-2 ms-1 mt-n1">
by
<span class="fw-semibold ms-1">Barbara Palson</span>
</div>
</a>
<div class="mt-3 text-end text-nowrap">
<a class="meta-link fs-xs" href="#">
<i class="ai-message-square me-1"></i>
5
</a>
<span class="meta-divider"></span>
<a class="meta-link fs-xs" href="#">
<i class="ai-calendar me-1 mt-n1"></i>
Nov 20
</a>
</div>
</div>
</article>
</div>
<!-- Article-->
<div class="pb-2">
<article class="card card-hover mx-1">
<a class="card-img-top" href="#">
<img src="path-to-image" alt="Post thumbnail"/>
</a>
<div class="card-body">
<a class="meta-link fs-sm mb-2" href="#">Technology</a>
<h2 class="h5 nav-heading mb-4">
<a href="#">Payments made easy. How new Tech will affect E-Commerce?</a>
</h2>
<a class="d-flex meta-link fs-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Charlie Welch"/>
<div class="ps-2 ms-1 mt-n1">
by
<span class="fw-semibold ms-1">Charlie Welch</span>
</div>
</a>
<div class="mt-3 text-end text-nowrap">
<a class="meta-link fs-xs" href="#">
<i class="ai-message-square me-1"></i>
17
</a>
<span class="meta-divider"></span>
<a class="meta-link fs-xs" href="#">
<i class="ai-calendar me-1 mt-n1"></i>
Nov 08
</a>
</div>
</div>
</article>
</div>
</div>
</div>// Related posts carousel
.tns-carousel-wrapper
.tns-carousel-inner(data-carousel-options='{"items": 2, "controls": false, "autoHeight": true, "responsive": {"0":{"items":1, "gutter": 16},"576":{"items":2, "gutter": 16},"900":{"items":3, "gutter": 16}, "1100":{"items":3, "gutter": 23}}}')
// Article
.pb-2
article.card.card-hover.mx-1
a(href="#").card-img-top
img(src="path-to-image", alt="Post thumbnail")
.card-body
a(href="#").meta-link.fs-sm.mb-2 Technology
h2.h5.nav-heading.mb-4
a(href="#") How technology affect our decisions
a(href="#").d-flex.meta-link.fs-sm.align-items-center.pt-3
img(src="path-to-image", alt"Jessica Miller", width="36").rounded-circle
.ps-2.ms-1.mt-n1
| by
span.fw-semibold.ms-1 Jessica Miller
.mt-3.text-end.text-nowrap
a(href="#").meta-link.fs-xs
i.ai-message-square.me-1
| 3
span.meta-divider
a(href="#").meta-link.fs-xs
i.ai-calendar.me-1.mt-n1
| Feb 4
// Article
.pb-2
article.card.card-hover.mx-1
a(href="#").card-img-top
img(src="path-to-image", alt="Post thumbnail")
.card-body
a(href="#").meta-link.fs-sm.mb-2 Business
h2.h5.nav-heading.mb-4
a(href="#") Open space - new trend in office design
a(href="#").d-flex.meta-link.fs-sm.align-items-center.pt-3
img(src="path-to-image", alt="Daniel Adams", width="36").rounded-circle
.ps-2.ms-1.mt-n1
| by
span.fw-semibold.ms-1 Daniel Adams
.mt-3.text-end.text-nowrap
a(href="#").meta-link.fs-xs
i.ai-message-square.me-1
| 12
span.meta-divider
a(href="#").meta-link.fs-xs
i.ai-calendar.me-1.mt-n1
| Jan 10
// Article
.pb-2
article.card.card-hover.mx-1
a(href="#").card-img-top
img(src="path-to-image", alt="Post thumbnail")
.card-body
a(href="#").meta-link.fs-sm.mb-2 Business
h2.h5.nav-heading.mb-4
a(href="#") Business offices of Fortune 500 companies
a(href="#").d-flex.meta-link.fs-sm.align-items-center.pt-3
img(src="path-to-image", alt="Barbara Palson", width="36").rounded-circle
.ps-2.ms-1.mt-n1
| by
span.fw-semibold.ms-1 Barbara Palson
.mt-3.text-end.text-nowrap
a(href="#").meta-link.fs-xs
i.ai-message-square.me-1
| 5
span.meta-divider
a(href="#").meta-link.fs-xs
i.ai-calendar.me-1.mt-n1
| Nov 20
// Article
.pb-2
article.card.card-hover.mx-1
a(href="#").card-img-top
img(src="path-to-image", alt="Post thumbnail")
.card-body
a(href="#").meta-link.fs-sm.mb-2 Technology
h2.h5.nav-heading.mb-4
a(href="#") Payments made easy. How new Tech will affect E-Commerce?
a(href="#").d-flex.meta-link.fs-sm.align-items-center.pt-3
img(src="path-to-image", alt="Charlie Welch", width="36").rounded-circle
.ps-2.ms-1.mt-n1
| by
span.fw-semibold.ms-1 Charlie Welch
.mt-3.text-end.text-nowrap
a(href="#").meta-link.fs-xs
i.ai-message-square.me-1
| 17
span.meta-divider
a(href="#").meta-link.fs-xs
i.ai-calendar.me-1.mt-n1
| Nov 08
Post comments
<!-- Post comments -->
<div class="comment">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat cumque nihil impedit quo minus. Duis aute irure dolor in reprehenderit in voluptate.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<img class="rounded-circle" width="42" src="path-to-image" alt="Barbara Palson"/>
<div class="ps-2 ms-1">
<h4 class="fs-sm mb-0">Barbara Palson</h4>
<span class="fs-xs text-muted">3 days ago</span>
</div>
</div>
<a class="btn btn-outline-primary btn-sm" href="#">
<i class="ai-corner-up-left fs-base me-2 ms-n1"></i>
Reply
</a>
</div>
<!-- Comment reply -->
<div class="comment">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat cumque nihil impedit quo minus. Duis aute irure dolor in reprehenderit in voluptate.</p>
<div class="d-flex align-items-center">
<img class="rounded-circle" width="42" src="path-to-image" alt="Daniel Adams"/>
<div class="ps-2 ms-1">
<h4 class="fs-sm mb-0">Daniel Adams</h4>
<span class="fs-xs text-muted">2 days ago</span>
</div>
</div>
</div>
</div>// Post comments
.comment
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat cumque nihil impedit quo minus. Duis aute irure dolor in reprehenderit in voluptate.
.d-flex.justify-content-between.align-items-center
.d-flex.align-items-center
img(src="path-to-image", alt="Barbara Palson", width="42").rounded-circle
.ps-2.ms-1
h4.fs-sm.mb-0 Barbara Palson
span.fs-xs.text-muted 3 days ago
a(href="#").btn.btn-outline-primary.btn-sm
i.ai-corner-up-left.fs-base.me-2.ms-n1
| Reply
// Comment reply
.comment
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat cumque nihil impedit quo minus. Duis aute irure dolor in reprehenderit in voluptate.
.d-flex.align-items-center
img(src="path-to-image", alt="Daniel Adams", width="42").rounded-circle
.ps-2.ms-1
h4.fs-sm.mb-0 Daniel Adams
span.fs-xs.text-muted 2 days ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat cumque nihil impedit quo minus. Duis aute irure dolor in reprehenderit in voluptate.
Barbara Palson
3 days agoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat cumque nihil impedit quo minus. Duis aute irure dolor in reprehenderit in voluptate.
Daniel Adams
2 days ago