Elements

These modular elements can be readily used and customized across pages and in different blocks.

        
            <div class="row">
                <div class="col-md-6 col-sm-12 mb30">
                    <div class="media blog-media">
                        <div class="blog-media-img">
                            <a href="#"><img class="" src="img/home/news/news-img-01.jpg" alt="Generic placeholder image"></a>
                        </div>
                        <div class="media-body">
                        <a href="#"><h5 class="mt-0 media-heading">Etiam mollis dui sed</h5></a>
                            <div class="meta-content">
                                <a href="#"><i class="fa fa-user" aria-hidden="true"></i>by Admin</a>
                                <a href="#"><i class="fa fa-comments-o" aria-hidden="true"></i>Comments 02</a>
                            </div>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing sed do eiusmodtempor incididunt ut laboet dolore magna aliqua Ut enim ad minim veniam</p>
                            <a class="btn btn-primary btn-rounded" href="#">read more</a>
                        </div>
                    </div>
                </div>
            </div>
how to use
  • Follow the code example to get the following style. You you want to customize the style you can add classes or modify the existing class property
  • For genarel blog style remove class .col-md-6

Example: Blog Card

Generic placeholder image
Etiam mollis dui sed
by Admin Comments 02

Lorem ipsum dolor sit amet consectetur adipisicing sed do eiusmodtempor incididunt ut laboet dolore magna aliqua Ut enim ad minim veniam

read more
Generic placeholder image
Etiam mollis dui sed
by Admin Comments 02

Lorem ipsum dolor sit amet consectetur adipisicing sed do eiusmodtempor incididunt ut laboet dolore magna aliqua Ut enim ad minim veniam

read more

Example: Genarel Blog Styles

Generic placeholder image
Etiam mollis dui sed
by Admin Comments 02

Lorem ipsum dolor sit amet consectetur adipisicing sed do eiusmodtempor incididunt ut laboet dolore magna aliqua Ut enim ad minim veniam

read more 
            
                <div class="row">
                    <div class="col-12">
                        <div class="media blog-media slider">
                            <div class="blog-media-img blog-slider">
                                <div class="single-item">
                                    <img src="img/blog/blog-big-img-2.jpg" alt="Client Image">
                                </div>
                                <div class="single-item">
                                    <img src="img/blog/blog-big-img-1.jpg" alt="Client Image">
                                </div>
                                <div class="single-item">
                                    <img src="img/blog/blog-big-img-3.jpg" alt="Client Image">
                                </div>
                            </div>
                            <div class="media-body">
                                <a href="#">
                                    <h5 class="mt-0 media-heading">Etiam mollis dui sed</h5>
                                </a>
                                <div class="meta-content">
                                    <a href="#"><i class="fa fa-user" aria-hidden="true"></i>by Admin</a>
                                    <a href="#"><i class="fa fa-comments-o" aria-hidden="true"></i>Comments 02</a>
                                </div>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing sed do eiusmodtempor incididunt ut laboet
                                    dolore magna aliqua Ut enim ad minim veniam</p>
                                <a class="btn btn-primary btn-rounded" href="#">read more</a>
                            </div>
                        </div>
                    </div>
                </div>
how to use
  • Follow the code example to get the following style. You you want to customize the style you can add classes or modify the existing class property

Example: Blog Slider

Client Image
Client Image
Client Image
Etiam mollis dui sed
by Admin Comments 02

Lorem ipsum dolor sit amet consectetur adipisicing sed do eiusmodtempor incididunt ut laboet dolore magna aliqua Ut enim ad minim veniam

read more 
            
                <div class="row">
                    <div class="col-12">
                        <div class="media blog-media">
                            <div class="blog-media-img">
                                <div class="promo-video bg-image" style="background-image: url('img/blog/blog-video-img-1.jpg');">
                                    <div class="video-button video-box">
                                        <a href="javascript:void(0)">
                                        <i class="fa fa-play play-icon" aria-hidden="true" data-video="https://www.youtube.com/embed/g3-VxLQO7do?autoplay=1"></i>
                                    </a>
                                    </div>
                                </div>
                            </div>
                            <div class="media-body">
                                <a href="#">
                                    <h5 class="mt-0 media-heading">Etiam mollis dui sed</h5>
                                </a>
                                <div class="meta-content">
                                    <a href="#"><i class="fa fa-user" aria-hidden="true"></i>by Admin</a>
                                    <a href="#"><i class="fa fa-comments-o" aria-hidden="true"></i>Comments 02</a>
                                </div>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing sed do eiusmodtempor incididunt ut laboet
                                    dolore magna aliqua Ut enim ad minim veniam</p>
                                <a class="btn btn-primary btn-rounded" href="#">read more</a>
                            </div>
                        </div>
                    </div>
                </div>
how to use
  • Follow the code example to get the following style. You you want to customize the style you can add classes or modify the existing class property

Example: Blog Classic

Etiam mollis dui sed
by Admin Comments 02

Lorem ipsum dolor sit amet consectetur adipisicing sed do eiusmodtempor incididunt ut laboet dolore magna aliqua Ut enim ad minim veniam

read more 
                
                  <div class="row">
                    <div class="col-12">
                      <div class="media blog-media">
                        <div class="blog-media-img">
                          <a href="#"><img class="" src="img/blog/blog-big-img-4.jpg" alt="Generic placeholder image"></a>
                        </div>
                        <div class="media-body">
                          <a href="#"><h5 class="mt-0 media-heading">Etiam mollis dui sed</h5></a>
                          <div class="meta-content">
                            <a href="#"><i class="fa fa-user" aria-hidden="true"></i>by Admin</a>
                            <a href="#"><i class="fa fa-comments-o" aria-hidden="true"></i>Comments 02</a>
                          </div>
                          <p class="mb-4">Commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.nulla.pariatur. Excepteur sint occaecat cupidatat non proident.sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
                          <p class="mb-4">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet consectetur adipisci velit.</p>
                          <img class="inner-img" src="img/blog/blog-sm-img-2.jpg" alt="Blog Image">
                          <p class="mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.nulla.pariatur. Excepteur sint occaecat cupidatat proident.sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo enim ipsam voluptatem</p>
                          <p class="mb-4">Reprehenderit in voluptate velit esse cillum dolore eu fugiat.nulla.pariatur. Excepteur sint occaecat cupidatat non proident.sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
                          <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet consectetur adipisci velit.</p>
                        </div>
                      </div>
                    </div>
                  </div>
how to use
  • Follow the code example to get the following style. You you want to customize the style you can add classes or modify the existing class property
Generic placeholder image
Etiam mollis dui sed
by Admin Comments 02

Commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.nulla.pariatur. Excepteur sint occaecat cupidatat non proident.sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet consectetur adipisci velit.

Blog Image

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.nulla.pariatur. Excepteur sint occaecat cupidatat proident.sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo enim ipsam voluptatem

Reprehenderit in voluptate velit esse cillum dolore eu fugiat.nulla.pariatur. Excepteur sint occaecat cupidatat non proident.sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet consectetur adipisci velit.