Блок "Link"

Описание

Блок "Link" - это ссылка. Для использования блока вам нужно в своем LESS файле подключить link.less.

						
@import "../../blocks/link/link.less" 
						
					

Важно! Путь указан относительно текущего файла. Вполне возможно, что вам потребуется указать свой.

Далее требуется скопировать следующую разметку и вставить в свой файл.

											
<a href="#0" class="link">Первая ссылка</a>
<a href="#0" class="link">Вторая ссылка</a>
<a href="#0" class="link">Третья ссылка</a>
<a href="#0" class="link">Четвертая ссылка</a>

						
					

После сделанных шагов вы должны увидеть в браузере следующий результат.

Модификации блока

Черный фон

Подключите требуемые LESS файлы в своем файле.

							
@import "../../blocks/link/link.less";
@import "../../blocks/link/modifiers/link_black/link_black.less";
							
						

Далее скопируйте следующий HTML и вставьте в свой файл.

											
<a href="#0" class="link link_black">Первая ссылка</a>
<a href="#0" class="link link_black">Вторая ссылка</a>
<a href="#0" class="link link_black">Третья ссылка</a>
<a href="#0" class="link link_black">Четвертая ссылка</a>

							
						

Вы должны увидеть следующий результат.

Белый фон и черная обводка

Подключите требуемые LESS файлы в своем файле.

							
@import "../../blocks/link/link.less";
@import "../../blocks/link/modifiers/link_white-border-black/link_white-border-black.less";
							
						

Далее скопируйте следующий HTML и вставьте в свой файл.

											
<a href="#0" class="link link_white-border-black">Первая ссылка</a>
<a href="#0" class="link link_white-border-black">Вторая ссылка</a>
<a href="#0" class="link link_white-border-black">Третья ссылка</a>
<a href="#0" class="link link_white-border-black">Четвертая ссылка</a>

							
						

Вы должны увидеть следующий результат.

Ссылка с анимацией. Еффект 1

Ссылка с черным фоном

Подключите требуемые LESS файлы в своем файле.

						  
@import "../../blocks/link/link.less";
@import "../../blocks/link/modifiers/link_animated-slide/link_animated-slide.less";
@import "../../blocks/link/modifiers/link_animated-slide/modifiers/link_animated-slide-black/link_animated-slide-black.less";
						
					

Далее скопируйте следующий HTML и вставьте в свой файл.

											
<a href="#0" class="link link_animated-slide link_animated-slide-black">
 <span class="link_animated-slide__label">Первая ссылка</span>
</a>
<a href="#0" class="link link_animated-slide link_animated-slide-black">
 <span class="link_animated-slide__label">Вторая ссылка</span>
</a>
<a href="#0" class="link link_animated-slide link_animated-slide-black">
 <span class="link_animated-slide__label">Третья ссылка</span>
</a>
<a href="#0" class="link link_animated-slide link_animated-slide-black">
 <span class="link_animated-slide__label">Четвертая ссылка</span>
</a>

						
					

Вы должны увидеть следующий результат.

Ссылка с черным белым фоном и черной обводкой

Подключите требуемые LESS файлы в своем файле.

						  
@import "../../blocks/link/link.less";
@import "../../blocks/link/modifiers/link_animated-slide/link_animated-slide.less";
@import "../../blocks/link/modifiers/link_animated-slide/modifiers/link_animated-slide-white-border-black/link_animated-slide-white-border-black.less";
						
					

Далее скопируйте следующий HTML и вставьте в свой файл.

											
<a href="#0" class="link link_animated-slide link_animated-slide-white-border-black">
 <span class="link_animated-slide__label">Первая ссылка</span>
</a>
<a href="#0" class="link link_animated-slide link_animated-slide-white-border-black">
 <span class="link_animated-slide__label">Вторая ссылка</span>
</a>
<a href="#0" class="link link_animated-slide link_animated-slide-white-border-black">
 <span class="link_animated-slide__label">Третья ссылка</span>
</a>
<a href="#0" class="link link_animated-slide link_animated-slide-white-border-black">
 <span class="link_animated-slide__label">Четвертая ссылка</span>
</a>

						
					

Вы должны увидеть следующий результат.

Ссылка с белым фоном

Подключите требуемые LESS файлы в своем файле.

						
@import "../../blocks/link/link.less";
@import "../../blocks/link/modifiers/link_animated-slide/link_animated-slide.less";
@import "../../blocks/link/modifiers/link_animated-slide/modifiers/link_animated-slide-white/link_animated-slide-white.less";
						
					

Далее скопируйте следующий HTML и вставьте в свой файл.

											

 Первая ссылка


 Вторая ссылка


 Третья ссылка


 Четвертая ссылка



						
					

Вы должны увидеть следующий результат.