Skip to main content

Block 12 - on 2 columns

<!--Block start-->
<div class="block-area">
  <!--block title-->
  <div class="block-title-6">
    <h4 class="h5 border-primary">
      <span class="bg-primary text-white">Most read</span>
    </h4>
  </div>
  <!--start post-->
  <article class="card card-full hover-a mb-module">
    <div class="row">
      <div class="col-9">
        <div class="card-body pt-0">
          <!--title-->
          <h2 class="card-title h5 h4-sm h3-lg">
            <a href="#">How Does Agriculture Affect Vulnerable Insect-Eating Birds?</a>
          </h2>
          <!--content text-->
          <p class="card-text mb-2 d-none d-lg-block">The model is talking about booking her latest gig, modeling WordPress underwear in the brand latest Perfectly Fit campaign.... </p>
          <!-- author, date & comments -->
          <div class="card-text text-muted small">
            <span class="d-none d-sm-inline me-1">
              <a class="fw-bold" href="#">John Doe</a>
            </span>
            <time datetime="2019-10-21">October 21, 2018</time>
            <span title="5 comment" class="ms-1">
              <span class="icon-comments"></span> 5 Comment
            </span>
          </div>
        </div>
      </div>
      <!--thumbnail-->
      <div class="col-3 ps-2 ps-md-0">
        <div class="ratio_180-123 image-wrapper">
          <a href="#">
            <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/180x123/img1.jpg" alt="Image description">
          </a>
        </div>
      </div>
    </div>
  </article>
  <!--start post-->
  <article class="card card-full hover-a mb-module">
    <div class="row">
      <div class="col-9">
        <div class="card-body pt-0">
          <!--title-->
          <h2 class="card-title h5 h4-sm h3-lg">
            <a href="#">Color Vision Makes Birds of Prey Successful Hunters</a>
          </h2>
          <!--content text-->
          <p class="card-text mb-2 d-none d-lg-block">The model is talking about booking her latest gig, modeling WordPress underwear in the brand latest Perfectly Fit campaign.... </p>
          <!-- author, date & comments -->
          <div class="card-text text-muted small">
            <span class="d-none d-sm-inline me-1">
              <a class="fw-bold" href="#">John Doe</a>
            </span>
            <time datetime="2019-10-21">October 21, 2018</time>
            <span title="5 comment" class="ms-1">
              <span class="icon-comments"></span> 5 Comment
            </span>
          </div>
        </div>
      </div>
      <!--thumbnail-->
      <div class="col-3 ps-2 ps-md-0">
        <div class="ratio_180-123 image-wrapper">
          <a href="#">
            <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/180x123/img2.jpg" alt="Image description">
          </a>
        </div>
      </div>
    </div>
  </article>
  <!--start post-->
  <article class="card card-full hover-a mb-module">
    <div class="row">
      <div class="col-9">
        <div class="card-body pt-0">
          <!--title-->
          <h2 class="card-title h5 h4-sm h3-lg">
            <a href="#">Tree Swallow Study: Stressful Events Have Long-Term Health Impacts</a>
          </h2>
          <!--content text-->
          <p class="card-text mb-2 d-none d-lg-block">The model is talking about booking her latest gig, modeling WordPress underwear in the brand latest Perfectly Fit campaign.... </p>
          <!-- author, date & comments -->
          <div class="card-text text-muted small">
            <span class="d-none d-sm-inline me-1">
              <a class="fw-bold" href="#">John Doe</a>
            </span>
            <time datetime="2019-10-21">October 21, 2018</time>
            <span title="5 comment" class="ms-1">
              <span class="icon-comments"></span> 5 Comment
            </span>
          </div>
        </div>
      </div>
      <!--thumbnail-->
      <div class="col-3 ps-2 ps-md-0">
        <div class="ratio_180-123 image-wrapper">
          <a href="#">
            <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/180x123/img3.jpg" alt="Image description">
          </a>
        </div>
      </div>
    </div>
  </article>
  <!--end block content-->
  <div class="gap-0"></div>
</div>
<!--End Block-->

Block 12 with custom color

This block component is same like block content 12, just add block color in block-area classes

<!-- Block start -->
<div class="block-area block-danger">
....
....
</div>
<!--End Block-->
<!-- block start -->
<div class="block-area">
  <!--block title-->
  <div class="block-title-6">
    <h4 class="h5 border-primary">
      <span class="bg-primary text-white">Most read</span>
    </h4>
  </div>
  <!--start post-->
  <article class="card card-full hover-a mb-module">
    <div class="row">
      <div class="col-9">
        <div class="card-body pt-0">
          <!--title-->
          <h2 class="card-title h5 h4-sm h6-md">
            <a href="#">How Does Agriculture Affect Vulnerable Insect-Eating Birds?</a>
          </h2>
        </div>
      </div>
      <!--thumbnail-->
      <div class="col-3 ps-2 ps-md-0">
        <div class="ratio_180-123 image-wrapper">
          <a href="#">
            <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/180x123/img1.jpg" alt="Image description">
          </a>
        </div>
      </div>
    </div>
  </article>
  <!--start post-->
  <article class="card card-full hover-a mb-module">
    <div class="row">
      <div class="col-9">
        <div class="card-body pt-0">
          <!--title-->
          <h2 class="card-title h5 h4-sm h6-md">
            <a href="#">Color Vision Makes Birds of Prey Successful Hunters</a>
          </h2>
        </div>
      </div>
      <!--thumbnail-->
      <div class="col-3 ps-2 ps-md-0">
        <div class="ratio_180-123 image-wrapper">
          <a href="#">
            <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/180x123/img2.jpg" alt="Image description">
          </a>
        </div>
      </div>
    </div>
  </article>
  <!--start post-->
  <article class="card card-full hover-a mb-module">
    <div class="row">
      <div class="col-9">
        <div class="card-body pt-0">
          <!--title-->
          <h2 class="card-title h5 h4-sm h6-md">
            <a href="#">Tree Swallow Study: Stressful Events Have Long-Term Health Impacts</a>
          </h2>
        </div>
      </div>
      <!--thumbnail-->
      <div class="col-3 ps-2 ps-md-0">
        <div class="ratio_180-123 image-wrapper">
          <a href="#">
            <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/180x123/img3.jpg" alt="Image description">
          </a>
        </div>
      </div>
    </div>
  </article>
  <!--start post-->
  <article class="card card-full hover-a mb-module">
    <div class="row">
      <div class="col-9">
        <div class="card-body pt-0">
          <!--title-->
          <h2 class="card-title h5 h4-sm h6-md">
            <a href="#">How Does Agriculture Affect Vulnerable Insect-Eating Birds?</a>
          </h2>
        </div>
      </div>
      <!--thumbnail-->
      <div class="col-3 ps-2 ps-md-0">
        <div class="ratio_180-123 image-wrapper">
          <a href="#">
            <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/180x123/img1.jpg" alt="Image description">
          </a>
        </div>
      </div>
    </div>
  </article>
  <!--start post-->
  <article class="card card-full hover-a mb-module">
    <div class="row">
      <div class="col-9">
        <div class="card-body pt-0">
          <!--title-->
          <h2 class="card-title h5 h4-sm h6-md">
            <a href="#">Color Vision Makes Birds of Prey Successful Hunters</a>
          </h2>
        </div>
      </div>
      <!--thumbnail-->
      <div class="col-3 ps-2 ps-md-0">
        <div class="ratio_180-123 image-wrapper">
          <a href="#">
            <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/180x123/img2.jpg" alt="Image description">
          </a>
        </div>
      </div>
    </div>
  </article>
  <!--end block content-->
  <div class="gap-0"></div>
</div>
<!-- end block -->