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:
  • horizontal — Links are placed horizontally.
  • vertical — Links are placed vertically.

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:
  • horizontal — Links are placed horizontally.
  • vertical — Links are placed vertically.

The default value is vertical.

data-title Link block title.

The default value is “See also”.

The attributes of the nested <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:

  • left.
  • right.
  • top.

The default value is left.

The attribute is ignored when links are placed horizontally: data-layout="horizontal".

data-thumb-ratio
The picture proportions. Possible values:
  • 1 × 1.
  • 2 × 3.
  • 3 × 2;
  • 3 × 4.
  • 4 × 3.
  • 16 × 9.
  • 16 × 10.

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:

  • left.
  • right.
  • top.

The default value is left.

The attribute is ignored when links are placed horizontally: data-layout="horizontal".

data-thumb-ratio
The picture proportions. Possible values:
  • 1 × 1.
  • 2 × 3.
  • 3 × 2;
  • 3 × 4.
  • 4 × 3.
  • 16 × 9.
  • 16 × 10.

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.