Block of links to additional materials
To place a block of additional materials, use the nested structure of elements div
:
<div data-block="feed" data-layout="vertical" data-title="Read also"> <div data-block="feed-item" data-title="Title 1" data-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit" data-href="https://example.com/page-1.html" data-thumb="https://clck.ru/FFAuR" data-thumb-position="top" data-thumb-ratio="16x10"> </div> <div data-block="feed-item" data-title="Title 2" data-description="Etiam sed finibus felis. Sed ornare maximus tincidunt" data-href="https://example.com/page-2.html" data-thumb="https://clck.ru/FFAvn" data-thumb-position="left" data-thumb-ratio="4x3"> </div> <div data-block="feed-item" data-title="Title 3" data-description="Nullam at lacus laoreet, volutpat metus ut, imperdiet metus" data-href="https://example.com/page-3.html" data-thumb="https://clck.ru/Kiun7" data-thumb-position="left" data-thumb-ratio="4x3"> </div> </div>
Copied to clipboard
The root <div data-block="feed">
must contain at least one nested <div data-block="feed-item">
. You can insert an unlimited number of these blocks anywhere on the Turbo page.
External attributes <div data-block="feed">
:
Attribute | Description |
---|---|
data-layout | Link list orientation. Possible values:
The default value is vertical. |
data-title | Link block title. The default value is “See also”. |
Attribute | Description |
---|---|
data-layout | Link list orientation. Possible values:
The default value is vertical. |
data-title | Link block title. The default value is “See also”. |
<div data-block="feed-item">
:Attribute | Description |
---|---|
data-href * | The page URL. |
data-title * | The link text. |
data-description | Short description. |
data-thumb | The image link. Attention. This attribute is required when placing links horizontally: data-layout="horizontal" . |
data-thumb-position | The image position. Possible values:
The default value is left. The attribute is ignored when links are placed horizontally: |
data-thumb-ratio | The picture proportions. Possible values:
By default, images on the left and on the right are displayed in 1 × 1 format. Images on the top are displayed in 16 × 9 format. |
Attribute | Description |
---|---|
data-href * | The page URL. |
data-title * | The link text. |
data-description | Short description. |
data-thumb | The image link. Attention. This attribute is required when placing links horizontally: data-layout="horizontal" . |
data-thumb-position | The image position. Possible values:
The default value is left. The attribute is ignored when links are placed horizontally: |
data-thumb-ratio | The picture proportions. Possible values:
By default, images on the left and on the right are displayed in 1 × 1 format. Images on the top are displayed in 16 × 9 format. |
*Required attribute.