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… [Read more]
Blog components
Components that are related to the blog / news module of the website.
Pickbazar component
Post preview (List)
<!-- Post preview (List) -->
<article class="blog-list">
<div class="left-column">
<div class="d-flex align-items-center font-size-sm pb-2 mb-1">
<a class="blog-entry-meta-link" href="#">
<div class="blog-entry-author-ava">
<img src="path-to-image" alt="Paul Woodred">
</div>
Paul Woodred
</a>
<span class="blog-entry-meta-divider"></span>
<a class="blog-entry-meta-link" href="#">Jul 6</a>
</div>
<h2 class="h5 blog-entry-title"><a href="#">Shopping Tips. Places Where to Buy Cheap</a></h2>
</div>
<div class="right-column">
<a class="blog-entry-thumb mb-3" href="#"><img src="path-to-image" alt="Post"></a>
<div class="d-flex justify-content-between mb-1">
<div class="font-size-sm text-muted pr-2 mb-2">
in <a href="#" class="blog-entry-meta-link">Shopping</a>, <a href="#" class="blog-entry-meta-link">Personal finance</a>
</div>
<div class="font-size-sm mb-2">
<a class="blog-entry-meta-link text-nowrap" href="#">
<i class="czi-message"></i>
15
</a>
</div>
</div>
<p class="font-size-sm">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… <a href="#" class="blog-entry-meta-link font-weight-medium">[Read more]</a></p>
</div>
</article>
// Post preview (List)
article.blog-list
.left-column
.d-flex.align-items-center.font-size-sm.pb-2.mb-1
a(href="#").blog-entry-meta-link
.blog-entry-author-ava
img(src="path-to-image", alt="Paul Woodred")
| Paul Woodred
span.blog-entry-meta-divider
a(href="#").blog-entry-meta-link Jul 6
h2.h5.blog-entry-title
a(href="#") Shopping Tips. Places Where to Buy Cheap
.right-column
a(href="#").blog-entry-thumb.mb-3
img(src="path-to-image", alt="Post")
.d-flex.justify-content-between.mb-1
.font-size-sm.text-muted.pr-2.mb-2
| in <a href="#" class="blog-entry-meta-link">Shopping</a>, <a href="#" class="blog-entry-meta-link">Personal finance</a>
.font-size-sm.mb-2
a(href="#").blog-entry-meta-link.text-nowrap
i.czi-message
| 15
p.font-size-sm 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… <a href="#" class="blog-entry-meta-link font-weight-medium">[Read more]</a>
Post preview (Grid)
Payments Made Easy. How New Technology will Affect E-Commerce Industry Worldwide?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim...
ShoppingTechnology<!-- Post preview (Grid) -->
<article class="card">
<a class="blog-entry-thumb" href="#">
<img class="card-img-top" src="path-to-image" alt="Post">
</a>
<div class="card-body">
<h2 class="h6 blog-entry-title">
<a href="#">Payments Made Easy. How New Technology will Affect E-Commerce Industry Worldwide?</a>
</h2>
<p class="font-size-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim...</p>
<a class="btn-tag mr-2 mb-2" href="#">Shopping</a>
<a class="btn-tag mr-2 mb-2" href="#">Technology</a>
</div>
<div class="card-footer d-flex align-items-center font-size-xs">
<a class="blog-entry-meta-link" href="#">
<div class="blog-entry-author-ava">
<img src="path-to-image" alt="Emma Gallaher">
</div>
Emma Gallaher
</a>
<div class="ml-auto text-nowrap">
<a class="blog-entry-meta-link text-nowrap" href="#">May 13</a>
<span class="blog-entry-meta-divider mx-2"></span>
<a class="blog-entry-meta-link text-nowrap" href="#">
<i class="czi-message"></i>
28
</a>
</div>
</div>
</article>
// Post preview (Grid)
article.card
a(href="#").blog-entry-thumb
img(src="path-to-image", alt="Post").card-img-top
.card-body
h2.h6.blog-entry-title
a(href="#") Payments Made Easy. How New Technology will Affect E-Commerce Industry Worldwide?
p.font-size-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim...
a.btn-tag.mr-2.mb-2(href="#") Shopping
a.btn-tag.mr-2.mb-2(href="#") Technology
.card-footer.d-flex.align-items-center.font-size-xs
a(href="#").blog-entry-meta-link
.blog-entry-author-ava
img(src="path-to-image", alt="Emma Gallaher")
| Emma Gallaher
.ml-auto.text-nowrap
a.blog-entry-meta-link.text-nowrap(href="#") May 13
span.blog-entry-meta-divider.mx-2
a.blog-entry-meta-link.text-nowrap(href="#")
i.czi-message
| 28
Featured post
<!-- Featured post -->
<article>
<a class="blog-entry-thumb mb-3" href="#">
<span class="blog-entry-meta-label font-size-sm">
<i class="czi-time"></i>
Sep 10
</span>
<img src="path-to-image" alt="Featured post">
</a>
<div class="d-flex justify-content-between mb-2 pt-1">
<h2 class="h5 blog-entry-title mb-0">
<a href="#">Healthy Food - New Way of Living</a>
</h2>
<a class="blog-entry-meta-link font-size-sm text-nowrap ml-3 pt-1" href="#">
<i class="czi-message"></i>
13
</a>
</div>
<div class="d-flex align-items-center font-size-sm">
<a class="blog-entry-meta-link" href="#">
<div class="blog-entry-author-ava">
<img src="path-to-image" alt="Olivia Reyes">
</div>
Olivia Reyes
</a>
<span class="blog-entry-meta-divider"></span>
<div class="font-size-sm text-muted">
in <a href="#" class="blog-entry-meta-link">Lifestyle</a>, <a href="#" class="blog-entry-meta-link">Nutrition</a>
</div>
</div>
</article>
// Featured post
article
a(href="#").blog-entry-thumb.mb-3
span.blog-entry-meta-label.font-size-sm
i.czi-time
| Sep 10
img(src="path-to-image", alt="Featured post")
.d-flex.justify-content-between.mb-2.pt-1
h2.h5.blog-entry-title.mb-0
a(href="#") Healthy Food - New Way of Living
a(href="#").blog-entry-meta-link.font-size-sm.text-nowrap.ml-3.pt-1
i.czi-message
| 13
.d-flex.align-items-center.font-size-sm
a(href="#").blog-entry-meta-link
.blog-entry-author-ava
img(src="path-to-image", alt="Olivia Reyes")
| Olivia Reyes
span.blog-entry-meta-divider
.font-size-sm.text-muted
| in <a href="#" class="blog-entry-meta-link">Lifestyle</a>, <a href="#" class="blog-entry-meta-link">Nutrition</a>