Блок "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>
После сделанных шагов вы должны увидеть в браузере следующий блок.
Блок "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>
Вы должны увидеть следующий результат.
Блок "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>
Вы должны увидеть следующий результат.