UI • Site Header v1

Site Header

The default site header appears on all pages throughout listers.co.uk. It is a global navigation component which opens numerous options/links for getting across listers.co.uk.

<header class="c-site-header v1 | u-bt u-b-ui" role="banner">
    <div class="c-site-header__wrapper | o-wrapper">
        <a class="c-site-header__logo" href="#home" aria-label="Listers">
            <span class="c-logo">
                <svg class="c-logo__img" width="60" height="18" viewBox="0 0 185 56" aria-hidden="true">
                    <g class="c-logo__type" id="type_paths">
                        <path d="M0 23.231h5.653v27.124h16.914v5.167h-22.567v-32.291"></path>
                        <path d="M28.22 23.231h5.654v32.291h-5.654z"></path>
                        <path d="M39.755 50.817l3.401-4.059c3.079 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.287-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.034 4.29c-2.895-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.803 1.66 10.341 4.105 10.341 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
                        <path d="M78.001 28.49h-10.204v-5.259h26.107v5.259h-10.204v27.032h-5.699v-27.032"></path>
                        <path d="M99.327 23.231h23.854v5.075h-18.201v8.396h16.133v5.075h-16.133v8.672h18.431v5.074h-24.084v-32.291"></path>
                        <path d="M129.569 23.231h14.341c4.045 0 7.216 1.2 9.284 3.229 1.7 1.753 2.666 4.152 2.666 6.966v.093c0 5.305-3.171 8.488-7.676 9.779l8.687 12.225h-6.665l-7.906-11.256h-7.078v11.256h-5.654v-32.291zm13.927 16.007c4.045 0 6.618-2.122 6.618-5.397v-.092c0-3.46-2.482-5.351-6.665-5.351h-8.227v10.841h8.273z"></path>
                        <path d="M160.088 50.817l3.401-4.059c3.08 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.286-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.033 4.29c-2.896-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.802 1.66 10.342 4.105 10.342 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
                    </g>
                    <g class="c-logo__swoosh" id="swoosh">
                        <path d="M159 24.028c-9.933-13.657-40.214-8.746-49.653-7.636-25.232-22.557-56.296-4.543-82.347-1.835 30.766-7.17 51.259-23.836 81.689-7.837 2.728 1.436 6.811 3.652 6.811 3.652 9.439-1.113 40.474-3.428 43.5 13.657z"></path>
                    </g>
                </svg>
            </span>
        </a>

        <nav class="c-site-header__nav">
            <div class="c-site-header__nav-item">
                <!-- Opens Navigation Modal -->
                <button class="c-site-header__nav-btn c-site-nav__btn--navigation" type="button">
                    <svg class="c-icon c-icon--md" viewBox="0 0 16 16" aria-hidden="true">
                        <rect width="13.333" height="1.333" x="1.333" y="11.333" rx=".667"></rect>
                        <rect width="13.333" height="1.333" x="1.333" y="7.333" rx=".667"></rect>
                        <rect width="13.333" height="1.333" x="1.333" y="3.333" rx=".667"></rect>
                    </svg>
                    <span class="c-site-header__nav-btn-text">Menu</span>
                </button>
            </div>
            <div class="c-site-header__nav-item">
                <!-- Opens Brands Modal -->
                <button class="c-site-header__nav-btn c-site-nav__btn-brands" type="button">
                    <span class="c-site-header__nav-btn-text">Brands</span>
                </button>
            </div>
            <div class="c-site-header__nav-item">
                <!-- Opens Contact Modal -->
                <button class="c-site-header__nav-btn c-site-nav__btn-contact" type="button">
                    <span class="c-site-header__nav-btn-text">Contact</span>
                </button>
            </div>
            <div class="c-site-header__nav-item">
                <!-- Head to /favourites -->
                <a class="c-site-header__nav-btn c-site-nav__btn--favourites" href="#favourites">
                    <span class="c-site-nav__fav-count">4</span>
                    <span class="u-hidden-visually">Favourites</span>
                    <svg class="c-icon c-icon--md" viewBox="0 0 16 16" aria-hidden="true">
                        <path d="M14.2246157,6.64682641 C14.1586573,6.44280489 13.974792,6.30000116 13.7611254,6.28684463 L9.91780071,6.02598826 L8.48045979,2.69224393 C8.39865204,2.49986062 8.21008285,2.375 8.00134614,2.375 C7.79260943,2.375 7.60404025,2.49986062 7.5222325,2.69224393 L6.08489157,6.02598826 L2.24156691,6.28684463 C2.02749733,6.29890229 1.84268242,6.44116337 1.77591764,6.64527765 C1.70915286,6.84939194 1.774085,7.07363828 1.93951701,7.21027616 L4.82461438,9.62058896 L4.10594391,13.2256239 C4.0691001,13.4263998 4.15253195,13.6302583 4.31946195,13.7473366 C4.49326173,13.8619989 4.71851545,13.8619989 4.89231522,13.7473366 L8.01696941,11.8274338 L11.1416236,13.7473366 C11.3141176,13.8527473 11.5319069,13.8486887 11.7003682,13.7369241 C11.8688296,13.6251596 11.9575546,13.4258633 11.9279949,13.2256239 L11.1780779,9.62058896 L14.0631753,7.21027616 C14.2271851,7.07336384 14.2911725,6.85003894 14.2246157,6.64682641 Z"></path>
                    </svg>
                </a>
            </div>
        </nav>
    </div>
</header>

Simple

A simple site header for reduced UI scenarios, like 404 pages, or login pages.

<header class="c-site-header v1 | u-bt u-b-ui" role="banner">
    <div class="c-site-header__wrapper | o-wrapper">
        <a class="c-site-header__logo" href="#home" aria-label="Listers">
            <span class="c-logo">
                <svg class="c-logo__img" width="60" height="18" viewBox="0 0 185 56" aria-hidden="true">
                    <g class="c-logo__type" id="type_paths">
                        <path d="M0 23.231h5.653v27.124h16.914v5.167h-22.567v-32.291"></path>
                        <path d="M28.22 23.231h5.654v32.291h-5.654z"></path>
                        <path d="M39.755 50.817l3.401-4.059c3.079 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.287-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.034 4.29c-2.895-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.803 1.66 10.341 4.105 10.341 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
                        <path d="M78.001 28.49h-10.204v-5.259h26.107v5.259h-10.204v27.032h-5.699v-27.032"></path>
                        <path d="M99.327 23.231h23.854v5.075h-18.201v8.396h16.133v5.075h-16.133v8.672h18.431v5.074h-24.084v-32.291"></path>
                        <path d="M129.569 23.231h14.341c4.045 0 7.216 1.2 9.284 3.229 1.7 1.753 2.666 4.152 2.666 6.966v.093c0 5.305-3.171 8.488-7.676 9.779l8.687 12.225h-6.665l-7.906-11.256h-7.078v11.256h-5.654v-32.291zm13.927 16.007c4.045 0 6.618-2.122 6.618-5.397v-.092c0-3.46-2.482-5.351-6.665-5.351h-8.227v10.841h8.273z"></path>
                        <path d="M160.088 50.817l3.401-4.059c3.08 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.286-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.033 4.29c-2.896-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.802 1.66 10.342 4.105 10.342 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
                    </g>
                    <g class="c-logo__swoosh" id="swoosh">
                        <path d="M159 24.028c-9.933-13.657-40.214-8.746-49.653-7.636-25.232-22.557-56.296-4.543-82.347-1.835 30.766-7.17 51.259-23.836 81.689-7.837 2.728 1.436 6.811 3.652 6.811 3.652 9.439-1.113 40.474-3.428 43.5 13.657z"></path>
                    </g>
                </svg>
            </span>
        </a>

        
    </div>
</header>

On Dark

When layering the site header on top of any hero component, use the hero class to give the header contrast.

<header class="c-site-header c-site-header--hero | v1" role="banner">
    <div class="c-site-header__wrapper o-wrapper">
        <a class="c-site-header__logo" href="#home" aria-label="Listers">
            <span class="c-logo">
                <svg class="c-logo__img" width="60" height="18" viewBox="0 0 185 56" aria-hidden="true">
                    <g class="c-logo--type" id="type_paths">
                        <path d="M0 23.231h5.653v27.124h16.914v5.167h-22.567v-32.291"></path>
                        <path d="M28.22 23.231h5.654v32.291h-5.654z"></path>
                        <path d="M39.755 50.817l3.401-4.059c3.079 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.287-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.034 4.29c-2.895-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.803 1.66 10.341 4.105 10.341 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
                        <path d="M78.001 28.49h-10.204v-5.259h26.107v5.259h-10.204v27.032h-5.699v-27.032"></path>
                        <path d="M99.327 23.231h23.854v5.075h-18.201v8.396h16.133v5.075h-16.133v8.672h18.431v5.074h-24.084v-32.291"></path>
                        <path d="M129.569 23.231h14.341c4.045 0 7.216 1.2 9.284 3.229 1.7 1.753 2.666 4.152 2.666 6.966v.093c0 5.305-3.171 8.488-7.676 9.779l8.687 12.225h-6.665l-7.906-11.256h-7.078v11.256h-5.654v-32.291zm13.927 16.007c4.045 0 6.618-2.122 6.618-5.397v-.092c0-3.46-2.482-5.351-6.665-5.351h-8.227v10.841h8.273z"></path>
                        <path d="M160.088 50.817l3.401-4.059c3.08 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.286-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.033 4.29c-2.896-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.802 1.66 10.342 4.105 10.342 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
                    </g>
                    <g class="c-logo--swoosh" id="swoosh">
                        <path d="M159 24.028c-9.933-13.657-40.214-8.746-49.653-7.636-25.232-22.557-56.296-4.543-82.347-1.835 30.766-7.17 51.259-23.836 81.689-7.837 2.728 1.436 6.811 3.652 6.811 3.652 9.439-1.113 40.474-3.428 43.5 13.657z"></path>
                    </g>
                </svg>
            </span>
        </a>
        <nav class="c-site-header__nav">
            <div class="c-site-header__nav-item">
                <button class="c-site-header__nav-btn c-site-nav__btn--navigation" type="button">
                    <svg class="c-icon c-icon--md" viewBox="0 0 16 16" aria-hidden="true">
                        <rect width="13.333" height="1.333" x="1.333" y="11.333" rx=".667"></rect>
                        <rect width="13.333" height="1.333" x="1.333" y="7.333" rx=".667"></rect>
                        <rect width="13.333" height="1.333" x="1.333" y="3.333" rx=".667"></rect>
                    </svg>
                    <span class="c-site-header__nav-btn-text">Menu</span>
                </button>
            </div>
            <div class="c-site-header__nav-item">
                <button class="c-site-header__nav-btn c-site-nav__btn--brands" type="button">
                    <span class="c-site-header__nav-btn-text">Brands</span>
                </button>
            </div>
            <div class="c-site-header__nav-item">
                <button class="c-site-header__nav-btn c-site-nav__btn--contact" type="button">
                    <span class="c-site-header__nav-btn-text">Contact</span>
                </button>
            </div>
            <div class="c-site-header__nav-item">
                <button class="c-site-header__nav-btn c-site-nav__btn--favourites" type="button">
                    <span class="c-site-nav__fav-count">4</span>
                    <span class="u-hidden-visually">Favourites</span>
                    <svg class="c-icon c-icon--md" viewBox="0 0 16 16" aria-hidden="true">
                        <path d="M14.2246157,6.64682641 C14.1586573,6.44280489 13.974792,6.30000116 13.7611254,6.28684463 L9.91780071,6.02598826 L8.48045979,2.69224393 C8.39865204,2.49986062 8.21008285,2.375 8.00134614,2.375 C7.79260943,2.375 7.60404025,2.49986062 7.5222325,2.69224393 L6.08489157,6.02598826 L2.24156691,6.28684463 C2.02749733,6.29890229 1.84268242,6.44116337 1.77591764,6.64527765 C1.70915286,6.84939194 1.774085,7.07363828 1.93951701,7.21027616 L4.82461438,9.62058896 L4.10594391,13.2256239 C4.0691001,13.4263998 4.15253195,13.6302583 4.31946195,13.7473366 C4.49326173,13.8619989 4.71851545,13.8619989 4.89231522,13.7473366 L8.01696941,11.8274338 L11.1416236,13.7473366 C11.3141176,13.8527473 11.5319069,13.8486887 11.7003682,13.7369241 C11.8688296,13.6251596 11.9575546,13.4258633 11.9279949,13.2256239 L11.1780779,9.62058896 L14.0631753,7.21027616 C14.2271851,7.07336384 14.2911725,6.85003894 14.2246157,6.64682641 Z"></path>
                    </svg>
                </button>
            </div>
        </nav>
    </div>
</header>

Brand Logo Link

When the page is manufacturer specific, place the brand logo next to the Listers logo.

Favourites Button Animation

When adding a vehicle to favourites, the icon within the favourite button reacts and provides a subtle micro-interaction that indicates a change of state.

Site Header

The site header is a site-wide banner component. It appears on every page of listers.co.uk and provides navigation, contact information and links to favourites.

Dependencies

Site Header

Simple

On Dark

Brand Logo Link

Favourites Button Animation