Блок "Demo links"

Описание

Блок "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>
						
					

Mix с блоком link_animated-slide-black

Подключите следующие 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>