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 DemoTitle
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-->
Featured image
.jpg)
<!--Section: Block Content-->
<section>
<!-- Featured image -->
<img src="https://mdbootstrap.com/img/Photos/Slides/img (102).jpg" class="img-fluid z-depth-2 mb-4 rounded"
alt="Responsive image">
<!-- Post data -->
<div class="text-center d-md-flex align-items-center justify-content-between text-uppercase text-muted small">
<p>by
<a href="#!" class="text-reset"><strong>marthasteward </strong></a>
<a href="#!" class="text-reset ml-3">February 20, 2020</a>
</p>
<p>
<a href="#!" class="text-reset">Design</a>,
<a href="#!" class="text-reset ml-1 mr-3">News</a>
<a href="#!" class="text-reset">
<i class="fas fa-comment-alt mr-2"></i>1
</a>
</p>
</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. <em>Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos.</em></p>
</section>
<!-- Block Content -->
Reply (for logged in users)
Leave a Reply
.jpg)
<!--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 -->
Questions or feedback?
Let us know
Comments
2 comments
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.
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.