Блок статей

Вид статьи может меняться взависимости от дизайна, но основные блоки должены сохраняться
Вот несколько видов:


Вид статьи в примере верстки


Посмотреть код html

<div class="el_articleItem_xxxxxx col">
	<div class="wrapperInner">
		<div class="row">
			<div class="col articleImageBlock">
				<div class="imageBlock image-flex">
					<a class="el" href="/article/"><img src="article.png" alt=""></a>
				</div>
			</div>
			<div class="col articleInfoBlock">
				<p class="title"><a href="/article/" title="Развитие структуры способствует подготовки и реализации">Развитие структуры способствует подготовки и реализации</a></p>
				<p class="date"><time>22.01.1986</time></p>
				<div class="description">Таким образом реализация намеченных плановых заданий представляет собой интересный эксперимент проверки форм развития.</div>
				<p class="readMore"><a href="/article/">Подробнее</a></p>
			</div>
		</div>
	</div>
</div>

Посмотреть код css

.el_articleItem_xxxxxx
{
}
.el_articleItem_xxxxxx .wrapperInner
{
	border: 1px solid #2091C9;
	border-radius: 3px;
	padding: 15px;
	height: 100%;
}
 
.el_articleItem_xxxxxx .articleImageBlock
{
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}
.el_articleItem_xxxxxx .imageBlock
{
	margin-bottom: 15px;
	padding-bottom: 100%; /* Высота блока с изображением статьи указывается в зависимости от дизайна */
}
.el_articleItem_xxxxxx .title
{
	margin-bottom: 15px;
	height: 45px;
	overflow: hidden;
	/*text-align: center;*/
}
.el_articleItem_xxxxxx .title a
{
	font-size: 1.4rem;
	color: #4fad25;
}
.el_articleItem_xxxxxx .title a:hover
{
	text-decoration: underline;
	color: #5bcc28;
}
.el_articleItem_xxxxxx .date
{
	margin-bottom: 10px;
	font-size: 1.4rem;
	color: #777777;
}
.el_articleItem_xxxxxx .description
{
	margin-bottom: 15px;
	font-size: 1.3rem;
	color: #777777;
}
.el_articleItem_xxxxxx .readMore
{
	font-size: 1.4rem;
	text-align: right;
}