Cartzilla Buy now

Blog components

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

Cartzilla component

Post preview (List)

<!-- Post preview (List) -->
<article class="blog-list">
  <div class="blog-start-column">
    <div class="d-flex align-items-center fs-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="blog-end-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="fs-sm text-muted pe-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="fs-sm mb-2">
        <a class="blog-entry-meta-link text-nowrap" href="#">
          <i class="ci-message"></i>
          15
        </a>
      </div>
    </div>
    <p class="fs-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 fw-medium">[Read more]</a></p>
  </div>
</article>
// Post preview (List)
article.blog-list
  .blog-start-column
    .d-flex.align-items-center.fs-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
  .blog-end-column
    a(href="#").blog-entry-thumb.mb-3
      img(src="path-to-image", alt="Post")
    .d-flex.justify-content-between.mb-1
      .fs-sm.text-muted.pe-2.mb-2
        | in <a href="#" class="blog-entry-meta-link">Shopping</a>, <a href="#" class="blog-entry-meta-link">Personal finance</a>
      .fs-sm.mb-2
        a(href="#").blog-entry-meta-link.text-nowrap
          i.ci-message
          | 15
    p.fs-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 fw-medium">[Read more]</a>

Post preview (Grid)

<!-- 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="fs-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 me-2 mb-2" href="#">Shopping</a>
    <a class="btn-tag me-2 mb-2" href="#">Technology</a>
  </div>
  <div class="card-footer d-flex align-items-center fs-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="ms-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="ci-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.fs-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.me-2.mb-2(href="#") Shopping
    a.btn-tag.me-2.mb-2(href="#") Technology
  .card-footer.d-flex.align-items-center.fs-xs
    a(href="#").blog-entry-meta-link
      .blog-entry-author-ava
        img(src="path-to-image", alt="Emma Gallaher")
      | Emma Gallaher
    .ms-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.ci-message
        | 28

Featured post

<!-- Featured post -->
<article>
  <a class="blog-entry-thumb mb-3" href="#">
    <span class="blog-entry-meta-label fs-sm">
      <i class="ci-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 fs-sm text-nowrap ms-3 pt-1" href="#">
      <i class="ci-message"></i>
      13
    </a>
  </div>
  <div class="d-flex align-items-center fs-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="fs-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.fs-sm
      i.ci-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.fs-sm.text-nowrap.ms-3.pt-1
      i.ci-message
      | 13
  .d-flex.align-items-center.fs-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
    .fs-sm.text-muted
      | in <a href="#" class="blog-entry-meta-link">Lifestyle</a>, <a href="#" class="blog-entry-meta-link">Nutrition</a>
Top