Header

header

2.6.15

<header class="o-header tablet:layout-sidebar w-full">
  <div class="o-header__banner-main color-primary-background">
    <button aria-controls="js-navigation" aria-pressed="false" class="o-header__main-toggle font-bold" data-js="toggle">Menu</button>
    <h1 class="o-header__main-title">
      <span class="hidden"></span>
      <svg aria-hidden="true" class="o-header__logo-main icon-logo-nyco-secondary">
        <use xlink:href="#icon-logo-nyco-secondary"></use>
      </svg>
      <svg aria-hidden="true" class="o-header__logo-secondary icon-logo-nyco">
        <use xlink:href="#icon-logo-nyco"></use>
      </svg>
    </h1>
    <div aria-hidden="true" class="o-header__main-version">v2.6.15</div>
  </div>
  <div class="o-header__banner-secondary color-dark-background">
    <h1 class="o-header__secondary-title text-jumbo">Patterns</h1>
  </div>
  <div class="o-header__secondary-version color-dark-background">
    <div>
      <a class="btn flex items-center" href="https://github.com/CityOfNewYork/nyco-patterns/tree/v2.6.15">
        <svg aria-hidden="true" class="icon-ui icon-3 mr-1">
          <use xlink:href="#feather-github"></use>
        </svg>2.6.15
      </a>
    </div>
  </div>
</header>

The Header Object is the most prominent element of a website or application. It contains the NYC Opportunity organization branding and title of the application. This header example is responsive and changes to a single bar for mobile devices with a menu toggle to open and close the Navigation Object Contents within the header can be replaced with different elements.

<header class="o-header-app layout-sidebar flex">
  <div class="bg-blue text-base-white">
    <svg class="o-header-app__icon icon icon-logo-nyco-secondary">
      <use xlink:href="#icon-logo-nyco-secondary"></use>
    </svg>
  </div>
  <div class="color-dark-background"></div>
</header>

The Application Header can be used as a Header replacement for progressive web applications.

<header class="o-header-app tablet:layout-sidebar tablet:flex">
  <div class="color-dark-background text-base-white flex flex-col items-start py-2 tablet:p-5">
    <h1 class="h3 m-0">NewProduct</h1>
    <p class="small flex items-end">by<span class="sr-only">NYC Opportunity</span>
      <svg class="o-header-nyco-secondary__icon mis-1">
        <use xlink:href="#icon-logo-nyco-secondary"></use>
      </svg>
    </p>
  </div>
  <div class="color-primary-background justify-between py-2">
    <h2 class="mb-0">My Project</h2>
    <div>
      <button class="btn mx-1" title="Action">
        <svg class="icon-ui tablet:mie-1">
          <use xlink:href="#feather-trash-2"></use>
        </svg>
        <span class="hidden tablet:inline">Action</span>
      </button>
      <button class="btn btn-secondary mx-1" title="New Action">
        <svg class="icon-ui tablet:mie-1">
          <use xlink:href="#feather-plus-square"></use>
        </svg>
        <span class="hidden tablet:inline">New Action</span>
      </button>
    </div>
  </div>
</header>

The Product Application Header is an alternative header that provides a lockup for a product name with the NYC Opportunity logo.

Header

header

Application Header

Product Header