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

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

Заголовок блока ссылок.

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

Атрибуты вложенного <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.

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

Написать в службу поддержки

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

Была ли статья полезна?