Blog Feed Styles | Agent Image UIX

Main Content

Blog Feed Style 1

Close

HTML

<section class="aios-blog-style-1">
	<h2>Latest <strong>Posts</strong></h2>
	<div class="container">
		<div class="row">
			<div class="blog-wrap">
				<div class="blog-list col-md-3 col-sm-6">
					<div class="blog-image">
						<canvas width="263" height="216" style="background-image: url(components/blog/blog-style-1/images/image-holder.png)">
						</canvas>
						<div class="blog-date">
							<span>25 <i>Jun</i></span>
						</div>
					</div>
					<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
					<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...</p>
					<a href="#">[ read more ]</a>
				</div>
				<div class="blog-list col-md-3 col-sm-6">
					<div class="blog-image">
						<canvas width="263" height="216" style="background-image: url(components/blog/blog-style-1/images/image-holder.png)">
						</canvas>
						<div class="blog-date">
							<span>30 <i>Jun</i></span>
						</div>
					</div>
					<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
					<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...</p>
					<a href="#">[ read more ]</a>
				</div>
				<div class="blog-list col-md-3 col-sm-6">
					<div class="blog-image">
						<canvas width="263" height="216" style="background-image: url(components/blog/blog-style-1/images/image-holder.png)">
						</canvas>
						<div class="blog-date">
							<span>02 <i>jul</i></span>
						</div>
					</div>
					<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
					<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...</p>
					<a href="#">[ read more ]</a>
				</div>
				<div class="blog-list col-md-3 col-sm-6">
					<div class="blog-image">
						<canvas width="263" height="216" style="background-image: url(components/blog/blog-style-1/images/image-holder.png)">
						</canvas>
						<div class="blog-date"><span>15 <i>jul</i></span></div>
					</div>
					<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
					<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...</p>
					<a href="#">[ read more ]</a>
				</div>

			</div>
		</div>
	</div>
</section>

CSS

.aios-blog-style-1{
	margin: 20px 0;

}

	.aios-blog-style-1 h2{
		text-align: center;
		font-size: 26px;
		text-transform: uppercase;
		font-weight: 400;
		letter-spacing: 6px;
		padding: 25px 0;
	}
		.aios-blog-style-1 h2 strong{
			font-weight: 700;
		}
	.aios-blog-style-1 .blog-wrap{

	}
		.aios-blog-style-1 .blog-list{
			position: relative;
			padding-bottom: 30px;
		}
			.aios-blog-style-1 .blog-list .blog-image{
				position: relative;
			}
				.aios-blog-style-1 .blog-list canvas{
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center center;
					background-color:  #d7d7d7;
					width: 100%;
					height: auto;
					display: block;		
				}
				.aios-blog-style-1 .blog-list .blog-date{
					position: absolute;
					left: 0;
					top: 0;
					width: 57px;
					height: 67px;
					background: #c4c4c4;
					font-family: 'Lato', sans-serif;
					text-align: center;
				}
					.aios-blog-style-1 .blog-list .blog-date span{
						display: inline-block;
						vertical-align: middle;
						color: #fff;
						font-weight: 300;
						font-size: 24px;
						text-align: center;
					}
					.aios-blog-style-1 .blog-list .blog-date:After{
						content: "";
						height: 100%;
						width: 0;
						display: inline-block;
						vertical-align: middle;
					}
						.aios-blog-style-1 .blog-list .blog-date span i{
							font-style: normal;
							font-size: 10px;
							display: block;
						}
			.aios-blog-style-1 .blog-list h3{
				font-size: 16px;
				font-weight: 700;
				text-transform: uppercase;
				color: #959595;
				padding: 27px 0;
			}
			.aios-blog-style-1 .blog-list p{
				color: #777777;
				font-weight: 400;
				font-size: 12px;
				line-height: 20px;
				text-align: justify;
			}
			.aios-blog-style-1 .blog-list a{
				color: #009bbb;
				font-weight: 400;
				font-size: 10px;
				display: block;
				margin-top: 27px;
			}

CSS Mobile

Javascript

Latest Posts

25 Jun

Donec eget aliquam eros,
ut dapibus ipsum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...

[ read more ]

30 Jun

Donec eget aliquam eros,
ut dapibus ipsum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...

[ read more ]

02 jul

Donec eget aliquam eros,
ut dapibus ipsum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...

[ read more ]

15 jul

Donec eget aliquam eros,
ut dapibus ipsum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...

[ read more ]

Blog Feed Style 2

Close

HTML

<section class="aios-blog-style-2">
	<h2>Latest <strong>Posts</strong></h2>
	<div class="container">
		<div class="row">
			<div class="blog-wrap">
				<div class="blog-list col-md-3 col-sm-6">
					<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
					<canvas width="263" height="216" style="background-image: url(components/blog/blog-style-2/images/image-holder.png)">
					</canvas>
					<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...</p>
					<a href="#">Read More</a>
				</div>
				<div class="blog-list col-md-3 col-sm-6">
					<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
					<canvas width="263" height="216" style="background-image: url(components/blog/blog-style-2/images/image-holder.png)">
					</canvas>
					<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...</p>
					<a href="#">Read More</a>
				</div>
				<div class="blog-list col-md-3 col-sm-6">
					<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
					<canvas width="263" height="216" style="background-image: url(components/blog/blog-style-2/images/image-holder.png)">
					</canvas>
					<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...</p>
					<a href="#">Read More</a>
				</div>
				<div class="blog-list col-md-3 col-sm-6">
					<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
					<canvas width="263" height="216" style="background-image: url(components/blog/blog-style-2/images/image-holder.png)">
					</canvas>
					<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...</p>
					<a href="#">Read More</a>
				</div>

			</div>
		</div>
	</div>
</section>

CSS

.aios-blog-style-2{
	margin: 20px 0;

}
	.aios-blog-style-2 h2{
		text-align: center;
		font-size: 26px;
		text-transform: uppercase;
		font-weight: 400;
		letter-spacing: 6px;
		padding: 25px 0;
	}
		.aios-blog-style-2 h2 strong{
			font-weight: 700;
		}
	.aios-blog-style-2 .blog-wrap{

	}
		.aios-blog-style-2 .blog-list{
			position: relative;
			padding-bottom: 30px;
		}
			.aios-blog-style-2 .blog-list canvas{
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
				background-color:  #d7d7d7;
				width: 100%;
				height: auto;
				display: block;		
			}
			.aios-blog-style-2 .blog-list h3{
				font-size: 16px;
				font-weight: 700;
				text-transform: uppercase;
				color: #959595;
				padding: 0  0 27px;
			}
			.aios-blog-style-2 .blog-list p{
				color: #777777;
				font-weight: 400;
				font-size: 12px;
				line-height: 20px;
				text-align: justify;
				padding-top: 27px;
			}
			.aios-blog-style-2 .blog-list a{
				color: #5c5c5c;
				font-weight: 400;
				font-size: 10px;
				display: block;
				margin-top: 27px;
				border: solid 1px #d9d9d9;
				width: 109px;
				height: 37px;
				line-height: 37px;
				letter-spacing: 0.2em;
				text-transform: uppercase;
				text-align: center;
				text-decoration: none;
				transition: all .25s ease-in-out;
				-moz-transition: all .25s ease-in-out;
				-webkit-transition: all .25s ease-in-out;
			}
				.aios-blog-style-2 .blog-list a:hover{
					color: #fff;
					background: #009bbb;
					border-color: #009bbb;
				}

CSS Mobile

Javascript

Latest Posts

Donec eget aliquam eros,
ut dapibus ipsum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...

Donec eget aliquam eros,
ut dapibus ipsum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...

Donec eget aliquam eros,
ut dapibus ipsum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...

Donec eget aliquam eros,
ut dapibus ipsum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...

Blog Feed Style 3

Close

HTML

<section class="aios-blog-style-3">
	<h2>Latest <strong>Posts</strong></h2>
	<div class="container">
		<div class="row">
			<div class="blog-wrap">
				<div class="blog-list col-md-3 col-sm-6">
					<div class="bg-list-wrap">
						<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
						<canvas width="263" height="216" style="background-image: url(components/blog/blog-style-3/images/image-holder.png)">
						</canvas>
						<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...</p>
						<a href="#">Read More</a>
					</div>
				</div>
				<div class="blog-list col-md-3 col-sm-6">
					<div class="bg-list-wrap">
						<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
						<canvas width="263" height="216" style="background-image: url(components/blog/blog-style-3/images/image-holder.png)">
						</canvas>
						<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...</p>
						<a href="#">Read More</a>
					</div>
				</div>
				<div class="blog-list col-md-3 col-sm-6">
					<div class="bg-list-wrap">
						<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
						<canvas width="263" height="216" style="background-image: url(components/blog/blog-style-3/images/image-holder.png)">
						</canvas>
						<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...</p>
						<a href="#">Read More</a>
					</div>
				</div>
				<div class="blog-list col-md-3 col-sm-6">
					<div class="bg-list-wrap">
						<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
						<canvas width="263" height="216" style="background-image: url(components/blog/blog-style-3/images/image-holder.png)">
						</canvas>
						<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...</p>
						<a href="#">Read More</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

CSS

.aios-blog-style-3{
	margin: 20px 0;

}
	.aios-blog-style-3 h2{
		text-align: center;
		font-size: 26px;
		text-transform: uppercase;
		font-weight: 400;
		letter-spacing: 6px;
		padding: 25px 0;
	}
		.aios-blog-style-3 h2 strong{
			font-weight: 700;
		}
	.aios-blog-style-3 .blog-wrap{

	}
		.aios-blog-style-3 .bg-list-wrap{
			background-color: #f2f2f2;
			border: solid 1px #dfdfdf;
			padding: 14px;
			width: 100%;
			height: auto;
		}
			.aios-blog-style-3 .blog-list{
				position: relative;
				padding-bottom: 30px;
			}
				.aios-blog-style-3 .blog-list canvas{
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center center;
					background-color:  #d7d7d7;
					width: 100%;
					height: auto;
					display: block;		
				}
				.aios-blog-style-3 .blog-list h3{
					font-size: 14px;
					font-weight: 600;
					text-transform: uppercase;
					color: #959595;
					padding: 0  0 13px;
				}
				.aios-blog-style-3 .blog-list p{
					color: #777777;
					font-weight: 400;
					font-size: 12px;
					line-height: 20px;
					text-align: justify;
					padding-top: 27px;
				}
				.aios-blog-style-3 .blog-list a{
					color: #5c5c5c;
					font-weight: 400;
					font-size: 10px;
					display: block;
					margin-top: 27px;
					margin-bottom: 10px;
					border: solid 1px #d9d9d9;
					width: 109px;
					height: 37px;
					line-height: 37px;
					letter-spacing: 0.2em;
					text-transform: uppercase;
					text-align: center;
					text-decoration: none;
					transition: all .25s ease-in-out;
					-moz-transition: all .25s ease-in-out;
					-webkit-transition: all .25s ease-in-out;
				}
					.aios-blog-style-3 .blog-list a:hover{
						color: #fff;
						background: #009bbb;
						border-color: #009bbb;
					}

CSS Mobile

Javascript

Latest Posts

Donec eget aliquam eros,
ut dapibus ipsum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...

Donec eget aliquam eros,
ut dapibus ipsum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...

Donec eget aliquam eros,
ut dapibus ipsum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...

Donec eget aliquam eros,
ut dapibus ipsum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at...

Blog Feed Style 4

Close

HTML

<section class="aios-blog-style-4">
	<h2>Latest <strong>Posts</strong></h2>
	<div class="container">
		<div class="row">
			<div class="blog-wrap">
				<div class="blog-list col-md-3 col-sm-6">
					<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
					<p>Donec eget aliquam eros, ut dapibus ipsum. Morbi pellentesque lectus quis nibh malesuada rhoncus. Vestibulum facilisis a libero ut pellentesque. Praesent libero lacus, hendrerit vel feugiat nec, fermentum sed enim. Pellentesque luctus et tortor in aliquam. Quisque posuere at arcu quis pretium. Cras suscipit quam vehicula imperdiet laoreet.</p>
					<a href="#">Read More</a>
				</div>
				<div class="blog-list col-md-3 col-sm-6">
					<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
					<p>Donec eget aliquam eros, ut dapibus ipsum. Morbi pellentesque lectus quis nibh malesuada rhoncus. Vestibulum facilisis a libero ut pellentesque. Praesent libero lacus, hendrerit vel feugiat nec, fermentum sed enim. Pellentesque luctus et tortor in aliquam. Quisque posuere at arcu quis pretium. Cras suscipit quam vehicula imperdiet laoreet.</p>
					<a href="#">Read More</a>
				</div>
				<div class="blog-list col-md-3 col-sm-6">
					<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
					<p>Donec eget aliquam eros, ut dapibus ipsum. Morbi pellentesque lectus quis nibh malesuada rhoncus. Vestibulum facilisis a libero ut pellentesque. Praesent libero lacus, hendrerit vel feugiat nec, fermentum sed enim. Pellentesque luctus et tortor in aliquam. Quisque posuere at arcu quis pretium. Cras suscipit quam vehicula imperdiet laoreet.</p>
					<a href="#">Read More</a>
				</div>
				<div class="blog-list col-md-3 col-sm-6">
					<h3>Donec eget aliquam eros, <br>ut dapibus ipsum.</h3>
					<p>Donec eget aliquam eros, ut dapibus ipsum. Morbi pellentesque lectus quis nibh malesuada rhoncus. Vestibulum facilisis a libero ut pellentesque. Praesent libero lacus, hendrerit vel feugiat nec, fermentum sed enim. Pellentesque luctus et tortor in aliquam. Quisque posuere at arcu quis pretium. Cras suscipit quam vehicula imperdiet laoreet.</p>
					<a href="#">Read More</a>
				</div>

			</div>
		</div>
	</div>
</section>

CSS

.aios-blog-style-4{
	margin: 20px 0;

}
	.aios-blog-style-4 h2{
		text-align: center;
		font-size: 26px;
		text-transform: uppercase;
		font-weight: 400;
		letter-spacing: 6px;
		padding: 25px 0;
	}
		.aios-blog-style-4 h2 strong{
			font-weight: 700;
		}
	.aios-blog-style-4 .blog-wrap{

	}
		.aios-blog-style-4 .blog-list{
			position: relative;
			padding-bottom: 30px;
		}
			.aios-blog-style-4 .blog-list canvas{
				background: url(images/image-holder.png) no-repeat center center #d7d7d7;
				width: 100%;
				height: auto;
				display: block;		
			}
			.aios-blog-style-4 .blog-list h3{
				font-size: 14px;
				font-weight: 600;
				text-transform: uppercase;
				color: #959595;
				padding: 0  0 30px;
				border-bottom: 1px solid #e3e3e3;
			}
			.aios-blog-style-4 .blog-list p{
				color: #777777;
				font-weight: 400;
				font-size: 12px;
				line-height: 20px;
				text-align: justify;
				padding-top: 27px;
			}
			.aios-blog-style-4 .blog-list a{
				color: #5c5c5c;
				font-weight: 400;
				font-size: 10px;
				display: block;
				margin-top: 27px;
				margin-bottom: 10px;
				border: solid 1px #d9d9d9;
				width: 109px;
				height: 37px;
				line-height: 37px;
				letter-spacing: 0.2em;
				text-transform: uppercase;
				text-align: center;
				text-decoration: none;
				transition: all .25s ease-in-out;
				-moz-transition: all .25s ease-in-out;
				-webkit-transition: all .25s ease-in-out;
			}
				.aios-blog-style-4 .blog-list a:hover{
					color: #fff;
					background: #009bbb;
					border-color: #009bbb;
				}

CSS Mobile

Javascript

Latest Posts

Donec eget aliquam eros,
ut dapibus ipsum.

Donec eget aliquam eros, ut dapibus ipsum. Morbi pellentesque lectus quis nibh malesuada rhoncus. Vestibulum facilisis a libero ut pellentesque. Praesent libero lacus, hendrerit vel feugiat nec, fermentum sed enim. Pellentesque luctus et tortor in aliquam. Quisque posuere at arcu quis pretium. Cras suscipit quam vehicula imperdiet laoreet.

Donec eget aliquam eros,
ut dapibus ipsum.

Blog Feed Style 5

Close

HTML

<section class="aios-blog-style-5">
	<h2>Latest <strong>Posts</strong></h2>
	<div class="container">
		<div class="row">
			<div class="blog-wrap">
				<div class="blog-list col-md-4 col-sm-6">
					<div class="blog-image">
						<canvas width="99" height="99" style="background-image: url(components/blog/blog-style-5/images/image-holder.png)">
						</canvas>
					</div>
					<div class="blog-content">
						<h3>Aenean metus libero, mole.</h3>
						<p>Mauris molestie risus quam, id elementum ante feugiat eu. Integer convallis interdum...<a href="#">[Read More » ]</a> </p>
						
					</div>
				</div>
				<div class="blog-list col-md-4 col-sm-6">
					<div class="blog-image">
						<canvas width="99" height="99" style="background-image: url(components/blog/blog-style-5/images/image-holder.png)">
						</canvas>
					</div>
					<div class="blog-content">
						<h3>Phasellus sodales, erat sit</h3>
						<p>Mauris molestie risus quam, id elementum ante feugiat eu. Integer convallis interdum...<a href="#">[Read More » ]</a></p>
						
					</div>
				</div>
				<div class="blog-list col-md-4 col-sm-6">
					<div class="blog-image">
						<canvas width="99" height="99" style="background-image: url(components/blog/blog-style-5/images/image-holder.png)">
						</canvas>
					</div>
					<div class="blog-content">
						<h3>Vivamus in neque pretium</h3>
						<p>Mauris molestie risus quam, id elementum ante feugiat eu. Integer convallis interdum... <a href="#">[Read More » ]</a></p>
						
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

CSS

.aios-blog-style-5{
	margin: 20px 0;
}

	.aios-blog-style-5 h2{
		text-align: center;
		font-size: 26px;
		text-transform: uppercase;
		font-weight: 400;
		letter-spacing: 6px;
		padding: 25px 0;
	}
		.aios-blog-style-5 h2 strong{
			font-weight: 700;
		}
	.aios-blog-style-5 .blog-wrap{

	}
		.aios-blog-style-5 .blog-list{
			position: relative;
			font-size: 0;
			padding-bottom: 30px;
		}
			.aios-blog-style-5 .blog-list .blog-image{
				position: relative;
				display: inline-block;
				vertical-align: top;
			    width: 27.5%;
			}

				.aios-blog-style-5 .blog-list canvas{
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center center;
					background-color:  #d7d7d7;
					width: 100%;
					height: auto;
					display: block;		
				}

			.aios-blog-style-5 .blog-list .blog-content{
				display: inline-block;
				vertical-align: top;
				width: 67.5%;
				margin-left: 5%;
			}
			.aios-blog-style-5 .blog-list h3{
				font-size: 14px;
				font-weight: 700;
				text-transform: uppercase;
				color: #959595;
				padding: 11px 0;
			}
			.aios-blog-style-5 .blog-list p{
				color: #777777;
				font-weight: 400;
				font-size: 12px;
				line-height: 20px;
			}
			.aios-blog-style-5 .blog-list a{
				color: #009bbb;
			}

CSS Mobile

Javascript

Latest Posts

Aenean metus libero, mole.

Mauris molestie risus quam, id elementum ante feugiat eu. Integer convallis interdum...[Read More » ]

Phasellus sodales, erat sit

Mauris molestie risus quam, id elementum ante feugiat eu. Integer convallis interdum...[Read More » ]

Vivamus in neque pretium

Mauris molestie risus quam, id elementum ante feugiat eu. Integer convallis interdum... [Read More » ]