Cards

In the “Cards” block, you can place a set of cards with vertical and horizontal scrolling.

  1. Vertical scrolling
  2. Horizontal scrolling

Vertical scrolling

To place the “Cards” block with the vertical scrolling feature, use the div nested elements with the data-block="card" attribute:

<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>
Copied to clipboard

The <div data-block="card"> element can contain any supported markup elements.

header
Content of the card's upper part.
img
Image. The src attribute must contain the image URL.
h2
The card heading.
img
Image. The src attribute must contain the image URL.
footer
Content of the card's lower part.
a *
Link. The href attribute must contain the page URL.
div data-block="more"
The block with a button.
a *
Link. The href attribute must contain the page URL.

Required

Horizontal scrolling

To place the “Cards” block with the horizontal scrolling feature, use the div nested element with the data-block="carousel" attribute:

<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>
Copied to clipboard

The attributes of the nested <div data-block="snippet">:

Attribute Description
data-title * The card heading.
data-img * The image URL.
data-url * The page URL.