Cards
In the “Cards” block, you can place a set of cards with vertical and 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.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. |
*Required attribute.