Style Switcher
Theme Colors
Header Color
  • support@ecada.com
  • (0123)-123-456-789

Theme components

Blog Post Style 1
<article class="post">
    <div class="img-wrapper">
        <img src="img/blog/img01_570x380.jpg" class="img-responsive" alt="" />
        <div class="post-share">
            <label>Share:</label>
            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-google-plus"></i></a>
            <a href="#"><i class="fa fa-pinterest"></i></a>
        </div>
    </div>
    <div class="post-heading">
        <h5><a href="#">Pro labitur invenire in ullum.</a></h5>
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat.
    </p>
    <div class="footer-post margin-bottom-10">
        <ul>
            <li><a href="#"><i class="fa fa-share-alt"></i> 174</a></li>
            <li><a href="#"><i class="fa fa-comments"></i> 24</a></li>
            <li><a href="#"><i class="fa fa-heart"></i> 8</a></li>
        </ul>
        <div class="rating pull-right">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star-half-o"></i>
        </div>
    </div>
    <a href="#" class="btn-e btn-block btn-e-primary">Read more <i class="fa fa-plus"></i></a>
</article>
Blog post left and right image
<article class="post">
    <div class="row">
        <div class="col-md-6">
            <div class="img-wrapper">
                <img src="img/blog/img01_570x380.jpg" class="img-responsive" alt="" />
                <div class="post-share">
                    <label>Share:</label>
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-google-plus"></i></a>
                    <a href="#"><i class="fa fa-pinterest"></i></a>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="post-heading">
                <h5><a href="#">Fabellas moderatius cum in.</a></h5>
            </div>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat.
            </p>
            <div class="footer-post margin-bottom-10">
                <ul>
                    <li><a href="#"><i class="fa fa-share-alt"></i> 174</a></li>
                    <li><a href="#"><i class="fa fa-comments"></i> 24</a></li>
                    <li><a href="#"><i class="fa fa-heart"></i> 8</a></li>
                </ul>
                <div class="rating pull-right">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-half-o"></i>
                    <i class="fa fa-star-o"></i>
                    <i class="fa fa-star-o"></i>
                </div>
            </div>
            <a href="#" class="btn-e btn-block btn-e-primary">Read more <i class="fa fa-plus"></i></a>
        </div>
    </div>
</article>
<article class="post">
    <div class="row">
        <div class="col-md-6">
            <div class="post-heading">
                <h5><a href="#">No dicit theophrastus sit.</a></h5>
            </div>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat.
            </p>
            <div class="footer-post margin-bottom-10">
                <ul>
                    <li><a href="#"><i class="fa fa-share-alt"></i> 174</a></li>
                    <li><a href="#"><i class="fa fa-comments"></i> 24</a></li>
                    <li><a href="#"><i class="fa fa-heart"></i> 8</a></li>
                </ul>
                <div class="rating pull-right">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-half-o"></i>
                    <i class="fa fa-star-o"></i>
                    <i class="fa fa-star-o"></i>
                </div>
            </div>
            <a href="#" class="btn-e btn-block btn-e-primary">Read more <i class="fa fa-plus"></i></a>
        </div>
        <div class="col-md-6">
            <div class="img-wrapper">
                <img src="img/blog/img02_570x380.jpg" class="img-responsive" alt="" />
                <div class="post-share">
                    <label>Share:</label>
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-google-plus"></i></a>
                    <a href="#"><i class="fa fa-pinterest"></i></a>
                </div>
            </div>
        </div>
    </div>
</article>
<div class="post">
    <div class="post-heading post-thumbnail">
        <a href="#" class="post-thumbnail"><img src="img/blog/thumbs/thumb01.jpg" class="img-thumb" alt="" /></a>
        <h6><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></h6>
    </div>
</div>
<div class="post">
    <div class="post-heading post-thumbnail">
        <a href="#" class="post-thumbnail"><img src="img/blog/thumbs/thumb02.jpg" class="img-thumb" alt="" /></a>
        <h6><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></h6>
    </div>
</div>
<div class="post">
    <div class="post-heading post-thumbnail">
        <a href="#" class="post-thumbnail"><img src="img/blog/thumbs/thumb03.jpg" class="img-thumb" alt="" /></a>
        <h6><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></h6>
    </div>
</div>
<div class="post">
    <div class="post-heading post-thumbnail">
        <a href="#" class="post-thumbnail"><img src="img/blog/thumbs/thumb04.jpg" class="img-thumb" alt="" /></a>
        <h6><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></h6>
    </div>
</div>
<div class="post">
    <div class="post-heading post-thumbnail">
        <a href="#" class="post-thumbnail"><img src="img/blog/thumbs/thumb05.jpg" class="img-thumb" alt="" /></a>
        <h6><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></h6>
    </div>
</div>
<div class="post">
    <div class="post-heading post-thumbnail">
        <a href="#" class="post-thumbnail"><img src="img/blog/thumbs/thumb06.jpg" class="img-thumb" alt="" /></a>
        <h6><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></h6>
    </div>
</div>
Blog Post Style 2
<article class="post">
    <div class="img-wrapper">
        <img src="img/blog/img03_570x380.jpg" class="img-responsive" alt="" />
        <div class="post-share">
            <label>Share</label>
            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-google-plus"></i></a>
            <a href="#"><i class="fa fa-pinterest"></i></a>
        </div>
    </div>
        <div class="post-frame">
        <div class="post-heading">
            <h5><a href="#">Electram definitiones id duo.</a></h5>
        </div>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincid unt ut laoreet dolore magna aliquam erat volutpat.
        </p>
        <div class="footer-post margin-bottom-10">
            <ul>
                <li><a href="#"><i class="fa fa-share-alt"></i> 174</a></li>
                <li><a href="#"><i class="fa fa-comments"></i> 24</a></li>
                <li><a href="#"><i class="fa fa-heart"></i> 8</a></li>
            </ul>
            <div class="rating pull-right">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
                <i class="fa fa-star-o"></i>
                <i class="fa fa-star-o"></i>
            </div>
        </div>
        <a href="#" class="btn-e btn-block btn-e-primary">Read more <i class="fa fa-plus"></i></a>
    </div>
</article>
Blog Post Style 3
<article class="post-wrapper">
    <a href="#"><img src="img/blog/img01_570x380.jpg" class="img-responsive" alt="" /></a>
    <div class="post-content">
        <span class="post-date">17 August 2017</span>
        <h5><a href="#">Pro labitur invenire in ullum.</a></h5>
        <div class="footer-post">
            <ul>
                <li><a href="#"><i class="fa fa-share-alt"></i> 174</a></li>
                <li><a href="#"><i class="fa fa-comments"></i> 24</a></li>
                <li><a href="#"><i class="fa fa-heart"></i> 8</a></li>
            </ul>
            <a href="#" class="btn-e btn-e-primary btn-sm">Read more +</a>
        </div>
    </div>
</article>