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 font-size-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="media meta-link font-size-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Emma Brown"/>
<div class="media-body pl-2 ml-1 mt-n1">
by
<span class="font-weight-semibold ml-1">Emma Brown</span>
</div>
</a>
<div class="mt-3 text-right text-nowrap">
<a class="meta-link font-size-xs" href="#">
<i class="fe-message-square mr-1"></i>
6
</a>
<span class="meta-divider"></span>
<a class="meta-link font-size-xs" href="#">
<i class="fe-calendar mr-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 font-size-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="media meta-link font-size-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Charlie Welch"/>
<div class="media-body pl-2 ml-1 mt-n1">
by
<span class="font-weight-semibold ml-1">Charlie Welch</span>
</div>
</a>
<div class="mt-3 text-right text-nowrap">
<a class="meta-link font-size-xs" href="#">
<i class="fe-message-square mr-1"></i>
8
</a>
<span class="meta-divider"></span>
<a class="meta-link font-size-xs" href="#">
<i class="fe-calendar mr-1 mt-n1"></i>
Feb 15
</a>
</div>
</div>
</article>// Post preview (Grid) with image
article.card.card-hover
a(href="#").card-img-top
+image("path-to-image", "Post thumbnail")
.card-body
a(href="#").meta-link.font-size-sm.mb-2 Digital design
h2.h5.nav-heading.mb-4
a(href="#") Designers should always keep their users in mind
a(href="#").media.meta-link.font-size-sm.align-items-center.pt-3
+image("path-to-image", "Emma Brown")(width="36").rounded-circle
.media-body.pl-2.ml-1.mt-n1
| by
span.font-weight-semibold.ml-1 Emma Brown
.mt-3.text-right.text-nowrap
a(href="#").meta-link.font-size-xs
i.fe-message-square.mr-1
| 6
span.meta-divider
a(href="#").meta-link.font-size-xs
i.fe-calendar.mr-1.mt-n1
| Feb 19
// Post preview (Grid) no image
article.card.card-hover
.card-body
a(href="#").meta-link.font-size-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="#").media.meta-link.font-size-sm.align-items-center.pt-3
+image("path-to-image", "Charlie Welch")(width="36").rounded-circle
.media-body.pl-2.ml-1.mt-n1
| by
span.font-weight-semibold.ml-1 Charlie Welch
.mt-3.text-right.text-nowrap
a(href="#").meta-link.font-size-xs
i.fe-message-square.mr-1
| 8
span.meta-divider
a(href="#").meta-link.font-size-xs
i.fe-calendar.mr-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 font-size-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="media meta-link font-size-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Barbara Palson"/>
<div class="media-body pl-2 ml-1 mt-n1">
by
<span class="font-weight-semibold ml-1">Barbara Palson</span>
</div>
</a>
<div class="mt-3 text-right text-nowrap">
<a class="meta-link font-size-xs" href="#">
<i class="fe-message-square mr-1"></i>
4
</a>
<span class="meta-divider"></span>
<a class="meta-link font-size-xs" href="#">
<i class="fe-calendar mr-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 font-size-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="media meta-link font-size-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Emma Brown"/>
<div class="media-body pl-2 ml-1 mt-n1">
by
<span class="font-weight-semibold ml-1">Emma Brown</span>
</div>
</a>
<div class="mt-3 text-right text-nowrap">
<a class="meta-link font-size-xs" href="#">
<i class="fe-message-square mr-1"></i>
31
</a>
<span class="meta-divider"></span>
<a class="meta-link font-size-xs" href="#">
<i class="fe-calendar mr-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.font-size-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="#").media.meta-link.font-size-sm.align-items-center.pt-3
+image("path-to-image", "Barbara Palson")(width="36").rounded-circle
.media-body.pl-2.ml-1.mt-n1
| by
span.font-weight-semibold.ml-1 Barbara Palson
.mt-3.text-right.text-nowrap
a(href="#").meta-link.font-size-xs
i.fe-message-square.mr-1
| 4
span.meta-divider
a(href="#").meta-link.font-size-xs
i.fe-calendar.mr-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.font-size-sm.mb-2 Travel & Vacation
h2.h4.nav-heading.mb-4
a(href="#") Escape to mountains with only one backpack
a(href="#").media.meta-link.font-size-sm.align-items-center.pt-3
+image("path-to-image", "Emma Brown")(width="36").rounded-circle
.media-body.pl-2.ml-1.mt-n1
| by
span.font-weight-semibold.ml-1 Emma Brown
.mt-3.text-right.text-nowrap
a(href="#").meta-link.font-size-xs
i.fe-message-square.mr-1
| 31
span.meta-divider
a(href="#").meta-link.font-size-xs
i.fe-calendar.mr-1.mt-n1
| Dec 25
Related posts carousel
<!-- Related posts carousel -->
<div class="cs-carousel">
<div class="cs-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 font-size-sm mb-2" href="#">Technology</a>
<h2 class="h5 nav-heading mb-4">
<a href="#">How technology affect our decisions</a>
</h2>
<a class="media meta-link font-size-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Jessica Miller"/>
<div class="media-body pl-2 ml-1 mt-n1">by<span class="font-weight-semibold ml-1">Jessica Miller</span></div>
</a>
<div class="mt-3 text-right text-nowrap">
<a class="meta-link font-size-xs" href="#">
<i class="fe-message-square mr-1"></i>
3
</a>
<span class="meta-divider"></span>
<a class="meta-link font-size-xs" href="#">
<i class="fe-calendar mr-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 font-size-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="media meta-link font-size-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Daniel Adams"/>
<div class="media-body pl-2 ml-1 mt-n1">
by
<span class="font-weight-semibold ml-1">Daniel Adams</span>
</div>
</a>
<div class="mt-3 text-right text-nowrap">
<a class="meta-link font-size-xs" href="#">
<i class="fe-message-square mr-1"></i>
12
</a>
<span class="meta-divider"></span>
<a class="meta-link font-size-xs" href="#">
<i class="fe-calendar mr-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 font-size-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="media meta-link font-size-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Barbara Palson"/>
<div class="media-body pl-2 ml-1 mt-n1">
by
<span class="font-weight-semibold ml-1">Barbara Palson</span>
</div>
</a>
<div class="mt-3 text-right text-nowrap">
<a class="meta-link font-size-xs" href="#">
<i class="fe-message-square mr-1"></i>
5
</a>
<span class="meta-divider"></span>
<a class="meta-link font-size-xs" href="#">
<i class="fe-calendar mr-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 font-size-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="media meta-link font-size-sm align-items-center pt-3" href="#">
<img class="rounded-circle" width="36" src="path-to-image" alt="Charlie Welch"/>
<div class="media-body pl-2 ml-1 mt-n1">
by
<span class="font-weight-semibold ml-1">Charlie Welch</span>
</div>
</a>
<div class="mt-3 text-right text-nowrap">
<a class="meta-link font-size-xs" href="#">
<i class="fe-message-square mr-1"></i>
17
</a>
<span class="meta-divider"></span>
<a class="meta-link font-size-xs" href="#">
<i class="fe-calendar mr-1 mt-n1"></i>
Nov 08
</a>
</div>
</div>
</article>
</div>
</div>
</div>// Related posts carousel
.cs-carousel
.cs-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
+image("path-to-image", "Post thumbnail")
.card-body
a(href="#").meta-link.font-size-sm.mb-2 Technology
h2.h5.nav-heading.mb-4
a(href="#") How technology affect our decisions
a(href="#").media.meta-link.font-size-sm.align-items-center.pt-3
+image("path-to-image", "Jessica Miller")(width="36").rounded-circle
.media-body.pl-2.ml-1.mt-n1
| by
span.font-weight-semibold.ml-1 Jessica Miller
.mt-3.text-right.text-nowrap
a(href="#").meta-link.font-size-xs
i.fe-message-square.mr-1
| 3
span.meta-divider
a(href="#").meta-link.font-size-xs
i.fe-calendar.mr-1.mt-n1
| Feb 4
// Article
.pb-2
article.card.card-hover.mx-1
a(href="#").card-img-top
+image("path-to-image", "Post thumbnail")
.card-body
a(href="#").meta-link.font-size-sm.mb-2 Business
h2.h5.nav-heading.mb-4
a(href="#") Open space - new trend in office design
a(href="#").media.meta-link.font-size-sm.align-items-center.pt-3
+image("path-to-image", "Daniel Adams")(width="36").rounded-circle
.media-body.pl-2.ml-1.mt-n1
| by
span.font-weight-semibold.ml-1 Daniel Adams
.mt-3.text-right.text-nowrap
a(href="#").meta-link.font-size-xs
i.fe-message-square.mr-1
| 12
span.meta-divider
a(href="#").meta-link.font-size-xs
i.fe-calendar.mr-1.mt-n1
| Jan 10
// Article
.pb-2
article.card.card-hover.mx-1
a(href="#").card-img-top
+image("path-to-image", "Post thumbnail")
.card-body
a(href="#").meta-link.font-size-sm.mb-2 Business
h2.h5.nav-heading.mb-4
a(href="#") Business offices of Fortune 500 companies
a(href="#").media.meta-link.font-size-sm.align-items-center.pt-3
+image("path-to-image", "Barbara Palson")(width="36").rounded-circle
.media-body.pl-2.ml-1.mt-n1
| by
span.font-weight-semibold.ml-1 Barbara Palson
.mt-3.text-right.text-nowrap
a(href="#").meta-link.font-size-xs
i.fe-message-square.mr-1
| 5
span.meta-divider
a(href="#").meta-link.font-size-xs
i.fe-calendar.mr-1.mt-n1
| Nov 20
// Article
.pb-2
article.card.card-hover.mx-1
a(href="#").card-img-top
+image("path-to-image", "Post thumbnail")
.card-body
a(href="#").meta-link.font-size-sm.mb-2 Technology
h2.h5.nav-heading.mb-4
a(href="#") Payments made easy. How new Tech will affect E-Commerce?
a(href="#").media.meta-link.font-size-sm.align-items-center.pt-3
+image("path-to-image", "Charlie Welch")(width="36").rounded-circle
.media-body.pl-2.ml-1.mt-n1
| by
span.font-weight-semibold.ml-1 Charlie Welch
.mt-3.text-right.text-nowrap
a(href="#").meta-link.font-size-xs
i.fe-message-square.mr-1
| 17
span.meta-divider
a(href="#").meta-link.font-size-xs
i.fe-calendar.mr-1.mt-n1
| Nov 08
Post comments
<!-- Post comments -->
<div class="cs-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="media media-ie-fix align-items-center">
<img class="rounded-circle" width="42" src="path-to-image" alt="Barbara Palson"/>
<div class="media-body pl-2 ml-1">
<h4 class="font-size-sm mb-0">Barbara Palson</h4>
<span class="font-size-xs text-muted">3 days ago</span>
</div>
</div>
<a class="btn btn-outline-primary btn-sm" href="#">
<i class="fe-corner-up-left font-size-base mr-2 ml-n1"></i>
Reply
</a>
</div>
<!-- Comment reply -->
<div class="cs-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="media align-items-center">
<img class="rounded-circle" width="42" src="path-to-image" alt="Daniel Adams"/>
<div class="media-body pl-2 ml-1">
<h4 class="font-size-sm mb-0">Daniel Adams</h4>
<span class="font-size-xs text-muted">2 days ago</span>
</div>
</div>
</div>
</div>// Post comments
.cs-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
.media.media-ie-fix.align-items-center
+image("path-to-image", "Barbara Palson")(width="42").rounded-circle
.media-body.pl-2.ml-1
h4.font-size-sm.mb-0 Barbara Palson
span.font-size-xs.text-muted 3 days ago
a(href="#").btn.btn-outline-primary.btn-sm
i.fe-corner-up-left.font-size-base.mr-2.ml-n1
| Reply
// Comment reply
.cs-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.
.media.align-items-center
+image("path-to-image", "Daniel Adams")(width="42").rounded-circle
.media-body.pl-2.ml-1
h4.font-size-sm.mb-0 Daniel Adams
span.font-size-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