Article Page Header-with Image


Large article header image with H1 text for news articles.

On-page Example

To preview a live example of the component or inspect the code, click the link below

Article Page Header-with Image in page example

Component Specifications

Item/Field Description Required/Optional
Post Title Field: Single line text field
Character Recommendation: 180
Wrapping: Wrap to two lines
Image-Large Aspect Ratio: 2:1
Image Dimensions: 1920x960
Display: Darker overlay added behind text area
using CSS to accommodate accessibility 
Mobile Response   Bootstrap 5 NA
Page Placement Full width NA
Creation On Page NA
Accessibility H1 of the page NA

When to Use

  • Use with news articles 
  • Use when no other H1 is present on the page 

When to Consider Something Else

  • If there is already an H1 on the page
  • If there is already a header image on the page 

How to Use

Fill in the required Headline and supply a Large Image (Aspect Ratio: 2:1 and Image Dimensions: 1920x960 )

Accessibility Tips

The text serves as the H1 of the page and the content type should be located at the very top of the page.