Clever Component Library

Site Header: Default 

<header class="site-header" role="banner">
    <div class="site-header-inner">
        <a href="../../components/preview/home.html" class="site-logo" title="Home">
            <div class="logo">
                <span class="svg-container" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 812.2 150">
                        <path d="M188.8 1.9h15.4v137.9h-15.4zM70.8 126.1c-30.5 0-55.3-24.7-55.3-55.3s24.7-55.3 55.3-55.3c14.6 0 27.9 5.7 37.8 15l10.8-11.2C106.8 7.4 89.7 0 70.8 0 31.7 0 0 31.7 0 70.8s31.7 70.8 70.8 70.8c19.2 0 36.6-7.6 49.3-20l-10.9-11.1c-9.9 9.7-23.4 15.6-38.4 15.6zM629.4 42.3c-29.1 0-49.9 21-49.9 49.7 0 29.1 21 49.7 51.8 49.7 23.5 0 36.6-10.3 40.9-14.8l-9.2-11.3c-3 2.6-12.9 12-31.5 12-19.9 0-34-11.6-36.4-29.8h83.7c.2-1.9.4-3.6.4-5.8-.1-28.7-20.5-49.7-49.8-49.7zM595.2 85c2.8-17.5 16.1-28.7 34.2-28.7 18.2 0 31.5 11.1 34.2 28.7h-68.4zM324.7 42.3c-29.1 0-49.9 21-49.9 49.7 0 29.1 21 49.7 51.8 49.7 23.5 0 36.6-10.3 40.9-14.8l-9.2-11.3c-3 2.6-12.9 12-31.5 12-19.9 0-34-11.6-36.4-29.8H374c.2-1.9.4-3.6.4-5.8 0-28.7-20.4-49.7-49.7-49.7zM290.5 85c2.8-17.5 16.1-28.7 34.2-28.7 18.2 0 31.5 11.1 34.2 28.7h-68.4zM799.9 42.3c-15.6 0-30.4 12.6-35.4 25.4V44.1h-15.4v95.7h15.4V98.7c0-23.2 12.4-41.8 34.2-41.8 5.2 0 8.9.6 13.4 2V43.8c-3.4-.8-6.4-1.5-12.2-1.5zM477.2 118.4l-35.6-74.3h-16.9L477.1 150l52.5-105.9h-16.7z" />
                    </svg>
                </span>
            </div>
        </a>

        <nav class="primary-navigation js-primary-navigation" aria-label="Primary Navigation" role="navigation">
            <ul id="primary-navigation-list" class="primary-navigation-list" role="menu">
                <li class="primary-navigation-item" role="menuitem">
                    <a href="../../components/preview/products.html">Products</a>
                </li>
                <li class="primary-navigation-item" role="menuitem">
                    <a href="../../components/preview/article.html">How It Works</a>
                </li>
                <li class="primary-navigation-item" role="menuitem">
                    <a href="../../components/preview/car-guide.html">Car Guide</a>
                </li>
                <li class="primary-navigation-item" role="menuitem">
                    <a href="#">Customer Service</a>
                </li>
                <li class="primary-navigation-item" role="menuitem">
                    <a href="#">Webshop</a>
                </li>
            </ul>
        </nav>
    </div>
</header>
 
<header class="site-header" role="banner">
    <div class="site-header-inner">
        <a href="{{ siteUrl }}" class="site-logo" title="Home">
            {% include '@logo' %}
        </a>

        {% include '@primary-navigation' with primaryNavigation only %}
    </div>
</header>
 
{
  "siteUrl": "../../components/preview/home.html",
  "primaryNavigation": {
    "primaryNavigationItems": [
      {
        "title": "Products",
        "url": "../../components/preview/products.html"
      },
      {
        "title": "How It Works",
        "url": "../../components/preview/article.html"
      },
      {
        "title": "Car Guide",
        "url": "../../components/preview/car-guide.html"
      },
      {
        "title": "Customer Service",
        "url": "#"
      },
      {
        "title": "Webshop",
        "url": "#"
      }
    ]
  }
}

Site Header

Purpose: Provides the user with the main entry points to key pages.
Required: Yes

Element: Menu items

Purpose: Serves as core headlines and links to the main pages.
Required: Yes
Recommendations: Preferably should correlate with the supporting headlines (Card subheadings) on the heroes of respective pages. Keep max to about 20 characters (including spaces)

Purpose: Used as a link to the home page.
Required: Yes