1. Home ›
  2. Documentation ›
  3. Building Templates ›
  4. Page Headers

Page Headers

Page Header

The .page-header element is placed immediately inside the .site-content element and before the .page-main element. It creates the necessary space between the global header and the content, and displays the gray background image of the page header.

<!-- <div id="content" class="site-content"> -->

  <!-- Basic page header with no additional content -->
  <div class="page-header"></div>

<!-- <main class="page-main"> -->

Title and Image Variations

In addition to providing a space for the background image, the .page-header can also be used to display a headline, lede, and/or featured image. The layout can be modified using the .has-title and .has-image.

<!-- .has-title and .has-image classes are included since a title and an image are used in the header -->
<div class="page-header has-title has-image">
  <p class="page-title" aria-hidden="true">Page Title or Headline</p>
  <p class="page-lede" aria-hidden="true">Short lede for page.</p>
  <p class="page-image">
    <img src="image.png" alt="Header image"
         srcset="image.png 850w, image-lg.png 1200w, image-xl.png 1600w"
         sizes="(min-width:768px) 75vw, 100vw">
  </p>
</div>
CSS Class Description
.has-title Used when the page title or a headline is displayed in page-header. It will also affect how other areas of the content are displayed, specifically the breadcrumbs and the .page-title in the .page-main.
.has-image Used when there is a featured image used in the page-header. Will adjust the layout of the element to accommodate the use of a larger image.
CSS custom properties Description
--title-width Scoped to .page-header. May be used to adjust the width allocated for the title in the header.
--image-width Scoped to .page-header. May be used to adjust the width of the image in the header.

Background Images and Textures

The Web Theme contains pre-selected photos and textures that can be used as page header backgrounds. To use one of them, add the corresponding class to the body tag.

<body class="... bg-cells-texture ...">

The standard options are listed below. As this list continues to grow over time, each site’s offering may vary from this list. Any image or texture missing from a particular site can be added upon request.

If no background is specified, the Web Theme uses a Campus Photo (same as .bg-campus-photo) by default.

Textures and Patterns

  • .bg-cells-texture
  • .bg-clover-texture
  • .bg-diagonal-texture
  • .bg-flow-texture
  • .bg-geometric-texture
  • .bg-honeycomb-texture
  • .bg-linework-texture
  • .bg-main-building-texture
  • .bg-molecule-texture
  • .bg-network-texture
  • .bg-plaid-texture

Repeating Patterns

  • .bg-circuit-texture
  • .bg-cube-texture
  • .bg-dome-texture
  • .bg-graph-paper-texture
  • .bg-starcross-texture
  • .bg-textile-texture
  • .bg-topography-texture
  • .bg-waves-texture

Photos

  • .bg-campus-photo
  • .bg-faith-photo
  • .bg-global-photo
  • .bg-mosaic-photo
  • .bg-research-photo
  • .bg-students-photo
  • .bg-technology-photo
  • .bg-vinewall-photo

  • Cells Texture

    `.bg-cells-texture`

  • Clover Texture

    `.bg-clover-texture`

  • Diagonal Texture

    `.bg-diagonal-texture`

  • Flow Texture

    `.bg-flow-texture`

  • Geometric Texture

    `.bg-geometric-texture`

  • Honeycomb Texture

    `.bg-honeycomb-texture`

  • Linework Texture

    `.bg-linework-texture`

  • Main-building Texture

    `.bg-main-building-texture`

  • Molecule Texture

    `.bg-molecule-texture`

  • Network Texture

    `.bg-network-texture`

  • Plaid Texture

    `.bg-plaid-texture`

  • Circuit Texture

    `.bg-circuit-texture`

  • Cube Texture

    `.bg-cube-texture`

  • Dome Texture

    `.bg-dome-texture`

  • Graph Paper Texture

    `.bg-graph-paper-texture`

  • Starcross Texture

    `.bg-starcross-texture`

  • Textile Texture

    `.bg-textile-texture`

  • Topography Texture

    `.bg-topography-texture`

  • Waves Texture

    `.bg-waves-texture`

  • Campus Photo

    `.bg-campus-photo`

  • Faith Photo

    `.bg-faith-photo`

  • Global Photo

    `.bg-global-photo`

  • Mosaic Photo

    `.bg-mosaic-photo`

  • Research Photo

    `.bg-research-photo`

  • Students Photo

    `.bg-students-photo`

  • Technology Photo

    `.bg-technology-photo`

  • Vinewall Photo

    `.bg-vinewall-photo`

The .page-image class is used to designate the featured image in the header.

<div class="page-header has-image">
  <!-- ... -->
  <p class="page-image">
    <img src="image.png" alt="Header image"
         srcset="image.png 850w, image-lg.png 1200w, image-xl.png 1600w"
         sizes="(min-width:768px) 75vw, 100vw">
  </p>
</div>

Various images versions should be included in the srcset to help with performance.

Full-Bleed Variation

The .full class can be used to stretch the image the full width of the header.

<p class="page-image full">
  <!-- ... -->
  <img src="image.png" alt="Header image"
        srcset="image.png 850w, image-lg.png 1200w, image-xl.png 1600w"
        sizes="100vw">
</p>

Page Titles and Ledes

The .page-header may include a page title and lede. If this is done, the same content should also go in the <main> element of the page. The content in the <main> is the what will show up on mobile, as well as the “reader view” in various browsers. It’s this content in the <main> that should have the correct heading <h1>, if applicable. Any content in the header is intended only for visual decoration on wider screens, and should be marked as such using the aria-hidden attribute.

<div class="page-header has-title">
  <!-- `aria-hidden` is used for any copy in the header since it will also appear below in the <main> section of the page -->
  <p class="page-title" aria-hidden="true">Page Title or Headline</p>
  <p class="page-lede" aria-hidden="true">Short lede for page.</p>
</div>

<main class="page-main">
  <!-- ... -->
  <!-- If copy is used in the header, it should also be placed in the <main> section -->
  <h1 class="page-title">Page Title or Headline</h1>
  <p class="page-lede">Short lede for page.</p>
  <!-- Main content ... -->

With a Full-Bleed Image

The .page-title-wrapper is for use when a page title and lede are used in conjunction with a full-bleed image. This will ensure proper placement and readability of the text over the image.

<div class="page-header has-title has-image">
  <div class="page-title-wrapper">
    <p class="page-title" aria-hidden="true">Page Title or Headline</p>
    <p class="page-lede" aria-hidden="true">Page Lede</p>
  </div>
  <p class="page-image full">
  <!-- ... -->
</div>

The .breadcrumbs class is used to style the page’s breadcrumbs. A Single Right-Pointing Angle Quotation Mark (&rsaquo;) is used as the separator.

By default, the last element of the breadcrumbs is hidden when the page title follows immediately below it. If the .page-header also has .has-title, the last breadcrumb will be displayed.

  1. Home ›
  2. Parent Page ›
  3. Page Title

Page Title

<ol class="breadcrumbs">
  <li><a href="#">Home</a> › </li>
  <li><a href="#">Parent Page</a> › </li>
  <li>Page Title</li>
</ol>

<h1 class="page-title">Page Title</h1>