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

Чтобы разместить блок «Карточки» с вертикальной прокруткой, используйте вложенные элементы 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 изображения.* Обязательный параметр
Горизонтальная прокрутка

Чтобы разместить блок «Карточки» с горизонтальной прокруткой, используйте вложенный элемент 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 страницы. |
* Обязательный атрибут.