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

Чтобы разместить блок дополнительных материалов, используйте вложенную структуру элементов 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>
Скопировано

Корневой <div data-block="feed"> должен содержать хотя бы один вложенный <div data-block="feed-item">. Количество таких блоков не ограничено, их можно размещать в любом месте Турбо‑страницы.

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

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

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

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

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

Атрибут Описание
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.

Атрибут Описание
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.

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