Skip to main content

Main Content

Brand Bar

Description

The Stanford global identity bar is one of three key elements in the Stanford Identity system for the web.

Learn more about aligning your site with the Stanford Identity

Default Style

Example Markup

<div class="su-brand-bar [ modifier_class ]"> <div class="su-brand-bar__container"> <a class="su-brand-bar__logo" href="https://stanford.edu"> Stanford University <span class="su-brand-bar__link--a11y">(link is external)</span> </a> </div> </div>

Style Variants

.su-brand-bar--bright

White wordmark on bright red background

Example Markup

<div class="su-brand-bar su-brand-bar--bright"> <div class="su-brand-bar__container"> <a class="su-brand-bar__logo" href="https://stanford.edu"> Stanford University <span class="su-brand-bar__link--a11y">(link is external)</span> </a> </div> </div>

.su-brand-bar--dark

White wordmark on dark grey background

Example Markup

<div class="su-brand-bar su-brand-bar--dark"> <div class="su-brand-bar__container"> <a class="su-brand-bar__logo" href="https://stanford.edu"> Stanford University <span class="su-brand-bar__link--a11y">(link is external)</span> </a> </div> </div>

.su-brand-bar--white

Cardinal red wordmark on white background

Example Markup

<div class="su-brand-bar su-brand-bar--white"> <div class="su-brand-bar__container"> <a class="su-brand-bar__logo" href="https://stanford.edu"> Stanford University <span class="su-brand-bar__link--a11y">(link is external)</span> </a> </div> </div>