Hero style page head

Desktop view

Allows to configure a hidden page head including all the required field that the page head regular also has
The 'full bleed image', spanning from browser edge to browser edge
Image
- Large and medium viewports
  - Ratio 12:5
  - Resolution 3840px x 1600px
- Small viewports
  - Ratio 256:231
  - Resolution 3840px x 3465px
- Xtra small viewports
  - Ratio 320:513
  - Resolution 624px x 1000px
The height of the image can be adjusted:
- Extra small (default)
  - Viewports
    - XS 160px
    - S 236px
    - M 300 px
    - L/XL 400 px
- Small
  - Viewports
    - XS 160px
    - S 236px
    - M 400px
    - L/XL 500 px
- Medium
  - Viewports
    - XS 160px
    - S 236px
    - M 500px
    - L/XL 600 px
- Large
  - Viewports
    - XS 160px
    - S 236px
    - M 600px
    - L/XL 700 px
Additional settings allowing to change position of text:
- Top alignment
- Center alignment
- Bottom alignment
Possibility to apply a white context box to improve readability of text if needed
Optionally, font in all text elements can be in white color if background image is dark. Make sure readability remains accessible
Optionally, a second CTA can be integrated
Action stamp functionality
Margin below page heads
Hiding the bottom margin allows eliminating white space between page heads that have an image and a Top Level Grid (or other Top Level component) that has a background color. Use this setting only for these cases.

The image selection is very important so that the title and infoline are very easy to read in all the viewports if the text has no white background.

AEM view