Page Header

Full-width banner with clamped content that shows Breadcrumbs, H1 Title, and optional description. Used at the top of interior landing pages.

WCAG 2.2 AA Reviewed April 2026

Design Guidance


Required	Title
Optional	Description
Limitations	Title: 45 characters max · Body text: 220 characters max
Properties	Breadcrumbs, extra spacing for overlap of body content

Content Guidance

Title: Sentence case, no punctuation, and clear and concise. Mirrors the language from inbound links and reflects what the user will see on the page.
Body text: Sentence case, with punctuation. Give a high-level overview of the page benefit to the reader.

Default — Title Only

View HTML

<div class="txds-page-header">
  <div class="txds-page-header__inner">
    <nav class="txds-breadcrumb txds-breadcrumb--dark" aria-label="Breadcrumb">
      <ol class="txds-breadcrumb__list">
        <li class="txds-breadcrumb__item"><a href="#">Home</a></li>
        <li class="txds-breadcrumb__item" aria-current="page">About Agency</li>
      </ol>
    </nav>
    <h1 class="txds-page-header__title">About Agency</h1>
  </div>
</div>

Default — Title with Body Text

View HTML

<div class="txds-page-header">
  <div class="txds-page-header__inner">
    <nav class="txds-breadcrumb txds-breadcrumb--dark" aria-label="Breadcrumb">
      <ol class="txds-breadcrumb__list">
        <li class="txds-breadcrumb__item"><a href="#">Home</a></li>
        <li class="txds-breadcrumb__item" aria-current="page">Support for Texans</li>
      </ol>
    </nav>
    <h1 class="txds-page-header__title">Support for Texans</h1>
    <p class="txds-page-header__text">We strive to deliver services that address the unique needs of individuals, families, and businesses throughout Texas, ensuring everyone can benefit from the resources we provide.</p>
  </div>
</div>

No Fill (Light)

View HTML

<div class="txds-page-header txds-page-header--light">
  <div class="txds-page-header__inner">
    <nav class="txds-breadcrumb" aria-label="Breadcrumb">
      <ol class="txds-breadcrumb__list">
        <li class="txds-breadcrumb__item"><a href="#">Home</a></li>
        <li class="txds-breadcrumb__item" aria-current="page">Support for Texans</li>
      </ol>
    </nav>
    <h1 class="txds-page-header__title">Support for Texans</h1>
    <p class="txds-page-header__text">We strive to deliver services that address the unique needs of individuals, families, and businesses throughout Texas, ensuring everyone can benefit from the resources we provide.</p>
  </div>
</div>

Image Background

View HTML

<div class="txds-page-header txds-page-header--image">
  <img class="txds-page-header__bg-image" src="/assets/images/photos/page-header-bg.jpg" alt="">
  <div class="txds-page-header__inner">
    <div class="txds-page-header__breadcrumb-bar">
      <nav class="txds-breadcrumb" aria-label="Breadcrumb">
        <ol class="txds-breadcrumb__list">
          <li class="txds-breadcrumb__item"><a href="#">Home</a></li>
          <li class="txds-breadcrumb__item" aria-current="page">Support for Texans</li>
        </ol>
      </nav>
    </div>
    <div class="txds-page-header__title-bar">
      <h1 class="txds-page-header__title">Support for Texans</h1>
    </div>
  </div>
</div>

CSS Classes

Class	Description
`txds-page-header`	Dark primary-60 background container with 64px padding.
`txds-page-header__inner`	Flex column wrapper for breadcrumbs, title, and optional text.
`txds-page-header__title`	H1 heading (50px Geologica Bold).
`txds-page-header__text`	Optional body text (20px) with 32px top margin.
`txds-page-header--light`	No-fill variant with transparent background and dark text.
`txds-page-header--image`	Image background variant with breadcrumb bar and title bar overlay.