Please wait...

Try Sallira with other theme and color combinations
Index variants
Color options

Theme components

  1. Home
  2. Components
  3. Blogpost
Blog post style 1
<article class="post">
	<div class="img-wrapper">
		<img src="img/blog/img03.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">
		<div class="rating">
			<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>
		<h5><a href="#">Labore mollis eripuit in quo, quas nonumy tempor has mel.</a></h5>
	</div>
	<p>
	[...]
	</p>
	<div class="footer-post">
		<ul>
			<li><a href="#"><i class="fa fa-share-alt"></i> 122</a></li>
			<li><a href="#"><i class="fa fa-comments"></i> 2</a></li>
			<li><a href="#"><i class="fa fa-heart"></i> 4</a></li>
		</ul>
		<a href="#" class="btn-link">Read more</a>
	</div>
</article>
Blog post left and right image
Blog post thumbnail
Labore mollis eripuit in quo, quas nonumy tempor has.
Labore mollis eripuit in quo, quas nonumy tempor has.
Labore mollis eripuit in quo, quas nonumy tempor has.
Labore mollis eripuit in quo, quas nonumy tempor has.
Labore mollis eripuit in quo, quas nonumy tempor has.
<article class="post">
	<div class="row">
		<div class="col-md-6">
			<div class="img-wrapper">
				<img src="img/blog/img01.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">
				<div class="rating">
					<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>
				<h5><a href="#">Fabellas moderatius cum in, pro labitur invenire in ullum.</a></h5>
			</div>
				<p>
				[...]
				</p>
			<div class="footer-post">
				<ul>
					<li><a href="#"><i class="fa fa-share-alt"></i> 122</a></li>
					<li><a href="#"><i class="fa fa-comments"></i> 2</a></li>
					<li><a href="#"><i class="fa fa-heart"></i> 4</a></li>
				</ul>
				<a href="#" class="btn-link">Read more</a>
			</div>
		</div>
	</div>
</article>

<article class="post">
	<div class="row">
		<div class="col-md-6">
			<div class="post-heading">
				<div class="rating">
					<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>
				<h5><a href="#">Fabellas moderatius cum in, pro labitur invenire in ullum.</a></h5>
			</div>
				<p>
				[...]
				</p>
			<div class="footer-post">
				<ul>
					<li><a href="#"><i class="fa fa-share-alt"></i> 122</a></li>
					<li><a href="#"><i class="fa fa-comments"></i> 2</a></li>
					<li><a href="#"><i class="fa fa-heart"></i> 4</a></li>
				</ul>
				<a href="#" class="btn-link">Read more</a>
			</div>
		</div>
		<div class="col-md-6">
			<div class="img-wrapper">
				<img src="img/blog/img01.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/img01.jpg" class="img-thumb" alt="" /></a>
		<div class="rating">
			<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>
		<h6><a href="#">Labore mollis eripuit in quo, quas nonumy tempor has.</a></h6>
	</div>
</div>
Blog post style 2
<article class="post">
	<div class="img-wrapper">
		<img src="img/blog/img03.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">
			<div class="rating">
				<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>
			<h5><a href="#">Labore mollis eripuit in quo, quas nonumy tempor has mel.</a></h5>
		</div>
		<p>
		[...]
		</p>
		<div class="footer-post">
			<ul>
				<li><a href="#"><i class="fa fa-share-alt"></i> 122</a></li>
				<li><a href="#"><i class="fa fa-comments"></i> 2</a></li>
				<li><a href="#"><i class="fa fa-heart"></i> 4</a></li>
			</ul>
			<a href="#" class="btn-link">Read more</a>
		</div>
	</div>
</article>