Карточки
В блоке «Карточки» можно разместить набор карточек с вертикальной и горизонтальной прокруткой.
Вертикальная прокрутка
Чтобы разместить блок «Карточки» с вертикальной прокруткой, используйте вложенные элементы div
с атрибутом data-block="card"
<div data-block="cards">
<div data-block="card">
<header>
<img src="https://clck.ru/L7BWf">
<h2>Heading 1</h2>
</header>
<!-- Начало содержимого карточки. -->
<img src="https://clck.ru/FFAuR">
<p>Content 1</p>
<!-- Конец содержимого карточки. -->
<footer>
<a href="https://example.com/page-1.html">Read more...</a>
</footer>
</div>
<div data-block="card">
<figure data-turbo-ad-id="first_ad_block"></figure>
</div>
<div data-block="card">
<header>
<img src="https://clck.ru/L7BX4">
<h2>Heading 2</h2>
</header>
<!-- Начало содержимого карточки. -->
<img src="https://clck.ru/FFAuR">
<p>Content 2</p>
<!-- Конец содержимого карточки. -->
<footer>
<a href="https://example.com/page-2.html">Read more...</a>
</footer>
<div data-block="more">
<a data-block="button" href="https://example.com">Home</a>
</div>
</div>
</div>
Элемент <div data-block="card">
может содержать любые поддерживаемые элементы разметки.
|
Содержимое верхней части карточки. |
Элементы, входящие в header
.
|
Изображение. Атрибут src должен содержать URL изображения. |
|
Заголовок карточки. |
|
Содержимое нижней части карточки. |
Элементы, входящие в footer
.
|
Ссылка. Атрибут href должен содержать URL страницы. |
|
Блок с кнопкой. |
Элементы входящие в div data-block="more"
.
|
Ссылка. Атрибут href должен содержать URL страницы. |
* Обязательный параметр
Горизонтальная прокрутка
Чтобы разместить блок «Карточки» с горизонтальной прокруткой, используйте вложенный элемент div
с атрибутом data-block="carousel"
<div data-block="cards">
<div data-block="carousel">
<header>Heading</header>
<div data-block="snippet"
data-title="Card 1"
data-img="https://clck.ru/FFAuR"
data-url="https://example.com/page1.html">
</div>
<div data-block="snippet"
data-title="Card 2"
data-img="https://clck.ru/FFAvn"
data-url="https://example.com/page2.html">
</div>
<div data-block="snippet"
data-title="Card 3"
data-img="https://clck.ru/Kiun7"
data-url="https://example.com/page3.html">
</div>
</div>
</div>
Атрибуты вложенного <div data-block="snippet">
Атрибут | Описание |
---|---|
data-title * |
Заголовок карточки. |
data-img * |
URL изображения. |
data-url * |
URL страницы. |
* Обязательный атрибут.
Обязательный параметр