Header

The signature black header band from the Unigrid system. Can embed a navbar for integrated navigation.

Default

Yellowstone

National Park / Wyoming

<header class="ug-header">
  <div class="ug-header__title">
    <h1>Yellowstone</h1>
    <p class="ug-header__subtitle">National Park / Wyoming</p>
  </div>
</header>

With Logo

Grand Canyon

National Park / Arizona

<header class="ug-header">
  <div class="ug-header__logo">
    <svg viewBox="0 0 40 52" fill="white" xmlns="http://www.w3.org/2000/svg">
      <path d="M20 0 L40 52 L0 52 Z" opacity="0.8"/>
    </svg>
  </div>
  <div class="ug-header__title">
    <h1>Grand Canyon</h1>
    <p class="ug-header__subtitle">National Park / Arizona</p>
  </div>
</header>

Compact

Zion

National Park / Utah

<header class="ug-header ug-header--compact">
  <div class="ug-header__title">
    <a href="#">Zion</a>
    <p class="ug-header__subtitle">National Park / Utah</p>
  </div>
</header>

Brown Variant

Acadia

National Park / Maine

<header class="ug-header ug-header--brown">
  <div class="ug-header__title">
    <h1>Acadia</h1>
    <p class="ug-header__subtitle">National Park / Maine</p>
  </div>
</header>

With Embedded Navbar

Place a .ug-navbar inside the header for an integrated layout — brand left, menu right.

Site Name

<header class="ug-header ug-header--compact">
  <div class="ug-header__title">
    <a href="#">Site Name</a>
  </div>
  <nav class="ug-navbar">
    <div class="ug-navbar__inner">
      <ul class="ug-navbar__menu" style="display:flex">
        <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">Home</a></li>
        <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">About</a></li>
        <li class="ug-navbar__item"><a class="ug-navbar__link" href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

Class Reference

Class	Description
`.ug-header`	Header band (black background)
`.ug-header__logo`	Logo container (height-based)
`.ug-header__title`	Title wrapper
`.ug-header__name`	Park name (alternative to h1)
`.ug-header__subtitle`	Subtitle text
`.ug-header--compact`	Smaller padding and font
`.ug-header--brown`	Brown background
`.ug-header--full`	Full grid column span