Skip to main content

Block 7 - 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">Latest news</span>
                      </h4>
                    </div>
                    <!--start post-->
                    <article class="card card-full hover-a mb-module">
                      <div class="row">
                        <!--thumbnail-->
                        <div class="col-3 pe-2 pe-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 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>
                      </div>
                    </article>
                    <!--start post-->
                    <article class="card card-full hover-a mb-module">
                      <div class="row">
                        <!--thumbnail-->
                        <div class="col-3 pe-2 pe-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 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>
                      </div>
                    </article>
                    <!--start post-->
                    <article class="card card-full hover-a mb-module">
                      <div class="row">
                        <!--thumbnail-->
                        <div class="col-3 pe-2 pe-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 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>
                      </div>
                    </article>
                    <!--end block content-->
                    <div class="gap-0"></div>
                  </div>
                  <!--End Block-->
                
              

Block 7 with custom color

This block component is same like block content 7, 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">Latest news</span>
                            </h4>
                          </div>
                          <!-- block content -->
                          <div class="small-post">
                            <!--post list-->
                            <article class="card card-full hover-a mb-4">
                              <div class="row">
                                <!--thumbnail-->
                                <div class="col-3 col-md-4 pe-2 pe-md-0">
                                  <div class="ratio_110-77 image-wrapper">
                                    <a href="#">
                                      <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/110x77/img1.jpg" alt="Image description">
                                    </a>
                                  </div>
                                </div>
                                <!-- title & date -->
                                <div class="col-9 col-md-8">
                                  <div class="card-body pt-0">
                                    <h3 class="card-title h6 h5-sm h6-md">
                                      <a href="#">Apple's stock rout starts and ends with the iPhone</a>
                                    </h3>
                                    <div class="card-text small text-muted">
                                      <time datetime="2019-10-16">Oct 16, 2019</time>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </article>
                            <!--post list-->
                            <article class="card card-full hover-a mb-4">
                              <div class="row">
                                <!--thumbnail-->
                                <div class="col-3 col-md-4 pe-2 pe-md-0">
                                  <div class="ratio_110-77 image-wrapper">
                                    <a href="#">
                                      <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/110x77/img2.jpg" alt="Image description">
                                    </a>
                                  </div>
                                </div>
                                <!-- title & date -->
                                <div class="col-9 col-md-8">
                                  <div class="card-body pt-0">
                                    <h3 class="card-title h6 h5-sm h6-md">
                                      <a href="#">94 Easy Chicken Recipes for Fuss-Free Family Dinners</a>
                                    </h3>
                                    <div class="card-text small text-muted">
                                      <time datetime="2019-10-15">Oct 15, 2019</time>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </article>
                            <!--post list-->
                            <article class="card card-full hover-a mb-4">
                              <div class="row">
                                <!--thumbnail-->
                                <div class="col-3 col-md-4 pe-2 pe-md-0">
                                  <div class="ratio_110-77 image-wrapper">
                                    <a href="#">
                                      <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/110x77/img3.jpg" alt="Image description">
                                    </a>
                                  </div>
                                </div>
                                <!-- title & date -->
                                <div class="col-9 col-md-8">
                                  <div class="card-body pt-0">
                                    <h3 class="card-title h6 h4-sm h6-md">
                                      <a href="#">Ford reveals autonomous vehicle philosophies, priorities</a>
                                    </h3>
                                    <div class="card-text small text-muted">
                                      <time datetime="2019-10-14">Oct 14, 2019</time>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </article>
                            <!--post list-->
                            <article class="card card-full hover-a mb-4">
                              <div class="row">
                                <!--thumbnail-->
                                <div class="col-3 col-md-4 pe-2 pe-md-0">
                                  <div class="ratio_110-77 image-wrapper">
                                    <a href="#">
                                      <img class="img-fluid lazy" src="../../assets/img/assets/lazy-empty.png" data-src="../../assets/img/110x77/img4.jpg" alt="Image description">
                                    </a>
                                  </div>
                                </div>
                                <!-- title & date -->
                                <div class="col-9 col-md-8">
                                  <div class="card-body pt-0">
                                    <h3 class="card-title h6 h4-sm h6-md">
                                      <a href="#">Bowen's Super Bowl LIII game plans: Which defense will get stops?</a>
                                    </h3>
                                    <div class="card-text small text-muted">
                                      <time datetime="2019-10-16">Oct 16, 2019</time>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </article>
                            <!--End post list-->
                          </div>
                          <!--end block content-->
                          <div class="gap-0"></div>
                        </div>
                        <!-- end block -->