Createx Buy now

Blog components

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

Createx component

Post card: basic

<!-- Post preview: basic card -->
<article class="image-scale card border-0">
  <a class="image-inner card-header mb-3 p-0 border-0 rounded" href="#">
    <img src="path-to-image" alt="Blog card image">
  </a>
  <div class="card-body p-0">
    <ul class="nav nav-muted mb-2">
      <li class="nav-item me-2">
        <a class="nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
          SEO
        </a>
        <span class="text-border px-1">|</span>
      </li>
      <li class="nav-item me-2">
        <a class="nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
          <i class="ci-clock mt-n1 me-2 fs-base align-middle"></i>
          May 1, 2020
        </a>
        <span class="text-border px-1">|</span>
      </li>
      <li class="nav-item me-2">
        <a class="nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
          <i class="ci-profile mt-n1 me-2 fs-base align-middle"></i>
          By Shawn Edwards
        </a>
      </li>
    </ul>
    <h3 class="h5 mb-2 nav-dark">
      <a class="nav-link" href="#">The Best Practices to Optimize Your Website for Mobile.</a>
    </h3>
    <p class="mb-3">Pharetra, ullamcorper iaculis viverra parturient sed id sed. Convallis proin dignissim lacus, purus gravida...</p>
  </div>
  <div class="card-footer p-0 border-0">
    <div class="h6 mb-0">
      <a class="nav-link py-3" href="#">Read more</a>
      <i class="ci-arrow-right text-primary align-middle h5 mb-0 ms-2"></i>
    </div>
  </div>
</article>

Post card: alternative

<!-- Post preview: card alt -->
<article class="image-scale card shadow card-hover border-0">
  <a class="image-inner card-img-top" href="#">
    <img src="path-to-image" alt="Blog card image">
  </a>
  <div class="card-body">
    <h3 class="h5 mb-2 pb-1">
      <a class="nav-link" href="#">How to Build Climate Change-Resilient Infrastructure</a>
    </h3>
    <ul class="nav nav-muted mb-2 pb-1">
      <li class="nav-item me-2">
        <a class="nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
          Industry News
        </a>
        <span class="text-border px-1">|</span>
      </li>
      <li class="nav-item me-2">
        <a class="nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
          June 24, 2020
        </a>
        <span class="text-border px-1">|</span>
      </li>
      <li class="nav-item me-2">
        <a class="nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
          <i class="ci-chat mt-n1 me-2 fs-base align-middle"></i>
          4 comments
        </a>
      </li>
    </ul>
    <p class="card-text">Ipsum aliquet nisi, hendrerit rhoncus quam tortor, maecenas faucibus. Tincidunt aliquet sit vel, venenatis nulla. Integer bibendum turpis convallis...</p>
  </div>
</article>

Post card: image fade in

<!-- Post image fade in -->
<article class="image-fade card card-hover shadow" style="background-image: url(path-to-background-image);">
  <div class="image-inner d-flex flex-column justify-content-between h-100 p-3">
    <div class="card-header border-0 pb-0">
      <ul class="nav nav-muted mb-2 pb-1">
        <li class="nav-item me-2">
          <a class="inner-text nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
            Creativity
          </a>
          <span class="inner-text text-border px-1">|</span>
        </li>
        <li class="nav-item me-2">
          <a class="inner-text nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
            April 9, 2020
          </a>
        </li>
      </ul>
    </div>
    <div class="card-body pt-0" style="min-height: 15rem;">
      <h3 class="h5 mb-2 pb-1">
        <a class="inner-text nav-link" href="#">
          Definitive Guide to Make a Daily More Productive Working Flow.
        </a>
      </h3>
    </div>
    <div class="card-footer border-0">
      <div class="h6 mb-0 text-end">
        <a class="inner-text nav-link py-3" href="#">
          Read more
        </a>
        <i class="inner-text ci-arrow-right align-middle h5 mb-0 ms-2 card-text"></i>
      </div>
    </div>
  </div>
</article>

Post card: with badge

<!-- Basic post with badge -->
<article class="image-scale card border-0">
  <a class="image-inner card-header mb-3 p-0 border-0 rounded position-relative" href="#">
    <span class="badge bg-success badge-floating badge-floating-end p-2 fs-base fw-bold">
      Latest Post
    </span>
    <img src="path-to-image" alt="Blog card image">
  </a>
  <div class="card-body p-0">
    <ul class="nav nav-muted mb-2">
      <li class="nav-item me-2">
        <a class="nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
          SEO
        </a>
        <span class="text-border px-1">|</span>
      </li>
      <li class="nav-item me-2">
        <a class="nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
          <i class="ci-clock mt-n1 me-2 fs-base align-middle"></i>
          May 1, 2020
        </a>
        <span class="text-border px-1">|</span>
      </li>
      <li class="nav-item me-2">
        <a class="nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
          <i class="ci-profile mt-n1 me-2 fs-base align-middle"></i>
          By Shawn Edwards
        </a>
      </li>
    </ul>
    <h3 class="h5 mb-2 nav-dark">
      <a class="nav-link" href="#">
        The Best Practices to Optimize Your Website for Mobile.
      </a>
    </h3>
    <p class="mb-3">Pharetra, ullamcorper iaculis viverra parturient sed id sed. Convallis proin dignissim lacus, purus gravida...</p>
  </div>
  <div class="card-footer p-0 border-0">
    <div class="h6 mb-0">
      <a class="nav-link py-3" href="#">Read more</a>
      <i class="ci-arrow-right text-primary align-middle h5 mb-0 ms-2"></i>
    </div>
  </div>
</article>

<!-- Alt post with badge -->
<article class="image-scale card shadow card-hover border-0">
  <a class="image-inner card-img-top position-relative" href="#">
    <span class="badge bg-success badge-floating badge-floating-end p-2 fs-base fw-bold">
      Latest Post
    </span>
    <img src="path-to-image" alt="Blog card image">
  </a>
  <div class="card-body">
    <h3 class="h5 mb-2 pb-1">
      <a class="nav-link" href="#">
        How to Build Climate Change-Resilient Infrastructure
      </a>
    </h3>
    <ul class="nav nav-muted mb-2 pb-1">
      <li class="nav-item me-2">
        <a class="nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
          Industry News
        </a>
        <span class="text-border px-1">|</span>
      </li>
      <li class="nav-item me-2">
        <a class="nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
          June 24, 2020
        </a>
        <span class="text-border px-1">|</span>
      </li>
      <li class="nav-item me-2">
        <a class="nav-link d-inline-block me-2 p-0 fs-sm fw-normal" href="#">
          <i class="ci-chat mt-n1 me-2 fs-base align-middle"></i>
          4 comments
        </a>
      </li>
    </ul>
    <p class="card-text">Ipsum aliquet nisi, hendrerit rhoncus quam tortor, maecenas faucibus. Tincidunt aliquet sit vel, venenatis nulla. Integer bibendum turpis convallis...</p>
  </div>
</article>

Post comments

Devon Lane
July 15, 2020

Phasellus varius faucibus ultrices odio in. Massa neque dictum natoque ornare rutrum malesuada et phasellus. Viverra natoque nulla cras vel nisl proin senectus. Tortor sed eleifend ante tristique felis sed urna aliquet. Suspendisse fames egestas sed duis purus diam et.

Reply
Annette Black
1 day ago

@Devon Lane Egestas fermentum natoque sollicitudin mauris. Facilisis praesent urna sed rhoncus quis pharetra pellentesque erat sagittis.

Reply
Albert Flores
July 7, 2020

Ullamcorper nibh sed ac ipsum nunc imperdiet rhoncus. Quam donec habitant nibh sit consequat erat libero, tincidunt. Eros ut aliquam proin et duis. Mauris, egestas congue nibh dui a nulla.

Reply
<!-- Post comment -->
<div class="comment mb-5 pb-2">
  <div class="row">
    <div class="col-lg-2 col-sm-3 mb-sm-0 mb-3">
      <div class="mb-2 fs-lg text-dark fw-bold">Annette Black</div>
      <span class="fs-sm text-muted">1 day ago</span>
    </div>
    <div class="col">
      <p class="mb-3">
        <a href="#" class="fw-bold text-decoration-none">@Devon Lane</a> Egestas fermentum natoque sollicitudin mauris. Facilisis praesent urna sed rhoncus quis pharetra pellentesque erat sagittis.
      </p>
      <div class="nav-muted">
        <a class="nav-link p-0" href="#">
          <i class="ci-comment align-middle me-2"></i>
          Reply
        </a>
      </div>
    </div>
  </div>
</div>
Top