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 (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>

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>
Top