Templates for website banners that are compliant with UCSF Identity Standards.
Download the latest release from GitHub.
Add banners.css, ucsf-logo-banner.png, ucsf-logo-banner.svg and ucsf-logo-banner-mobile.png to your webroot and link it from within your markup. Please make sure that the CSS file and the image files are located in the same directory.
<link rel="stylesheet" type="text/css" href="path/to/your/banners.css">Then add the banner snippet to your markup right underneath the <body> tag.
<div id="ucsf-banner-nav" class="logo">
<div class="inner">
<div>
<a class="logotype" href="http://www.ucsf.edu/">
<span>University of California San Francisco</span>
</a>
</div>
<div class="nav">
<ul>
<li><a href="http://www.ucsf.edu/about">About UCSF</a></li>
<li><a href="http://www.ucsf.edu/search">Search UCSF</a></li>
<li><a href="http://www.ucsfhealth.org/">UCSF Medical Center</a></li>
</ul>
</div>
</div>
</div>You may then customize your banner by adding links as applicable.
For font, color and logo variations, please see our example page.
- Source Repository: https://github.com/ucsf-web-services/ucsf_identity_web_banner_templates
- Licensed under the MIT License
- Copyright (c) 2014 Regents of the University of California