Hero Split Banner
Description
Inserts a hero image, sometimes called a banner image, along with text and a button to the side
On-page Example
To preview a live example of the component or inspect the code, click the link below
Component Specifications
| Item/Field | Description | Required/Optional |
|---|---|---|
| Hero Intro | Field: Single line text field Character Recommendation: 35 Wrapping: Wrap to two lines Size: One- third of s horizontal screen size |
Required |
| Image-Large | Aspect Ratio: 4:3 Image Dimensions: 987x738 Size: Two thirds or screen size |
Required |
| Title | Title: H1 Character Recommendation: 30 Wrapping: Two lines |
Required |
| Description | Field Type: Styled text Character Recommendation:100 Wrapping: Two lines |
|
| Button Text Button Destination |
Field type: Single line text Character Recommendation: 20 Wrapping: Single line Number: One button |
Optional |
| Mobile Response | Image on top | NA |
| Page Placement | Full width, page header | NA |
| Accessibility | H1 of the page | NA |
When to Use
- On a landing page
- When you have an image that helps brand the topic or subject of the website
- When you are trying to make a page easier to remember
- When there is a single news item you would like to highlight
When to Consider Something Else
- On internal, content heavy pages
- When there are no distinguishing images available
How to Use
- Place at the top of your page
- Optimal Image Dimensions: 987x738 (4:3 aspect ratio)
Accessibility Tips
- Make sure the link, if used, has text that describes the destination sufficiently, even when out of context.
- Serves as the H1 of the page