Program Header

Full-width hero banner for program pages. Green, White, and Wide variants.

WCAG 2.2 AA Reviewed April 2026

Design Guidance


Required	Title, breadcrumbs
Optional	Agency logo watermark
Properties	Size (narrow, wide, mobile), color (green, white)

Narrow — Green (Dark)

Home
Support for Texans

Support for Texans

View HTML

<section class="txds-program-header txds-program-header--green">
  <div class="txds-program-header__inner">
    <div class="txds-program-header__crumb-wrap">
      <ol class="txds-program-header__breadcrumb">
        <li>
          <a href="#">Home</a>
          <span class="txds-program-header__breadcrumb-separator">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M6.47 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 1 1-1.06-1.06L9.19 8 6.47 5.28a.75.75 0 0 1 0-1.06z"/></svg>
          </span>
        </li>
        <li>
          <span class="txds-program-header__breadcrumb-current">Support for Texans</span>
        </li>
      </ol>
    </div>
    <h1 class="txds-program-header__title">Support for Texans</h1>
  </div>
</section>

Narrow — Green With Description

Home
Support for Texans

Support for Texans

Find resources, check eligibility, and connect with local offices that can help you and your family access the services you need across Texas.

View HTML

<section class="txds-program-header txds-program-header--green">
  <div class="txds-program-header__inner">
    <div class="txds-program-header__crumb-wrap">
      <ol class="txds-program-header__breadcrumb">
        <li>
          <a href="#">Home</a>
          <span class="txds-program-header__breadcrumb-separator">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M6.47 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 1 1-1.06-1.06L9.19 8 6.47 5.28a.75.75 0 0 1 0-1.06z"/></svg>
          </span>
        </li>
        <li>
          <span class="txds-program-header__breadcrumb-current">Support for Texans</span>
        </li>
      </ol>
    </div>
    <h1 class="txds-program-header__title">Support for Texans</h1>
    <p class="txds-program-header__text">Find resources, check eligibility, and connect with local offices that can help you and your family access the services you need across Texas.</p>
  </div>
</section>

Narrow — White (Light)

Home
Support for Texans

Support for Texans

View HTML

<section class="txds-program-header txds-program-header--white">
  <div class="txds-program-header__inner">
    <div class="txds-program-header__crumb-wrap">
      <ol class="txds-program-header__breadcrumb">
        <li>
          <a href="#">Home</a>
          <span class="txds-program-header__breadcrumb-separator">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M6.47 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 1 1-1.06-1.06L9.19 8 6.47 5.28a.75.75 0 0 1 0-1.06z"/></svg>
          </span>
        </li>
        <li>
          <span class="txds-program-header__breadcrumb-current">Support for Texans</span>
        </li>
      </ol>
    </div>
    <h1 class="txds-program-header__title">Support for Texans</h1>
  </div>
</section>

Wide — Green

Home
Support for Texans

Support for Texans

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras neque purus, pretium vel ante a, fringilla vulputate dolor. Vivamus nec metus felis.

View HTML

<section class="txds-program-header txds-program-header--green txds-program-header--wide">
  <div class="txds-program-header__inner">
    <div class="txds-program-header__crumb-wrap">
      <ol class="txds-program-header__breadcrumb">
        <li>
          <a href="#">Home</a>
          <span class="txds-program-header__breadcrumb-separator">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M6.47 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 1 1-1.06-1.06L9.19 8 6.47 5.28a.75.75 0 0 1 0-1.06z"/></svg>
          </span>
        </li>
        <li>
          <span class="txds-program-header__breadcrumb-current">Support for Texans</span>
        </li>
      </ol>
    </div>
    <h1 class="txds-program-header__title">Support for Texans</h1>
    <p class="txds-program-header__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras neque purus, pretium vel ante a, fringilla vulputate dolor. Vivamus nec metus felis.</p>
  </div>
  <div class="txds-program-header__watermark" aria-hidden="true">
    <!-- Agency logo watermark placeholder -->
  </div>
</section>

Wide — White

Home
Support for Texans

Support for Texans

Find resources, check eligibility, and connect with local offices that can help you and your family access the services you need across Texas.

View HTML

<section class="txds-program-header txds-program-header--white txds-program-header--wide">
  <div class="txds-program-header__inner">
    <div class="txds-program-header__crumb-wrap">
      <ol class="txds-program-header__breadcrumb">
        <li>
          <a href="#">Home</a>
          <span class="txds-program-header__breadcrumb-separator">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M6.47 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 1 1-1.06-1.06L9.19 8 6.47 5.28a.75.75 0 0 1 0-1.06z"/></svg>
          </span>
        </li>
        <li>
          <span class="txds-program-header__breadcrumb-current">Support for Texans</span>
        </li>
      </ol>
    </div>
    <h1 class="txds-program-header__title">Support for Texans</h1>
    <p class="txds-program-header__text">Find resources, check eligibility, and connect with local offices that can help you and your family access the services you need across Texas.</p>
  </div>
  <div class="txds-program-header__watermark" aria-hidden="true">
    <!-- Agency logo watermark placeholder -->
  </div>
</section>

Mobile — Green

Home
Support for Texans

Support for Texans

View HTML

<section class="txds-program-header txds-program-header--green" style="max-width:375px">
  <div class="txds-program-header__inner">
    <div class="txds-program-header__crumb-wrap">
      <ol class="txds-program-header__breadcrumb">
        <li>
          <a href="#">Home</a>
          <span class="txds-program-header__breadcrumb-separator">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M6.47 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 1 1-1.06-1.06L9.19 8 6.47 5.28a.75.75 0 0 1 0-1.06z"/></svg>
          </span>
        </li>
        <li>
          <span class="txds-program-header__breadcrumb-current">Support for Texans</span>
        </li>
      </ol>
    </div>
    <h1 class="txds-program-header__title">Support for Texans</h1>
  </div>
</section>

Mobile — White

Home
Support for Texans

Support for Texans

View HTML

<section class="txds-program-header txds-program-header--white" style="max-width:375px">
  <div class="txds-program-header__inner">
    <div class="txds-program-header__crumb-wrap">
      <ol class="txds-program-header__breadcrumb">
        <li>
          <a href="#">Home</a>
          <span class="txds-program-header__breadcrumb-separator">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M6.47 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 1 1-1.06-1.06L9.19 8 6.47 5.28a.75.75 0 0 1 0-1.06z"/></svg>
          </span>
        </li>
        <li>
          <span class="txds-program-header__breadcrumb-current">Support for Texans</span>
        </li>
      </ol>
    </div>
    <h1 class="txds-program-header__title">Support for Texans</h1>
  </div>
</section>

CSS Classes

Class	Description
`txds-program-header`	Base full-width banner container with drop shadow.
`txds-program-header--green`	Dark primary-60 background with light text.
`txds-program-header--white`	Light gray-05 background with dark text.
`txds-program-header--wide`	Wider layout (min-height 324px) with agency logo watermark.
`txds-program-header__inner`	Flex column content wrapper (breadcrumbs + title + text).
`txds-program-header__breadcrumb`	Breadcrumb navigation list.
`txds-program-header__title`	H1 heading (50px Geologica Bold).
`txds-program-header__text`	Optional description text (20px, max-width 760px).
`txds-program-header__watermark`	Absolutely positioned faded agency logo background element.