Brandbar Guidelines | Stanford Identity Toolkit

Stanford Brand Bar

Instructions for how to implement the Stanford Brand Bar.

The Stanford Brand Bar is a 30px tall red bar recommended to place at the top of all official university websites. It was designed to enhance sites with consistent Stanford branding.

The Stanford signature in the bar links back to the university homepage. An optional "Login" link can be placed in the far right corner of the brand bar for website which provide login functionality.

No other links or text should be placed inside the Brand Bar. No content of any kind should appear above this bar.

Instructions

Step One:

Copy these lines before the closing </head> section of your web page:

<link href="https://www.stanford.edu/su-identity/css/su-identity.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 8]>
  <link rel="stylesheet" type="text/css" href="https://www.stanford.edu/su-identity/css/ie/ie8.css" />
<![endif]-->
<!--[if IE 7]>
  <link rel="stylesheet" type="text/css" href="https://www.stanford.edu/su-identity/css/ie/ie7.css" />
<![endif]-->

Step Two:

Copy these lines immediately after the <body> tag of your web page:

<!-- Brandbar snippet start -->
<div id="brandbar">
  <div class="container">
    <a href="http://www.stanford.edu">
      <img src="https://www.stanford.edu/su-identity/images/brandbar-stanford-logo@2x.png" alt="Stanford University" width="152" height="23">
    </a>
  </div> <!-- .container end -->
</div> <!-- #brandbar end -->
<!-- Brandbar snippet end -->

Stanford Brand Bar

Instructions

Step One:

Step Two:

Related Resources