Блок списка статей

В списке статей показан блок(вид) статьи test.

Верстку и css елемента статьи можно посмотреть здесь

№1 Список статей в слайдере

(Вид до поключения слайдера)

(Вид после поключения слайдера)

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

<div class="el_articleListBlock_xxxxxx">
	<p class="el_blockTitle_xxxxxx clearfix">Новости</p>
	<div class="articleListSlider typeContentBlock1 inRow3 row clearfix">
		<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>
		<div class="el_articleItem_xxxxxx col">...</div>
		...
		<div class="el_articleItem_xxxxxx col">...</div>
	</div>
</div>

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

.el_articleListBlock_xxxxxx
{
}
 
.el_articleListBlock_xxxxxx .articleListSlider.slick-slider
{
	margin-bottom: 30px;
}
 
.el_articleListBlock_xxxxxx .articleListSlider .el_articleItem_xxxxxx
{
	margin-bottom: 30px;
}
.el_articleListBlock_xxxxxx .articleListSlider.slick-slider .el_articleItem_xxxxxx
{
	margin-bottom: 0px;
}
 
/*****/
 
.articleListSlider.slick-slider .slick-arrow
{
	z-index: 30;
}
.articleListSlider.slick-slider .slick-prev
{
	left: 25px;
}
.articleListSlider.slick-slider .slick-next
{
	right: 25px;
}
 
.articleListSlider.slick-slider .slick-prev::before,
.articleListSlider.slick-slider .slick-next::before
{
	color: #2091C9;
}
 
.articleListSlider.slick-slider .slick-dots
{
	display: none !important;
}
.articleListSlider.slick-slider .slick-dots li
{
}
.articleListSlider.slick-slider .slick-dots li button
{
}
.articleListSlider.slick-slider .slick-dots li button::before
{
}
.articleListSlider.slick-slider .slick-dots li.slick-active button::before
{
	color: #2091C9;
}

Содержимое блока без javascript должно смотреться корректно. Для этого можно использовать css списка здесь

№2 Список статей (тип блока 1 (typeContentBlock1) например на всю ширину без левого и правого меню)

Тут показанны блоки списков товаров от 2 до 7 елементов в строке при максимальной ширине блока


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

<!-- inRow2 - класс указивающий количество елементов в строке при максимальной ширине блока -->
<!-- от inRow2 до inRow7 -->
<div class="articleList typeContentBlock1 row inRow2 {{ inRow2HideClass }} clearfix">
	<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>
	<div class="el_articleItem_xxxxxx col">...</div>
	...
	<div class="el_articleItem_xxxxxx col">...</div>
</div>

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

.el_articleList_xxxxxx
{
}
 
.el_articleList_xxxxxx .el_articleItem_xxxxxx
{
	margin-bottom: 30px;
}

css списка можно посмотреть здесь

№3 Список статей (тип блока 2 (typeContentBlock2) например с левым или правым меню)

Тут показанны блоки списков статей от 2 до 7 елементов в строке при максимальной ширине блока


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

<!-- inRow2 - класс указивающий количество елементов в строке при максимальной ширине блока -->
<!-- от inRow2 до inRow7 -->
<div class="articleList typeContentBlock2 row inRow2 {{ inRow2HideClass }} clearfix">
	<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>
	<div class="el_articleItem_xxxxxx col">...</div>
	...
	<div class="el_articleItem_xxxxxx col">...</div>
</div>

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

.el_articleList_xxxxxx
{
}
 
.el_articleList_xxxxxx .el_articleItem_xxxxxx
{
	margin-bottom: 30px;
}

css списка можно посмотреть здесь

№4 Список статей (тип блока 3 (typeContentBlock3) например с левым и правым меню)

Тут показанны блоки списков статей от 2 до 7 елементов в строке при максимальной ширине блока


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

<!-- inRow2 - класс указивающий количество елементов в строке при максимальной ширине блока -->
<!-- от inRow2 до inRow7 -->
<div class="articleList typeContentBlock3 row inRow2 {{ inRow2HideClass }} clearfix">
	<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>
	<div class="el_articleItem_xxxxxx col">...</div>
	...
	<div class="el_articleItem_xxxxxx col">...</div>
</div>

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

.el_articleList_xxxxxx
{
}
 
.el_articleList_xxxxxx .el_articleItem_xxxxxx
{
	margin-bottom: 30px;
}

css списка можно посмотреть здесь