Header

The header, or banner, is the top section of content on every page of a website or application. It is a consistent design pattern that includes the main navigation, site name, branding, and search forms. While some pages like the homepage or landing pages may have unique headers with extra features like carousels or larger banner images, most pages will share the same header design.

Code

<header id="header" class="{banner-style}" aria-label="Site Banner">

    <div id="skipnav"><a href="#content">Skip to main content</a></div>

    <div id="cu-search" class="cu-search closed">
        <div class="container">
            <form id="cu-search-form" tabindex="-1" role="search" action="https://www.cornell.edu/search/">
                <label for="cu-search-query" class="sr-only">Search:</label>
                <input type="text" id="cu-search-query" name="q" value="" size="30">
                <button name="btnG" id="cu-search-submit" type="submit" value="go"><span class="sr-only">Submit Search</span></button>

                <fieldset class="search-filters" role="radiogroup">
                    <legend class="sr-only">Search Filters</legend>
                    <input type="radio" id="cu-search-filter1" name="sitesearch" value="thissite" checked="checked">
                    <label for="cu-search-filter1"><span class="sr-only">Search </span>This Site</label>
                    <input type="radio" id="cu-search-filter2" name="sitesearch" value="cornell">
                    <label for="cu-search-filter2"><span class="sr-only">Search </span>Cornell</label>
                </fieldset>
            </form>
        </div>
    </div>

    <div id="cu-header" class="cu-header">

        <div class="navbar">
            <div class="container">
                <div class="logo">
                    <a href="https://www.cornell.edu"><img src="images/cornell/cornell_reduced_white_41.svg" alt="Cornell University" width="183" height="41"></a>
                </div>
                <!-- Utility Navigation.  Refer to cornellcustomdev.github.io/cds-docs/patterns/utility_navigation.md for details -->
            </div>
        </div>

        <div class="container padded">
            <div class="content brand">
                <div class="buttons">
                    <button class="mobile-button" id="cu-search-button">Toggle Search Form</button>
                    <button class="mobile-button" id="mobile-nav">Main Menu</button>
                </div>
                <div class="site-logo">
                    <a href="https://www.cornell.edu"><img src="images/cornell/bold_cornell_seal_simple_white.svg" alt="Cornell University" width="100" height="100"></a>
                </div>
                <div class="site-branding">
                    <p class="site-title serif">Cornell Design System</p>
                    <p class="site-subtitle">Custom Development Team</p>
                </div>
            </div>
        </div>

        <!-- Main Navigation.  Refer to cornellcustomdev.github.io/cds-docs/patterns/main_navigation.md for details. -->

    </div>
</header>

For details on each individual navigation, visit the Navigation page.

Classes

Controls the overall appearance of the banner.

Class	Description
Default (no class)	The banner will have a `#ffffff` background, with `#444444` text on top. It will also have a 1px bottom border of size `#d5d5d5`.
`.dark`, `.gray`	The banner will have a `#222222` background, with `#dddddd` text on top. It will have no bottom border.
`.red`	The banner will have a `#b31b1b` background, with `#ebd1d5` text on top. It will have no bottom border.
`.photo`	The banner will have a `#222222` background by default if no photo is provided. To provide a photo from the CMS, add the photo as a background using inline CSS. The photo will scale to cover the available space. The banner will then have a dark semi-transparent background for all text content, including the navigation, logo, and site title.