Skip to content
UGA Online Design System

University Header

The University Header is a universal header component that can appear on any University of Georgia web property. It provides a consistent branding element linking back to the main UGA website.

Usage

Section titled “Usage”

The University Header should be placed at the very top of the page, before any site-specific header content.

University of Georgia 

<div class="cmp-university-header">
  <div class="obj-limit-width">
    <h2 class="cmp-university-header__title">
      <a href="https://uga.edu" class="cmp-university-header__link">
        <svg width="153" height="9" viewBox="0 0 153 9">
          <title>University of Georgia</title>
          <path
            class="cmp-university-header__logo"
            d="M117.2.3c-2.8 0-4.3 2-4.3 4a4 4 0 004.2 4 4 4 0 004.2-4 4 4 0 00-4-4zm2.2 4.3c0 2-.8 3-2 3-1.5 0-2.6-1.4-2.6-3.5 0-1.9 1-3 2.2-3 1.5 0 2.4 1.2 2.4 3.5zM80.7.3c-2.9 0-4.4 2-4.4 4a4 4 0 004.2 4 4 4 0 004.2-4c0-2.3-1.7-4-4-4zm2.1 4.3c0 2-.8 3.2-2 3.2-1.5 0-2.5-1.6-2.5-3.6S79 .9 80.4.9c1.5 0 2.4 1.4 2.4 3.7zM103.8 5v3h-.3c-.7.2-1.6.4-2.4.4-2.8 0-4.7-1.6-4.7-4 0-2.8 2.4-4.1 4.7-4.1 1 0 2.5.4 2.5.4v1.8S102.8 1 101 1c-1.1 0-2.2.7-2.6 2l-.2 1.2c0 2.5 1.5 3.4 3 3.4h.6l.2-.7V5.3c0-1-.7-1.3-.7-1.3h3s-.6.1-.6 1zM137.3 5v3h-.3c-.7.2-1.6.4-2.4.4-2.9 0-4.7-1.6-4.7-4 0-2.8 2.4-4.1 4.7-4.1 1 0 2.4.4 2.4.4v1.8s-.7-1.5-2.4-1.5c-1.1 0-2.2.7-2.6 2l-.2 1.2c0 2.5 1.5 3.4 2.9 3.4h.6c.2-.2.3-.4.3-.7V5.3c0-1-.7-1.3-.7-1.3h3s-.6.1-.6 1zM27.4.4c.4.2.3.8.1 1.3 0 .3-1.1 3-1.6 4.1l-1.5-4.1c-.1-.5-.1-.8.3-1.3h-3.1c.6.5.8.8 1.2 1.8l2.2 6h.8l2.4-6c.3-.7.8-1.5 1.3-1.8h-2.1zM35.4 7c-.4.5-1.4.4-1.5.4h-1c-.2-.2-.3-.4-.3-1V4.8h1c.8 0 1.4 0 1.6.4V3.4c-.2.4-.8.5-1.6.5h-1V1.4l.2-.1h1.4c.7 0 1 .1 1.3.4l.5 1V.3h-5.7c.1.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8h6V6L35.3 7zM109.2 7.4h-1c-.2-.2-.3-.4-.3-1V4.8h1c.8 0 1.4 0 1.6.4V3.4c-.2.4-.8.5-1.6.5h-1V1.6c0-.4 0-.4.5-.4h1c.8 0 1.1.1 1.4.5.3.3.5.9.5.9V.4h-5.8c.2.2.7.6.7 1.8v4.2c0 1.5-.8 1.8-.8 1.8h6V6s-.3.7-.7 1.1c-.4.5-1.4.4-1.5.4zM142 8.2s-.7-.3-.7-1.8V2.2c0-1.2.4-1.6.6-1.8h-3c.2.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8h3.2zM16.5 8.2s-.7-.3-.7-1.8V2.2c0-1.2.4-1.6.6-1.8h-2.1c.2.2.6.6.6 1.8v3.2l-4.2-5H8.8c.2.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8H11s-.7-.3-.7-1.8V2.7l4.5 5.5h1.7zM55.6 8.2S55 8 55 6.4V2.2c0-1.2.5-1.6.7-1.8h-3c.2.2.7.6.7 1.8v4.2c0 1.5-.7 1.8-.7 1.8h3zM20.7 8.2S20 8 20 6.4V2.2c0-1.2.5-1.6.6-1.8h-2.9c.2.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8h3.1zM150.8 8.2c-.7-.4-.9-.8-1.2-1.8L147.4.5h-1l-2.4 6c-.3.6-.7 1.4-1.3 1.7h2.3c-.5-.2-.4-.8-.2-1.3l.3-.8h2.5l.3.9c.2.4.2.8-.2 1.2h3zm-5.3-3l1-2.4.8 2.4h-1.8zM49 3.4c-1-.5-1.4-.8-1.5-1.4 0-.6.4-1 1.2-1 1.1 0 1.7.6 2 1.3V.6c-.2 0-1.1-.3-2-.3-1.6 0-2.7 1-2.7 2.3 0 1.3 1 1.9 2.3 2.5.9.4 1.4.7 1.4 1.4s-.4 1.2-1.1 1.2c-1.3 0-2.2-1.2-2.5-2v2l1.1.5 1.2.1c1.7 0 3-.8 3-2.4 0-1.1-1-1.9-2.4-2.5zM89 8.2s-.7-.3-.7-1.8V4.8h.9c.9 0 1.4 0 1.6.4V3.4c-.2.4-.7.5-1.6.5h-1V1.5c0-.3 0-.3.5-.3h1.1c.7 0 1 .1 1.3.5.3.3.5.9.5.9V.4h-5.7c.1.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8H89zM61 1.6c0-.4 0-.4.4-.4h.4c.7 0 1 .1 1.3.5.3.3.5.9.5.9V.4h-6.9v2.2l.5-1c.3-.3.6-.4 1.3-.4h.4c.4 0 .4 0 .4.4v4.8c0 1.5-.7 1.8-.7 1.8h3.1S61 8 61 6.4V1.6zM6 4.8V2.2C6 1 5.7.6 5.6.4h2.2C7.5.6 7 1 7 2.2v2.5s.4 3.6-3 3.7c0 0-3.3.2-3.3-2.7V2.2C.7 1 .2.6 0 .4h3c-.2.2-.7.6-.7 1.8v3c0 2.4 1.9 2.4 1.9 2.4S6 7.9 6 4.8zM69.2.5s.9.4.5 1.2l-1.1 2.2-1.2-2.2c-.4-.7.3-1.2.3-1.2h-3.2s.6.3 1.2 1.3l1.7 3v1.6c0 1.5-.7 1.8-.7 1.8h3.1s-.7-.3-.7-1.8V4.7l1.4-2.8C71 1 72 .5 72 .5h-2.8zM42.1 2.7c0 .6-.2 1-.5 1.3-.3.2-.6.3-1.2.3h-.2V1.5v-.3l.6-.2c.6 0 1.3.5 1.3 1.7zm1.5 3.8l-1-2c.5-.1 1.3-.7 1.3-1.8v-.2A2 2 0 0043 1c-.5-.3-1-.5-2.2-.5h-3c.2.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8H41s-.7-.3-.7-1.8V5h.2c.4 0 .6 0 .8.4l.3.6.7 1.3c.5.7.9 1 2.4 1h.4s-.5-.4-1.4-1.8zM126.4 2.7c0 .6-.2 1-.5 1.3-.2.2-.6.3-1.2.3h-.2V1.5v-.3l.6-.2c.6 0 1.3.5 1.3 1.7zm1.5 3.8l-1-2c.5-.1 1.3-.7 1.3-1.8v-.2a2 2 0 00-.8-1.6c-.5-.3-1-.5-2.2-.5h-3c.2.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8h3.1s-.7-.3-.7-1.8V5h.2c.4 0 .6 0 .8.4l.3.6.7 1.3c.5.7.9 1 2.4 1h.4s-.5-.4-1.4-1.8zM152.2 7.5c0 .4-.3.7-.7.7a.7.7 0 01-.7-.7.7.7 0 011.4 0zm-1.3 0c0 .3.3.6.6.6s.5-.3.5-.6-.2-.5-.5-.5-.6.2-.6.5zm.5.4h-.2v-.7h.5l.1.2-.1.1v.2l.1.2h-.1v-.2H151.3v.2zm0-.4l.2-.1-.2-.1v.2z"
          ></path>
        </svg>
      </a>
    </h2>
  </div>
</div>

CSS Classes

Section titled “CSS Classes”

Container Classes

Section titled “Container Classes”
  • cmp-university-header - Main container with black background and red bottom border
  • obj-limit-width - Width constraint utility that centers content with proper margins

Element Classes

Section titled “Element Classes”
  • cmp-university-header__title - Heading element containing the link
  • cmp-university-header__link - Link to uga.edu with hover state
  • cmp-university-header__logo - SVG logo path element