Universal Hero Image
How to use
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
When to use
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
When to consider something else
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accessibility tips
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Component Specifications
| Field | Description | Required / Optional |
|---|---|---|
| Name | The Name element | Required |
| Image | Select the image from the media library | Required |
| Alt Tag | enter the image alt text | Required |
| Container Width | set container width | |
| Background Color | select the background color | |
| Enlarge Image | Select enlarge image value for mobile display | |
| Image Horizontal Position | Select horizontal position of image on mobile display | |
| Image Vertical Position | Select vertical position of image on mobile display |
Description
Hero Images add images to the top of the page, usually an elevated page, to welcome users onto the page.
On-page example
When to use
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
When to consider something else
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accessibility tips
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Component Specifications
| Field | Description | Required / Optional |
|---|---|---|
| Name | The Name element | Required |
| Image | Select the image from the media library | Required |
| Alt Tag | enter the image alt text | Required |
| Container Width | set container width | |
| Background Color | select the background color | |
| Enlarge Image | Select enlarge image value for mobile display | |
| Image Horizontal Position | Select horizontal position of image on mobile display | |
| Image Vertical Position | Select vertical position of image on mobile display |