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`
Featured Image
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>
Breadcrumbs
The .breadcrumbs
class is used to style the page’s breadcrumbs. A Single Right-Pointing Angle Quotation Mark (›
) 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.
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>