Блок ссылок на дополнительные материалы

Чтобы разместить блок дополнительных материалов, используйте вложенную структуру элементов div:
<div data-block="feed">
    <div data-block="feed-item" ...></div>
    ...
</div>
Корневой <div data-block="feed"> должен содержать хотя бы один вложенный <div data-block="feed-item">.


<div data-block="feed" data-layout="horizontal" data-title="Читайте также">
    <div data-block="feed-item"
        data-href="https://adelaide.au.com"
        data-title="Welcome"
        data-thumb="https://u24.services/media/service/poster/None/750eb2a4d7f9355bfcaabb19d3019ee388e26101.jpg"
        data-thumb-position="top"
        data-thumb-ratio="3x2"
        data-description="5 reasons to visit the capital of South Australia">
    </div>
    <div data-block="feed-item"
        data-thumb="https://u24.services/media/service/poster/None/750eb2a4d7f9355bfcaabb19d3019ee388e26101.jpg"
        data-thumb-position="left"
        data-thumb-ratio="16x10"
        data-href="https://sydney.au.com"
        data-title="The best city in the world and the capital of New South Wales">
    </div>
</div>
Количество таких блоков не ограничено, их можно размещать в любом месте Турбо-страницы.

Атрибуты внешнего <div data-block="feed">:

Атрибут Описание
data-layout Ориентация списка ссылок. Возможные значения:
  • horizontal — ссылки располагаются горизнотально.
  • vertical — ссылки располагаются вертикально.

Значение по умолчанию — vertical.

data-title Заголовок блока ссылок.

Значение по умолчанию — «Читайте также».

Атрибуты вложенного <div data-block="feed-item">:
Атрибут Описание
data-href * URL страницы.
data-title * Текст ссылки.
data-description Короткое описание.
data-thumb Ссылка на картинку.
Внимание. Атрибут является обязательным при горизонтальном расположении ссылок: data-layout="horizontal".
data-thumb-position

Положение картинки. Возможные значения:

  • left;
  • right;
  • top.

Значение по умолчанию — left.

Атрибут игнорируется при горизонтальном расположении ссылок: data-layout="horizontal".

data-thumb-ratio
Пропорции картинки. Возможные значения:
  • 1 × 1;
  • 2 × 3;
  • 3 × 2;
  • 3 × 4;
  • 4 × 3;
  • 16 × 9;
  • 16 × 10.

По умолчанию слева и справа отображаются картинки в формате 1 × 1, а сверху 16 × 9.

* Обязательный атрибут.