Карточки

В блоке «Карточки» можно разместить набор карточек с вертикальной и горизонтальной прокруткой.

  1. Вертикальная прокрутка
  2. Горизонтальная прокрутка

Вертикальная прокрутка

Чтобы разместить блок «Карточки» с вертикальной прокруткой, используйте вложенные элементы 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
Содержимое верхней части карточки.
img
Изображение. Атрибут src должен содержать URL изображения.
h2
Заголовок карточки.
img
Изображение. Атрибут src должен содержать URL изображения.
footer
Содержимое нижней части карточки.
a *
Ссылка. Атрибут href должен содержать URL страницы.
div data-block="more"
Блок с кнопкой.
a *
Ссылка. Атрибут 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 страницы.
Атрибут Описание
data-title * Заголовок карточки.
data-img * URL изображения.
data-url * URL страницы.

* Обязательный атрибут.