Header & main navigation

Main navigation component

Example of main navigation with selected navigation item

HTML code snippet

<nav class="nav-main">
    <ul>
        <li><a href="style-mainnav.html">Products</a></li>
        <li class="main-nav--selected"><a href="style-mainnav.html">blog</a></li>
        <li><a href="style-mainnav.html">Team</a></li>
        <li><a href="style-mainnav.html">Contact</a></li>
        <li><a href="style-mainnav.html">Console</a></li>
    </ul>
</nav>

Header component

HTML code snippet

<div class="header-container">
                <header class="header-main">
                    <a class="image-link" href="/">
                        ​<picture>
                            <source media="(max-width: 48em)"
                                    srcset="/img/logo-horizontal.svg"
                                    type="image/svg+xml">
                            <source srcset="/img/logo-horizontal-payoff.svg"
                                    type="image/svg+xml">
                            <img src="/img/logo-horizontal-payoff.svg"
                                 alt="SeMI Technologies logo">
                        </picture>
                    </a>
                    <div>
                        <a class="nav-main-contact button--small" href="style-mainnav.html">Contact us</a>
                    </div>
                </header>
            </div>

Header template

HTML code snippet

<div class="header-container">
    <header class="header-main">
        <a class="image-link" href="/">
            ​<picture>
                <source media="(max-width: 48em)"
                        srcset="/img/logo-horizontal.svg"
                        type="image/svg+xml">
                <source srcset="/img/logo-horizontal-payoff.svg"
                        type="image/svg+xml">
                <img src="/img/logo-horizontal-payoff.svg"
                     alt="SeMI Technologies logo">
            </picture>
        </a>
        <div>
            <a class="nav-main-console button--small" href="style-mainnav.html">Console</a>
        </div>
    </header>
    <nav class="nav-main">
        <ul>
            <li><a href="style-mainnav.html">Products</a></li>
            <li class="main-nav--selected"><a href="style-mainnav.html">blog</a></li>
            <li><a href="style-mainnav.html">Team</a></li>
            <li><a href="style-mainnav.html">Contact</a></li>
        </ul>
    </nav>
</div>