Блок "Demo links" - это блок с демонстрационными ссылками. Для использования блока нужно в своем LESS файле подключить demo-links.less и файл с выбранной модификацией.
@import "../../blocks/demo-links/demo-links.less";
@import "../../blocks/demo-links/modifiers/demo-links_3column/demo-links_3column.less";
// или
@import "../../blocks/demo-links/modifiers/demo-links_4column/demo-links_4column.less";
Важно! Путь указан относительно текущего файла. Вполне возможно, что вам потребуется указать свой.
Далее вам требуется выбрать нужную вариант из представленных ниже модификаций.
<div class="demo-links demo-links_3column">
<a href="#0" class="demo-link" target="blank">Первая ссылка</a>
<a href="#0" class="demo-link" target="blank">Вторая ссылка</a>
<a href="#0" class="demo-link" target="blank">Третья ссылка</a>
<a href="#0" class="demo-link" target="blank">Четвертая ссылка</a>
<a href="#0" class="demo-link" target="blank">Пятая ссылка</a>
<a href="#0" class="demo-link" target="blank">Шестая ссылка</a>
</div>
<div class="demo-links demo-links_4column">
<a href="#0" class="demo-link" target="blank">Первая ссылка</a>
<a href="#0" class="demo-link" target="blank">Вторая ссылка</a>
<a href="#0" class="demo-link" target="blank">Третья ссылка</a>
<a href="#0" class="demo-link" target="blank">Четвертая ссылка</a>
<a href="#0" class="demo-link" target="blank">Пятая ссылка</a>
<a href="#0" class="demo-link" target="blank">Шестая ссылка</a>
<a href="#0" class="demo-link" target="blank">Седьмая ссылка</a>
<a href="#0" class="demo-link" target="blank">Восьмая ссылка</a>
</div>
Подключите следующие LESS файлы.
@import "../../blocks/demo-links/demo-links.less";
@import "../../blocks/demo-links/modifiers/demo-links_4column/demo-links_4column.less";
@import "../../blocks/link/link.less";
@import "../../blocks/link/modifiers/link_animated-slide/link_animated-slide.css.less";
@import "../../blocks/link/modifiers/link_animated-slide/modifiers/link_animated-slide-black/link_animated-slide-black.less";
Важно! Путь указан относительно текущего файла. Вполне возможно, что вам потребуется указать свой.
Далее скопируйте следующий HTML и вставьте в свой файл.
<div class="demo-links demo-links_4column">
<a href="#0" class="demo-link link link_animated-slide link_animated-slide-black" target="blank">
<span class="link_animated-slide__label">Первая ссылка</span>
</a>
<a href="#0" class="demo-link link link_animated-slide link_animated-slide-black" target="blank">
<span class="link_animated-slide__label">Вторая ссылка</span>
</a>
<a href="#0" class="demo-link link link_animated-slide link_animated-slide-black" target="blank">
<span class="link_animated-slide__label">Третья ссылка</span>
</a>
<a href="#0" class="demo-link link link_animated-slide link_animated-slide-black" target="blank">
<span class="link_animated-slide__label">Четвертая ссылка</span>
</a>
<a href="#0" class="demo-link link link_animated-slide link_animated-slide-black" target="blank">
<span class="link_animated-slide__label">Пятая ссылка</span>
</a>
<a href="#0" class="demo-link link link_animated-slide link_animated-slide-black" target="blank">
<span class="link_animated-slide__label">Шестая ссылка</span>
</a>
<a href="#0" class="demo-link link link_animated-slide link_animated-slide-black" target="blank">
<span class="link_animated-slide__label">Седьмая ссылка</span>
</a>
<a href="#0" class="demo-link link link_animated-slide link_animated-slide-black" target="blank">
<span class="link_animated-slide__label">Восьмая ссылка</span>
</a>
</div>