Header

The header pattern includes the logo and search field. On the University homepage, the header also includes audience specific navigation links above the search bar.

• The header must be included at the top of all webpages.
• The University logo used for the header must be the "Founded in 1413" variant in black.
• The background colour of the header must always be white.

Default header

Should be used on all University webpages except the University homepage, School homepages, or web applications.

<!-- Begin pattern: header //-->
<div class="sr-only"><a href="#content-begin">Skip to content</a></div>

<header id="header" class="" role="banner">

    <div class="row">
            <div id="logo-container">
                <div id="header-logo"><h1><a href="http://www.st-andrews.ac.uk/"><span>University of St&nbsp;Andrews</span></a></h1></div>
            </div>

            <div id="header-search" role="search">

                <button class="btn btn-link" id="header-search-trigger" name="btnG" type="button" value=""><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>

                <form action="http://www.st-andrews.ac.uk/gsasearch" method="get">

                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-link" id="header-search-close" name="btnG" type="button" value=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                        </span>
                        <input class="form-control" name="q" type="text" title="Enter search keywords" maxlength="256" placeholder="Search the University website...">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" id="header-search-submit" name="btnG" type="submit" value="Search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                        </span>
                    </div>

                    <input name="site" type="hidden" value="StAndrews_ITS">
                    <input name="output" type="hidden" value="xml_no_dtd">
                    <input name="client" type="hidden" value="StAndrews_ITS">
                    <input name="proxystylesheet" type="hidden" value="StAndrews_ITS">
                </form>

            </div>
    </div>

</header>
<!-- End pattern: header //-->

University homepage header

Must be used only on the University homepage.

<!-- Begin pattern: header //-->
<div class="sr-only"><a href="#content-begin">Skip to content</a></div>

<header id="header" class="header--audience" role="banner">

    <div class="row">
            <div id="header-audience">
                        <a class="audience" href="https://www.st-andrews.ac.uk/students/">Students</a>
                        <a class="audience" href="https://www.st-andrews.ac.uk/pgstudents/">Postgraduates</a>
                        <a class="audience" href="https://www.st-andrews.ac.uk/staff/">Staff</a>
            </div>
            <div id="logo-container">
                <div id="header-logo"><h1><a href="http://www.st-andrews.ac.uk/"><span>University of St&nbsp;Andrews</span></a></h1></div>
            </div>

            <div id="header-search" role="search">

                <button class="btn btn-link" id="header-search-trigger" name="btnG" type="button" value=""><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>

                <form action="http://www.st-andrews.ac.uk/gsasearch" method="get">

                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-link" id="header-search-close" name="btnG" type="button" value=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                        </span>
                        <input class="form-control" name="q" type="text" title="Enter search keywords" maxlength="256" placeholder="Search the University website...">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" id="header-search-submit" name="btnG" type="submit" value="Search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                        </span>
                    </div>

                    <input name="site" type="hidden" value="StAndrews_ITS">
                    <input name="output" type="hidden" value="xml_no_dtd">
                    <input name="client" type="hidden" value="StAndrews_ITS">
                    <input name="proxystylesheet" type="hidden" value="StAndrews_ITS">
                </form>

            </div>
    </div>

</header>
<!-- End pattern: header //-->

School header

Must be used on every page within a School website.

<!-- Begin pattern: header //-->
<div class="sr-only"><a href="#content-begin">Skip to content</a></div>

<header id="header" class="header--audience" role="banner">

    <div class="row">
            <div id="header-audience">
                        <a class="audience" href="#">Students</a>
                        <a class="audience" href="#">Staff</a>
            </div>
            <div id="logo-container">
                <div id="header-logo"><h1><a href="http://www.st-andrews.ac.uk/"><span>University of St&nbsp;Andrews</span></a></h1></div>
            </div>

            <div id="header-search" role="search">

                <button class="btn btn-link" id="header-search-trigger" name="btnG" type="button" value=""><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>

                <form action="http://www.st-andrews.ac.uk/gsasearch" method="get">

                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-link" id="header-search-close" name="btnG" type="button" value=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                        </span>
                        <input class="form-control" name="q" type="text" title="Enter search keywords" maxlength="256" placeholder="Search the University website...">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" id="header-search-submit" name="btnG" type="submit" value="Search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                        </span>
                    </div>

                    <input name="site" type="hidden" value="StAndrews_ITS">
                    <input name="output" type="hidden" value="xml_no_dtd">
                    <input name="client" type="hidden" value="StAndrews_ITS">
                    <input name="proxystylesheet" type="hidden" value="StAndrews_ITS">
                </form>

            </div>
    </div>

</header>
<!-- End pattern: header //-->

Authenticated header

When a user is authenticated, the header should be altered to include the name of the person logged in and display any user-specific links they may have access to in addition to a link to logout.

<!-- Begin pattern: header //-->
<div class="sr-only"><a href="#content-begin">Skip to content</a></div>

<header id="header" class="" role="banner">

    <div class="row">
            <div id="header-authenticated">

                <div class="btn-group">
                    <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">Josef&nbsp;Smith <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Email</a></li>
                        <li><a href="#">MMS</a></li>
                        <li><a href="#">Moodle</a></li>
                        <li><a href="#">MySaint</a></li>
                        <li role="presentation" class="divider"></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Log out</a></li>
                    </ul>
                </div>
            </div>
                <div class="clear"></div>
            <div id="logo-container">
                <div id="header-logo"><h1><a href="http://www.st-andrews.ac.uk/"><span>University of St&nbsp;Andrews</span></a></h1></div>
            </div>

            <div id="header-search" role="search">

                <button class="btn btn-link" id="header-search-trigger" name="btnG" type="button" value=""><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>

                <form action="http://www.st-andrews.ac.uk/gsasearch" method="get">

                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-link" id="header-search-close" name="btnG" type="button" value=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                        </span>
                        <input class="form-control" name="q" type="text" title="Enter search keywords" maxlength="256" placeholder="Search the University website...">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" id="header-search-submit" name="btnG" type="submit" value="Search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                        </span>
                    </div>

                    <input name="site" type="hidden" value="StAndrews_ITS">
                    <input name="output" type="hidden" value="xml_no_dtd">
                    <input name="client" type="hidden" value="StAndrews_ITS">
                    <input name="proxystylesheet" type="hidden" value="StAndrews_ITS">
                </form>

            </div>
    </div>

</header>
<!-- End pattern: header //-->

Mini authenticated header

This condensed header may be used only on web applications.

<!-- Begin pattern: header //-->
<div class="sr-only"><a href="#content-begin">Skip to content</a></div>

<header id="header" class="" role="banner">

    <div class="row">
            <div class="web-application-header" id="header-authenticated">

                <div class="btn-group">
                    <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">Josef&nbsp;Smith <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Email</a></li>
                        <li><a href="#">MMS</a></li>
                        <li><a href="#">Moodle</a></li>
                        <li><a href="#">MySaint</a></li>
                        <li role="presentation" class="divider"></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Log out</a></li>
                    </ul>
                </div>
            </div>
        <div id="logo-container">
            <div id="web-application-header-logo"><h1><a href="http://www.st-andrews.ac.uk/"><span>University of St&nbsp;Andrews</span></a></h1></div>
        </div>
    </div>

</header>
<!-- End pattern: header //-->