ÃÛ¶¹ÊÓƵ

• The 'full bleed image', spanning from browser edge to browser edge.Ìý
• 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
• The image can set to be hidden for the viewports small and XS
• 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.
• 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.
    Only use for these cases.

Ìý

• Image selection
  • If you want the text to appear in front of the image without a white background in desktop view, make sure it's readable (accessible).
    
• Required image sizes:
  
  • For 'desktop'-view (large and medium viewport)
    • Ratio 64:25,
      resolution min. 3840 x 1500px
    • Ratio 160:69,
      resolution min. 3840 x 1656px
  • For 'mobile'-view (small and extra small viewport)
    • Ratio 64:25,
      resolution min. 2046 x 800px
    • Ratio 160:69,
      resolution min. 2046 x 883px
  • The "full-bleed" image has the same definition as on the "Promotion stage" component on the homepage.