Hero - Style A, B, C and D
This component should be used to help set page content expectations and be consistent with the user's placement within the website.
This component allows the following background color panels which displays behind the bottom half of the image.
- Blue
- Purple
- Green
- Yellow
- Orange
The following image positions are also available for all styles except Page Hero Style D:
- Image right
- Image left
Note: It is not recommended to place text in an image. If required, please place text where it will not get cropped off.
Style A
Image Specs
- 2:1 image displayed
- Max css resolution 1100 x 550
- Source resolution at least 2x
Style B
Image Specs
- 16:18 portrait orientated image displayed
- Max width (css) 720px
- Source resolution at least 2x
Pellentesque hendrerit nibh vitae nulla feugiat, vel consectetur nunc egestas.
Style C
Image Specs
- 16:9 image displayed
- Max css resolution 1000 x 562
- Source resolution at least 2x
In ullamcorper, ligula sit amet fringilla fermentum, lectus leo maximus turpis, ac faucibus augue massa eget augue.
Style D
Image Specs
Primary image
- 16:9 image displayed
- Max css resolution 780 x 439
- Source resolution at least 2x
Secondary image
- 16:9 image displayed
- Max css resolution 490 x 276
- Source resolution at least 2x
