Article Page Header-with Image
Description
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 |
Required |
| Image-Large | Aspect Ratio: 2:1 Image Dimensions: 1920x960 Display: Darker overlay added behind text area using CSS to accommodate accessibility |
Required |
| 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.