Skip to main content

Patterns

Header

The Header Component displays the title of the page content within a view.

Money for heat and utility expenses

Home Energy Assistance Program (HEAP) | NYC Human Resource Administration

<header class="c-header">
  <div class="c-header__icon"><a href="#">
      <div class="bg-icon-card-cash-expenses"></div>
    </a></div>
  <div>
    <h1 class="c-header__descriptor">Money for heat and utility expenses</h1>
    <h2 class="c-header__information">Home Energy Assistance Program (HEAP) | NYC Human Resource Administration</h2>
  </div>
</header>

Alternate Styling

Source: src/components/header/header-alternate

40 programs for you to look at.

Remember that we can’t guarantee eligibility, but can only recommend programs for you to consider.

<header class="c-header color-dark-background">
  <div class="c-header__icon print:hidden"><svg class="icon icon-success rounded-full text-color-green bg-color-white">
      <use xlink:href="#icon-success"></use>
    </svg></div>
  <div>
    <h1 class="c-header__descriptor">40 programs for you to look at.</h1>
    <p class="c-header__disclaimer">Remember that we can’t guarantee eligibility, but can only recommend programs for you to consider.</p>
  </div>
</header>