Blog post components

eCommerce blog post components

Set of design blocks dedicated to building eCommerce blog post pages.

See also a page fully composed of the following elements.

Blog Post Demo

Title

Title of the article



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

          <div class="jumbotron color-grey-light card-intro-preview">
            <div class="d-flex align-items-center h-100">
              <div class="container text-center py-5">
                <h4 class="mb-0">Title of the article</h4>
              </div>
            </div>
          </div>

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


Divider

Some content here


Some content here



          <!-- Divider -->
          <hr class="my-4">
    
        

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu vulputate elit. Quisque a eleifend velit. Nullam pellentesque ligula aliquam, tempus eros vitae, hendrerit tellus. Praesent volutpat rutrum tortor. Quisque sit amet justo semper, porta metus id, ultrices ante. Nulla sem sem, bibendum eu magna ac, ornare ultricies mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eget mollis est, in tincidunt nisl. Fusce bibendum nisl at congue tempus. Nam vel volutpat nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla et arcu pharetra, rutrum nulla sit amet, volutpat metus. Nunc sem arcu, varius laoreet vestibulum sed, mollis eget orci.

Nulla sem sem, bibendum eu magna ac, ornare ultricies mi.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Nulla et arcu pharetra, rutrum nulla sit amet, volutpat metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.



          <!-- Block Content -->
          <section class="text-justify">

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu vulputate elit.
              Quisque a eleifend velit. Nullam pellentesque ligula aliquam, tempus eros vitae, hendrerit tellus.
              Praesent volutpat rutrum tortor. Quisque sit amet justo semper, porta metus id, ultrices ante. Nulla
              sem sem, bibendum eu magna ac, ornare ultricies mi. Class aptent taciti sociosqu ad litora torquent
              per conubia nostra, per inceptos himenaeos. Sed eget mollis est, in tincidunt nisl. Fusce bibendum
              nisl at congue tempus. Nam vel volutpat nibh. Vestibulum ante ipsum primis in faucibus orci luctus et
              ultrices posuere cubilia Curae; Nulla et arcu pharetra, rutrum nulla sit amet, volutpat metus. Nunc
              sem arcu, varius laoreet vestibulum sed, mollis eget orci.</p>

            <blockquote class="blockquote my-5">
              <p class="py-1 mb-0"><em>Nulla sem sem, bibendum eu magna ac, ornare ultricies mi.</em></p>
            </blockquote>

            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
              Nulla et arcu pharetra, rutrum nulla sit amet, volutpat metus.&nbsp;<em>Class aptent taciti sociosqu
                ad litora torquent per conubia nostra, per inceptos himenaeos.</em></p>

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

Share buttons


Spreed the word:




        <!-- Section: Block Content -->
        <section class="text-center mb-4">

          <hr>

          <div class="d-md-flex justify-content-center align-items-center">

            <p class="font-weight-bold mr-2 mb-2 mb-md-0">Spreed the word: </p>

            <div>

              <!--Facebook-->
              <a class="btn btn-sm btn-fb mr-1 my-2" role="button" href="#!">
                <i class="fab fa-facebook-f"></i>
              </a>
        
              <!--Twitter-->
              <a class="btn btn-sm btn-tw mr-1 my-2" role="button" href="#!">
                <i class="fab fa-twitter"></i>
              </a>
        
              <!--Linkedin-->
              <a class="btn btn-sm btn-li mr-1 my-2" role="button" href="#!">
                <i class="fab fa-linkedin-in"></i>
              </a>

            </div>

          </div>

          <hr>

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

Author box

About author
Generic placeholder image

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis molestiae delectus nulla porro voluptatem fugiat quod amet aspernatur iusto! Minus debitis quos molestias voluptatibus et vero corrupti cupiditate odit dolores.



        <!--Section: Author box-->
        <section class="">

          <h5 class="text-center">About author</h5>

          <div class="media mt-4 px-1">
            <img class="card-img-100 rounded d-flex z-depth-1 mr-3"
              src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" alt="Generic placeholder image">
            <div class="media-body">

              <div class="d-block">
                <h6><a class="text-reset" href="#!">John Doe</a></h6>
                <div class="my-2">
                  <a href="#!" class="text-reset mr-1" role="button"><i class="fab fa-facebook-f"></i></a>
                  <a href="#!" class="text-reset mx-1" role="button"><i class="fab fa-twitter"></i></a>
                  <a href="#!" class="text-reset mx-1" role="button"><i class="fab fa-linkedin-in"></i></a>
                </div>
              </div>

              <p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis molestiae delectus
                nulla porro voluptatem fugiat quod amet aspernatur iusto! Minus debitis quos molestias voluptatibus et vero
                corrupti cupiditate odit dolores.</p>
            </div>
          </div>

        </section>
        <!--Section: Author box-->
  
        

Comments

2 comments
Generic placeholder image
Miley Steward

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.

Generic placeholder image
Caroline Horwitz

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.



        <!--Section: Block Content-->
        <section class="text-center text-lg-left mb-4">

          <h5 class="text-center mb-4"><span>2</span> comments</h5>

          <div class="media d-block d-md-flex mt-3">
            <img class="card-img-64 rounded z-depth-1 d-flex mx-auto mb-3"
              src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg" alt="Generic placeholder image">
            <div class="media-body text-center text-md-left ml-md-3 ml-0">
              <h6><a class="text-reset my-0" href="#!">Miley Steward</a></h6>
              <p>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.</p>

                <div class="media d-block d-md-flex mt-3">
                  <img class="card-img-64 rounded z-depth-1 d-flex mx-auto mb-3"
                    src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg" alt="Generic placeholder image">
                  <div class="media-body text-center text-md-left ml-md-3 ml-0">
                    <h6><a class="text-reset my-0" href="#!">Caroline Horwitz</a></h6>
                    <p>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.</p>
                  </div>
                </div>

            </div>
          </div>

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

Reply (for logged in users)

Leave a Reply
avatar


          <!--Section: Block Content-->
          <section class="mb-5">

            <h5 class="text-center mb-4">Leave a Reply</h5>

            <div class="d-md-flex flex-md-fill">
              <div class="d-flex justify-content-center">
                <img class="card-img-100 rounded d-flex z-depth-1 mr-3 mb-4" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" alt="avatar">
              </div>
              <!-- Your review -->
              <div class="md-form md-outline mt-0 w-100">
                <textarea id="form76" class="md-textarea form-control" rows="4"></textarea>
                <label for="form76">Message</label>
              </div>
            </div>
            <div class="text-center">
              <button class="btn btn-primary btn-md">Submit</button>
            </div>

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

        

Reply (for not logged in users)

Leave a Reply


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

            <div class="mb-5">

              <h5 class="text-center mb-4">Leave a Reply</h5>
      
              <!-- Your review -->
              <div class="md-form md-outline">
                <textarea id="form76" class="md-textarea form-control" rows="4"></textarea>
                <label for="form76">Message</label>
              </div>
      
              <!-- Name -->
              <div class="md-form md-outline">
                <input type="text" id="form75" class="form-control">
                <label for="form75">Name</label>
              </div>
      
              <!-- Email -->
              <div class="md-form md-outline">
                <input type="email" id="form77" class="form-control">
                <label for="form77">Email</label>
              </div>
      
              <!-- Name -->
              <div class="md-form md-outline">
                <input type="text" id="form78" class="form-control">
                <label for="form78">Website</label>
              </div>
      
              <div class="text-center text-md-left">
                <button type="button" class="btn btn-primary btn-md">Submit</button>
              </div>
      
            </div>

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