Блок "Top panel"

Описание

Блок "Top panel" - это вверхняя панель страницы, которая содержит логотип и навигацию сайта. Для использования блока требуется подключить следующие LESS файлы.

						
@import "../../blocks/top-panel/top-panel.less";
@import "../../blocks/top-panel/modifiers/top-panel__logo-label/top-panel__logo-label.less";
@import "../../blocks/top-panel/modifiers/top-panel_black/top-panel_black.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/white/white.less";
						
					

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

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

											
	
 <header class="top-panel top-panel_black">
  <div class="main-container top-panel__layout">
   <h1 class="top-panel__logo">
    Logo
    <span class="top-panel__logo-label"> - description logo</span>
   </h1>
   <nav class="top-panel__nav">
    <a href="#0" class="link link_animated-slide link_animated-slide-white">
     <span class="link_animated-slide__label">Documentation</span>
    </a>
    <a href="#0" class="link link_animated-slide link_animated-slide-white">
     <span class="link_animated-slide__label">Buy</span>
    </a>
   </nav>
  </div>
 </header>
					
				

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

Logo - description logo

Модификации

Синий фон

Блок "Top panel" - это вверхняя панель страницы, которая содержит логотип и навигацию сайта. Для использования блока требуется подключить следующие LESS файлы.

						
@import "../../blocks/top-panel/top-panel.less";
@import "../../blocks/top-panel/modifiers/top-panel__logo-description/top-panel__logo-description.less";
@import "../../blocks/top-panel/modifiers/top-panel_black/top-panel_blue.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/white/white.less";
						
					

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

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

											
	
 <header class="top-panel top-panel_blue">
  <div class="main-container top-panel__layout">
   <h1 class="top-panel__logo">
    DevLib - библиотека блоков для быстрой разработки
   </h1>
  </div>
 </header>						  
					

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

DevLib - библиотека блоков для быстрой разработки

Описание проекта под логотипом

Блок "Top panel" - это вверхняя панель страницы, которая содержит логотип и навигацию сайта. Для использования блока требуется подключить следующие LESS файлы.

						
@import "../../blocks/top-panel/top-panel.less";
@import "../../blocks/top-panel/modifiers/top-panel__logo-description/top-panel__logo-description.less";
@import "../../blocks/top-panel/modifiers/top-panel_black/top-panel_black.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/white/white.less";
						
					

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

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

											
	
 <header class="top-panel top-panel_black">
  <div class="main-container top-panel__layout">
   <h1 class="top-panel__logo">
    Logo
    <span class="top-panel__logo-description">description logo</span>
   </h1>
   <nav class="top-panel__nav">
    <a href="#0" class="link link_animated-slide link_animated-slide-white">
     <span class="link_animated-slide__label">Documentation</span>
    </a>
    <a href="#0" class="link link_animated-slide link_animated-slide-white">
     <span class="link_animated-slide__label">Buy</span>
    </a>
   </nav>
  </div>
 </header>
						  
					

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

Logo description logo