Blog homepage components

eCommerce blog homepage components

Set of design blocks dedicated to building eCommerce blog.

See also a page fully composed of the following elements.

Blog Homepage demo

Blog posts basic example

Sample

New

Small glass garden

by marthasteward February 20, 2020

Vivamus condimentum purus in lorem molestie fermentum. Nulla suscipit nibh eu ultricies pellentesque. Fusce consectetur velit eu tristique dapibus. Donec et lobortis massa, vitae lacinia elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. orbi pharetra urna quis lectus pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis, corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem! Possimus excepturi odio eaque recusandae.


Animals in our area

by marthasteward February 19, 2020

Vivamus condimentum purus in lorem molestie fermentum. Nulla suscipit nibh eu ultricies pellentesque. Fusce consectetur velit eu tristique dapibus. Donec et lobortis massa, vitae lacinia elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. Morbi pharetra urna quis lectus pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis, corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem! Possimus excepturi odio eaque recusandae.


Wooden house holiday

by marthasteward February 18, 2020

Vivamus condimentum purus in lorem molestie fermentum. Nulla suscipit nibh eu ultricies pellentesque. Fusce consectetur velit eu tristique dapibus. Donec et lobortis massa, vitae lacinia elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. Morbi pharetra urna quis lectus pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis, corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem! Possimus excepturi odio eaque recusandae.




          <!--Section: Block Content-->
          <section>

            <!-- Grid row -->
            <div class="row">

              <!-- Grid column -->
              <div class="col-md-6 col-lg-4 mb-4">

                <!-- Card -->
                <div class="">

                  <div class="view overlay z-depth-2 rounded">
                    <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg" alt="Sample">
                    <h4 class="mb-0"><span class="badge badge-primary badge-pill badge-news">New</span></h4>
                    <a href="#!">
                      <div class="mask rgba-white-slight"></div>
                    </a>
                  </div>

                  <div class="pt-4">

                    <h5>Small glass garden</h5>
                    <p class="small text-muted text-uppercase mb-3">by
                      <a href="#!" class="text-reset"><strong>marthasteward </strong></a>
                      <a href="#!" class="text-reset float-right">February 20, 2020</a>
                    </p>
                    <p class="text-multiline-truncate">Vivamus condimentum purus in lorem molestie fermentum.
                      Nulla suscipit nibh eu ultricies pellentesque. Fusce consectetur velit eu tristique dapibus. 
                      Donec et lobortis massa, vitae lacinia elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. 
                      orbi pharetra urna quis lectus pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis,
                      corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem!
                      Possimus excepturi odio eaque recusandae.
                    </p>
                    <hr>

                  </div>

                  <div class="d-flex justify-content-between text-uppercase text-muted white small">
                    <div class="d-flex align-items-center">
                      <i class="fas fa-tag mr-2"></i>
                      <a href="#!" class="text-reset">Design</a>
                    </div>
                    <div class="d-flex align-items-center">
                      <a href="#!" class="text-reset">
                        <i class="fas fa-comment-alt mr-2"></i>1
                      </a>
                    </div>
                  </div>

                </div>
                <!-- Card -->

              </div>
              <!-- Grid column -->

              <!-- Grid column -->
              <div class="col-md-6 col-lg-4 mb-4">

                <!-- Card -->
                <div class="">

                  <div class="view overlay z-depth-2 rounded">
                    <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg" alt="Sample">
                    <a href="#!">
                      <div class="mask rgba-white-slight"></div>
                    </a>
                  </div>

                  <div class="pt-4">

                    <h5>Animals in our area</h5>
                    <p class="small text-muted text-uppercase mb-3">by
                      <a href="#!" class="text-reset"><strong>marthasteward </strong></a>
                      <a href="#!" class="text-reset float-right">February 19, 2020</a>
                    </p>
                    <p class="card-text text-multiline-truncate">Vivamus condimentum purus in lorem molestie fermentum.
                      Nulla suscipit nibh eu ultricies
                      pellentesque. Fusce consectetur velit eu tristique dapibus. Donec et lobortis massa, vitae lacinia
                      elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. Morbi pharetra urna quis lectus
                      pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis,
                      corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem!
                      Possimus excepturi odio eaque recusandae.
                    </p>
                    <hr>

                  </div>

                  <div class="d-flex justify-content-between text-uppercase text-muted white small">
                    <div class="d-flex align-items-center">
                      <i class="fas fa-tag mr-2"></i>
                      <a href="#!" class="text-reset">Nature</a>,
                      <a href="#!" class="text-reset ml-1">Photography</a>
                    </div>
                    <div class="d-flex align-items-center">
                      <a href="#!" class="text-reset">
                        <i class="fas fa-comment-alt mr-2"></i>0
                      </a>
                    </div>
                  </div>

                </div>
                <!-- Card -->

              </div>
              <!-- Grid column -->

              <!-- Grid column -->
              <div class="col-md-12 col-lg-4 mb-4">

                <!-- Card -->
                <div class="">

                  <div class="view overlay z-depth-2 rounded">
                    <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(116).jpg"
                      alt="Sample">
                    <a href="#!">
                      <div class="mask rgba-white-slight"></div>
                    </a>
                  </div>

                  <div class="pt-4">

                    <h5>Wooden house holiday</h5>
                    <p class="small text-muted text-uppercase mb-3">by
                      <a href="#!" class="text-reset"><strong>marthasteward </strong></a>
                      <a href="#!" class="text-reset float-right">February 18, 2020</a>
                    </p>
                    <p class="card-text text-multiline-truncate">Vivamus condimentum purus in lorem molestie fermentum.
                      Nulla suscipit nibh eu ultricies
                      pellentesque. Fusce consectetur velit eu tristique dapibus. Donec et lobortis massa, vitae lacinia
                      elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. Morbi pharetra urna quis lectus
                      pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis,
                      corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem!
                      Possimus excepturi odio eaque recusandae.
                    </p>
                    <hr>

                  </div>

                  <div class="d-flex justify-content-between text-uppercase text-muted white small">
                    <div class="d-flex align-items-center">
                      <i class="fas fa-tag mr-2"></i>
                      <a href="#!" class="text-reset">Travel</a>,
                      <a href="#!" class="text-reset ml-1">Uncategorized</a>
                    </div>
                    <div class="d-flex align-items-center">
                      <a href="#!" class="text-reset">
                        <i class="fas fa-comment-alt mr-2"></i>0
                      </a>
                    </div>
                  </div>

                </div>
                <!-- Card -->

              </div>
              <!-- Grid column -->

            </div>
            <!-- Grid row -->

          </section>
          <!--Section: Block Content-->

        

Full version

Sample

New

Small glass garden

by marthasteward February 20, 2020

Vivamus condimentum purus in lorem molestie fermentum. Nulla suscipit nibh eu ultricies pellentesque. Fusce consectetur velit eu tristique dapibus. Donec et lobortis massa, vitae lacinia elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. orbi pharetra urna quis lectus pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis, corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem! Possimus excepturi odio eaque recusandae.




        <!-- Card -->
        <div class="">

          <div class="view overlay z-depth-2 rounded">
            <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg" alt="Sample">
            <h4 class="mb-0"><span class="badge badge-primary badge-pill badge-news">New</span></h4>
            <a href="#!">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <div class="pt-4">

            <h5>Small glass garden</h5>
            <p class="small text-muted text-uppercase mb-3">by
              <a href="#!" class="text-reset"><strong>marthasteward </strong></a>
              <a href="#!" class="text-reset float-right">February 20, 2020</a>
            </p>
            <p class="text-multiline-truncate">Vivamus condimentum purus in lorem molestie fermentum.
              Nulla suscipit nibh eu ultricies pellentesque. Fusce consectetur velit eu tristique dapibus. 
              Donec et lobortis massa, vitae lacinia elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. 
              orbi pharetra urna quis lectus pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis,
              corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem!
              Possimus excepturi odio eaque recusandae.
            </p>
            <hr>

          </div>

          <div class="d-flex justify-content-between text-uppercase text-muted white small">
            <div class="d-flex align-items-center">
              <i class="fas fa-tag mr-2"></i>
              <a href="#!" class="text-reset">Design</a>
            </div>
            <div class="d-flex align-items-center">
              <a href="#!" class="text-reset">
                <i class="fas fa-comment-alt mr-2"></i>1
              </a>
            </div>
          </div>

        </div>
        <!-- Card -->

        

Minimalist version

February 20, 2020

Small glass garden


        <!-- Card -->
        <div class="">

          <div class="view overlay z-depth-2 rounded">
            <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg" alt="Sample">
            <a href="#!">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <div class="pt-4">

            <p class="small text-uppercase text-muted mb-2">
              <a href="#!" class="text-muted">February 20, 2020</a>
            </p>
            <h5>Small glass garden</h5>

          </div>

        </div>
        <!-- Card -->

        

Supported content

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio minus incidunt recusandae saepe qui, esse iusto earum ab ipsa beatae odit repudiandae delectus id aspernatur ullam nam vitae unde similique.

Image



            <div class="view overlay z-depth-2 rounded">
              <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg" alt="Sample">
              <a href="#!">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>

          

Title

Wooden house holiday


            <h5>Wooden house holiday</h5>

          

Meta data



          <p class="small text-muted text-uppercase mb-3">by
            <a href="#!" class="text-reset"><strong>marthasteward </strong></a>
            <a href="#!" class="text-reset float-right">February 20, 2020</a>
          </p>

          

Excerpt

Vivamus condimentum purus in lorem molestie fermentum. Nulla suscipit nibh eu ultricies pellentesque. Fusce consectetur velit eu tristique dapibus. Donec et lobortis massa, vitae lacinia elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. Morbi pharetra urna quis lectus pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis, corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem! Possimus excepturi odio eaque recusandae.



          <p class="text-multiline-truncate">Vivamus condimentum purus in lorem molestie fermentum. Nulla
            suscipit nibh eu ultricies
            pellentesque. Fusce consectetur velit eu tristique dapibus. Donec et lobortis massa, vitae lacinia
            elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. Morbi pharetra urna quis lectus
            pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis,
            corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem!
            Possimus excepturi odio eaque recusandae.
          </p>

          

Divider

Some content here


Some content here



            <!-- Divider -->
            <hr>

          

Badge

News



            <!-- News badge -->
            <h4 class="mb-0"><span class="badge badge-primary badge-pill badge-news">News</span></h4>

          

Adding shadows

Sample

New

Small glass garden

by marthasteward February 20, 2020

Vivamus condimentum purus in lorem molestie fermentum. Nulla suscipit nibh eu ultricies pellentesque. Fusce consectetur velit eu tristique dapibus. Donec et lobortis massa, vitae lacinia elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. orbi pharetra urna quis lectus pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis, corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem! Possimus excepturi odio eaque recusandae.



        <!-- Card -->
        <div class="card">

          <div class="view overlay">
            <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg" alt="Sample">
            <h4 class="mb-0"><span class="badge badge-primary badge-pill badge-news">New</span></h4>
            <a href="#!">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <div class="card-body">

            <h5>Small glass garden</h5>
            <p class="small text-muted text-uppercase mb-3">by
              <a href="#!" class="text-reset"><strong>marthasteward </strong></a>
              <a href="#!" class="text-reset float-right">February 20, 2020</a>
            </p>
            <p class="text-multiline-truncate mb-0">Vivamus condimentum purus in lorem molestie fermentum.
              Nulla suscipit nibh eu ultricies pellentesque. Fusce consectetur velit eu tristique dapibus. 
              Donec et lobortis massa, vitae lacinia elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. 
              orbi pharetra urna quis lectus pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis,
              corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem!
              Possimus excepturi odio eaque recusandae.
            </p>

          </div>

          <div class="card-footer d-flex justify-content-between text-uppercase text-muted white small">
            <div class="d-flex align-items-center">
              <i class="fas fa-tag mr-2"></i>
              <a href="#!" class="text-reset">Design</a>
            </div>
            <div class="d-flex align-items-center">
              <a href="#!" class="text-reset">
                <i class="fas fa-comment-alt mr-2"></i>1
              </a>
            </div>
          </div>

        </div>
        <!-- Card -->

        

Horizontal version

Wooden house holiday

by marthasteward February 20, 2020

Vivamus condimentum purus in lorem molestie fermentum. Nulla suscipit nibh eu ultricies pellentesque. Fusce consectetur velit eu tristique dapibus. Donec et lobortis massa, vitae lacinia elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. Morbi pharetra urna quis lectus pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis, corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem! Possimus excepturi odio eaque recusandae.



        <div class="card mb-5">
          <div class="row no-gutters">
            <div class="col-md-6">
              <div class="view overlay">
                <img class="card-img" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg"
                  alt="Sample">
                <a href="#!">
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card-body">
                <h5>Wooden house holiday</h5>
                <p class="small text-muted text-uppercase mb-3">by
                  <a href="#!" class="text-reset"><strong>marthasteward </strong></a>
                  <a href="#!" class="text-reset float-right">February 20, 2020</a>
                </p>
                <p class="text-multiline-truncate">Vivamus condimentum purus in lorem molestie fermentum.
                  Nulla
                  suscipit nibh eu ultricies
                  pellentesque. Fusce consectetur velit eu tristique dapibus. Donec et lobortis massa, vitae lacinia
                  elit. Proin dolor dui, tempus eu leo vitae, congue venenatis augue. Morbi pharetra urna quis lectus
                  pulvinar, non tincidunt purus consectetur adipisicing elit. Cumque beatae officiis,
                  corporis hic numquam eum, sit dicta quia mollitia fugit totam deserunt aliquam dolorum exercitationem!
                  Possimus excepturi odio eaque recusandae.
                </p>
              </div>
              <div
                class="card-footer text-uppercase text-muted d-flex justify-content-between white bottom-content w-100 border-bottom-0 small">
                <div class="d-flex align-items-center">
                  <i class="fas fa-tag mr-2"></i>
                  <a href="#!" class="text-reset">Travel</a>,
                  <a href="#!" class="text-reset ml-1">Uncategorized</a>
                </div>
                <div class="d-flex align-items-center">
                  <a href="#!" class="text-reset">
                    <i class="fas fa-comment-alt mr-2"></i>0
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

        

Tiled version



        <!--Section: Block Content-->
        <section>

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-12 col-lg-4 mb-4">

              <!-- Card -->
              <div class="">

                <div class="view zoom brighten z-depth-2 rounded">
                  <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(116).jpg" alt="Sample">
                  <a href="#!" class="text-white">
                    <div class="mask card-mask-color">
                      <div class="d-flex align-items-end h-100 p-3">
                        <h5 class="mb-0">This is title of the blog post</h5>
                      </div>
                    </div>
                  </a>
                </div>

              </div>
              <!-- Card -->

            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-6 col-lg-4 mb-4">

              <!-- Card -->
              <div class="">

                <div class="view zoom brighten z-depth-2 rounded">
                  <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg" alt="Sample">
                  <a href="#!" class="text-white">
                    <div class="mask card-mask-color">
                      <div class="d-flex align-items-end h-100 p-3">
                        <h5 class="mb-0">This is title of the blog post</h5>
                      </div>
                    </div>
                  </a>
                </div>

              </div>
              <!-- Card -->

            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-6 col-lg-4 mb-4">

              <!-- Card -->
              <div class="">

                <div class="view zoom brighten z-depth-2 rounded">
                  <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg" alt="Sample">
                  <a href="#!" class="text-white">
                    <div class="mask card-mask-color">
                      <div class="d-flex align-items-end h-100 p-3">
                        <h5 class="mb-0">This is title of the blog post</h5>
                      </div>
                    </div>
                  </a>
                </div>

              </div>
              <!-- Card -->

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

        </section>
        <!--Section: Block Content-->