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.

Rules for the header

• 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.

Options available

• Default header
• University homepage header
• School header
• Authenticated header
• Mini authenticated header

Default header

Must 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="https://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=""><i class="fa fa-search" title="Search"></i></button>
            <form action="https://www.st-andrews.ac.uk/search" 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=""><i class="fa fa-times" title="Close"></i></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"><i class="fa fa-search" title="Search"></i></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="https://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=""><i class="fa fa-search" title="Search"></i></button>
            <form action="https://www.st-andrews.ac.uk/search" 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=""><i class="fa fa-times" title="Close"></i></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"><i class="fa fa-search" title="Search"></i></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="https://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=""><i class="fa fa-search" title="Search"></i></button>
            <form action="https://www.st-andrews.ac.uk/search" 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=""><i class="fa fa-times" title="Close"></i></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"><i class="fa fa-search" title="Search"></i></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
• Any user-specific links they may have access 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="#"><i class="fa fa-sign-out" title="Sign-out"></i> Log out</a></li>
                </ul>
            </div>
        </div>
            <div class="clear"></div>
        <div id="logo-container">
            <div id="header-logo"><h1><a href="https://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=""><i class="fa fa-search" title="Search"></i></button>
            <form action="https://www.st-andrews.ac.uk/search" 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=""><i class="fa fa-times" title="Close"></i></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"><i class="fa fa-search" title="Search"></i></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 must 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="#"><i class="fa fa-sign-out" title="Sign-out"></i> Log out</a></li>
                </ul>
            </div>
        </div>
    <div id="logo-container">
        <div id="web-application-header-logo"><h1><a href="https://www.st-andrews.ac.uk/"><span>University of St&nbsp;Andrews</span></a></h1></div>
    </div>
    </div>
</header>
<!-- End pattern: header //-->