Skip to main content

Block 14 - 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">International</span>
                      </h4>
                    </div>
                    <!--post start-->
                    <div class="big-post">
                      <article class="card card-full hover-a mb-4">
                        <div class="row">
                          <!--thumbnail-->
                          <div class="col-lg-6">
                            <div class="ratio_360-202 image-wrapper">
                              <a href="#">
                                <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img8.jpg" alt="Image description">
                              </a>
                            </div>
                          </div>
                          <div class="col-lg-6">
                            <div class="card-body pt-3 pt-lg-0">
                              <!--title-->
                              <h2 class="card-title h1-sm h3-lg">
                                <a href="#">Leica D-Lux 7 compact camera with 17MP four-thirds sensor</a>
                              </h2>
                              <!-- author, date & comments -->
                              <div class="card-text mb-2 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">Oct 21, 2019</time>
                                <span title="5 comment" class="float-end">
                                  <span class="icon-comments"></span> 5
                                </span>
                              </div>
                              <!--description-->
                              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content...</p>
                            </div>
                          </div>
                        </div>
                      </article>
                    </div>
                    <!--Start post list-->
                    <div class="row">
                      <!-- post start -->
                      <article class="col-6 col-sm-4">
                        <div class="card card-full hover-a mb-4">
                          <!--thumbnail-->
                          <div class="ratio_360-202 image-wrapper">
                            <a href="#">
                              <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img1.jpg" alt="Image description">
                            </a>
                          </div>
                          <div class="card-body">
                            <!--title-->
                            <h2 class="card-title h5">
                              <a href="#">Ferrari improves painting process so perfect</a>
                            </h2>
                            <!-- date & comments -->
                            <div class="card-text text-muted small">
                              <time datetime="2019-10-22">Oct 22, 2019</time>
                              <span title="9 comment" class="float-end">
                                <span class="icon-comments"></span> 9
                              </span>
                            </div>
                          </div>
                        </div>
                      </article>
                      <!-- post start -->
                      <article class="col-6 col-sm-4">
                        <div class="card card-full hover-a mb-4">
                          <!--thumbnail-->
                          <div class="ratio_360-202 image-wrapper">
                            <a href="#">
                              <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img2.jpg" alt="Image description">
                            </a>
                          </div>
                          <div class="card-body">
                            <!--title-->
                            <h2 class="card-title h5">
                              <a href="#">Ferrari improves painting process so perfect</a>
                            </h2>
                            <!-- date & comments -->
                            <div class="card-text text-muted small">
                              <time datetime="2019-10-22">Oct 22, 2019</time>
                              <span title="9 comment" class="float-end">
                                <span class="icon-comments"></span> 9
                              </span>
                            </div>
                          </div>
                        </div>
                      </article>
                      <!-- post start -->
                      <article class="col-6 col-sm-4">
                        <div class="card card-full hover-a mb-4">
                          <!--thumbnail-->
                          <div class="ratio_360-202 image-wrapper">
                            <a href="#">
                              <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img3.jpg" alt="Image description">
                            </a>
                          </div>
                          <div class="card-body">
                            <!--title-->
                            <h2 class="card-title h5">
                              <a href="#">Guiseley to face Fleetwood in FA Cup second round</a>
                            </h2>
                            <!-- date & comments -->
                            <div class="card-text text-muted small">
                              <time datetime="2019-10-22">Oct 22, 2019</time>
                              <span title="9 comment" class="float-end">
                                <span class="icon-comments"></span> 9
                              </span>
                            </div>
                          </div>
                        </div>
                      </article>
                      <!-- end post -->
                      <div class="gap-15"></div>
                    </div>
                    <!--end post list-->
                  </div>
                  <!-- End block -->
                
              

Block 14 with custom color

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

                
                  <!-- Block start -->
                  <div class="block-area block-warning">
                  ....
                  ....
                  </div>
                  <!--End Block-->
                
              

Block 14 - on 1 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">International</span>
                            </h4>
                          </div>
                          <!--post start-->
                          <div class="big-post">
                            <article class="card card-full hover-a mb-4">
                              <div class="row">
                                <!--thumbnail-->
                                <div class="col-sm-6 col-md-12">
                                  <div class="ratio_360-202 image-wrapper">
                                    <a href="#">
                                      <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img8.jpg" alt="Image description">
                                    </a>
                                  </div>
                                </div>
                                <div class="col-sm-6 col-md-12">
                                  <div class="card-body pt-3 pt-sm-0">
                                    <!--title-->
                                    <h2 class="card-title h1-sm h5-md h3-lg">
                                      <a href="#">Leica D-Lux 7 compact camera with 17MP four-thirds sensor</a>
                                    </h2>
                                    <!-- author, date & comments -->
                                    <div class="card-text mb-2 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">Oct 21, 2019</time>
                                      <span title="5 comment" class="float-end">
                                        <span class="icon-comments"></span> 5
                                      </span>
                                    </div>
                                    <!--description-->
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content...</p>
                                  </div>
                                </div>
                              </div>
                            </article>
                          </div>
                          <!--Start post list-->
                          <div class="row">
                            <!-- post start -->
                            <article class="col-6 col-md-12 col-lg-6">
                              <div class="card card-full hover-a mb-4">
                                <!--thumbnail-->
                                <div class="ratio_360-202 image-wrapper">
                                  <a href="#">
                                    <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img1.jpg" alt="Image description">
                                  </a>
                                </div>
                                <div class="card-body">
                                  <!--title-->
                                  <h2 class="card-title h5">
                                    <a href="#">Ferrari improves painting process so perfect</a>
                                  </h2>
                                  <!-- date & comments -->
                                  <div class="card-text text-muted small">
                                    <time datetime="2019-10-22">Oct 22, 2019</time>
                                    <span title="9 comment" class="float-end">
                                      <span class="icon-comments"></span> 9
                                    </span>
                                  </div>
                                </div>
                              </div>
                            </article>
                            <!-- post start -->
                            <article class="col-6 col-md-12 col-lg-6">
                              <div class="card card-full hover-a mb-4">
                                <!--thumbnail-->
                                <div class="ratio_360-202 image-wrapper">
                                  <a href="#">
                                    <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/360x202/img2.jpg" alt="Image description">
                                  </a>
                                </div>
                                <div class="card-body">
                                  <!--title-->
                                  <h2 class="card-title h5">
                                    <a href="#">Ferrari improves painting process so perfect</a>
                                  </h2>
                                  <!-- date & comments -->
                                  <div class="card-text text-muted small">
                                    <time datetime="2019-10-22">Oct 22, 2019</time>
                                    <span title="9 comment" class="float-end">
                                      <span class="icon-comments"></span> 9
                                    </span>
                                  </div>
                                </div>
                              </div>
                            </article>
                            <!-- end post -->
                            <div class="gap-15"></div>
                          </div>
                          <!--end post list-->
                        </div>
                        <!-- End block -->