Recent Post

Collection of predefined components to use on your site
Sample Recent Posts I
Show code Hide code
<!-- Recent posts -->
		<div class="template-component-recent-post template-component-recent-post-style-1">
			
			<!-- Layout 33x33x33 -->
			<ul class="template-layout-33x33x33 template-clear-fix">
				
				<!-- Left column -->
				<li class="template-layout-column-left">
					<div class="template-component-recent-post-date">October 03, 2014</div>
					<div class="template-component-image template-preloader">
						<a href="#">
							<img src="media/image/_sample/690x414/7.jpg" alt="">
							<span><span><span></span></span></span>
						</a>
						<div class="template-component-recent-post-comment-count">12</div>
					</div>
					<h5><a href="#">Drawing and Painting Lessons</a></h5>
					<p>Magna est consectetur interdum modest dictum. Curabitur est faucibus, malesuada esttincidunt etos et mauris, nunc a libero govum est cuprum.</p>
					<ul class="template-component-recent-post-meta template-clear-fix">
						<li class="template-icon-blog template-icon-blog-author"><a href="#">Anna Brown</a></li>
						<li class="template-icon-blog template-icon-blog-category">
							<a href="#">Events</a>,
							<a href="#">Fun</a>
						</li>
					</ul>
				</li>
				
				<!-- Center column -->
				<li class="template-layout-column-center">
					<div class="template-component-recent-post-date">October 03, 2014</div>
					<div class="template-component-image template-preloader">
						<a href="#">
							<img src="media/image/_sample/690x414/2.jpg" alt="">
							<span><span><span></span></span></span>
						</a>
						<div class="template-component-recent-post-comment-count">4</div>
					</div>
					<h5><a href="#">Fall Parents Meeting Day</a></h5>
					<p>Magna est consectetur interdum modest dictum. Curabitur est faucibus, malesuada esttincidunt etos et mauris, nunc a libero govum est cuprum.</p>
					<ul class="template-component-recent-post-meta template-clear-fix">
						<li class="template-icon-blog template-icon-blog-author"><a href="#">Anna Brown</a></li>
						<li class="template-icon-blog template-icon-blog-category">
							<a href="#">Dance</a>,
							<a href="#">Education</a>
						</li>
					</ul>			
				</li>
				
				<!-- Right column -->
				<li class="template-layout-column-right">
					<div class="template-component-recent-post-date">September 20, 2014</div>
					<div class="template-component-image template-preloader">
						<a href="#">
							<img src="media/image/_sample/690x414/9.jpg" alt="">
							<span><span><span></span></span></span>
						</a>
						<div class="template-component-recent-post-comment-count">4</div>
					</div>
					<h5><a href="#">Birthday in Kindergarten</a></h5>
					<p>Magna est consectetur interdum modest dictum. Curabitur est faucibus, malesuada esttincidunt etos et mauris, nunc a libero govum est cuprum.</p>
					<ul class="template-component-recent-post-meta template-clear-fix">
						<li class="template-icon-blog template-icon-blog-author"><a href="#">Anna Brown</a></li>
						<li class="template-icon-blog template-icon-blog-category">
							<a href="#">Games</a>,
							<a href="#">General</a>
						</li>
					</ul>			
				</li>
				
			</ul>
			
		</div>
Sample Recent Posts II
Show code Hide code
<!-- Recent posts -->
<div class="template-component-recent-post template-component-recent-post-style-2">
	<!-- Layout 50x50 -->
	<ul class="template-layout-50x50 template-clear-fix">
		<!-- Left column -->
		<li class="template-layout-column-left">
			<!-- Image -->
			<div class="template-component-image template-preloader">
				<a href="#">
					<img src="media/image/_sample/690x414/4.jpg" alt="">
					<span><span><span></span></span></span>
				</a>
			</div>
			<!-- Header -->
			<h5><a href="#">Learning Time With Katie</a></h5>
			<!-- Date -->
			<div class="template-component-recent-post-date">September 10, 2014</div>
			<!-- Excerpt -->
			<p>Magna est consectetur interdum modest dictum. Curabitur est faucibus, malesuada esttincidunt etos et mauris, nunc a libero govum est cuprum.</p>
			<!-- Meta -->
			<ul class="template-component-recent-post-meta">
				<li class="template-icon-blog template-icon-blog-author"><a href="#">Anna Brown</a></li>
				<li class="template-icon-blog template-icon-blog-category">
					<a href="#">Mettings</a>,
					<a href="#">Music</a>
				</li>
				<li class="template-icon-blog template-icon-blog-comment"><a href="#">0 Comments</a></li>
			</ul>
		</li>
		<!-- Right column -->
		<li class="template-layout-column-right">
			<div class="template-component-image template-preloader">
				<a href="#">
					<img src="media/image/_sample/690x414/10.jpg" alt="">
					<span><span><span></span></span></span>
				</a>
			</div>
			<h5><a href="#">Tenderhearts City Zoo Trip</a></h5>
			<div class="template-component-recent-post-date">August 15, 2014</div>
			<p>Magna est consectetur interdum modest dictum. Curabitur est faucibus, malesuada esttincidunt etos et mauris, nunc a libero govum est cuprum.</p>
			<ul class="template-component-recent-post-meta">
				<li class="template-icon-blog template-icon-blog-author"><a href="#">Anna Brown</a></li>
				<li class="template-icon-blog template-icon-blog-category">
					<a href="#">News</a>,
					<a href="#">Recreation</a>
				</li>
				<li class="template-icon-blog template-icon-blog-comment"><a href="#">0 Comments</a></li>
			</ul>			
		</li>
	</ul>
</div>