Compact style

Desktop view with link

Desktop view with button

Mobile view with button

Mobile view with button

Full bleed style - Light theme (default)

Desktop view

screenshot
screenshot

Mobile view

Full bleed style - Dark theme

Desktop view

Mobile view

screenshot
screenshot

Full bleed info-block style

Desktop view

Mobile view

screenshot
 

Narrow style

Desktop view

Mobile view

screenshot
screenshot

How it works

  • 聽The component supports different style options
    • Compact (default)
    • Full bleed
    • Full bleed info-block
    • Narrow
  • The component displays
    • Image
    • Section title
    • Title
    • Text
    • Link
    • Button (only aviable in layout Narrow, Compact and Full bleed)
    • 1 to 4 teasers (only if Full bleed info-block style is selected)
    • Statistics (only if Narrow option is selected)
  • The styles differ for larger screens (M and above) and remains the same for smaller viewports (XS and S).

Compact style

  • Image height is fixed per viewport
    • XS = 150px,
    • S = 370px,
    • M = 500px,
    • L (and larger) = 600px聽聽聽聽
  • Image position can be on the left or right
  • Option to display a video icon in a target link
  • Background color can be defined

Full bleed style

  • Image height is fixed per viewport
    • XS = 150px,
    • S = 370px,
    • M = 500px,
    • L = 600px,
    • XL = 700px,
    • XXL( 1920 px) and larger = 930px
  • Option to display a video icon in a target link
  • Dark mode
    White font color and fixed black background color for XS viewport
  • Since the text is displayed in front of the image in the desktop view, make sure that it is readable (accessible).

Full bleed info-block style

  • One to four teasers can be integrated
  • Image height is fixed per viewport
    • XS = 150px,
    • S = 370px,
    • M = 500px,
    • L = 600px,
    • XL = 700px,
    • XXL( 1920 px) and larger = 930px
  • Since the text is displayed in front of the image in the desktop view, make sure that it is readable (accessible).

Narrow style

  • Image height is fixed per viewport
    • XS = 150px,
    • S = 370px,
    • M = 700px,
    • L (and larger) = 800px
  • Image position can be on the left or right
  • In the narrow style a featured statistics component can be integrated
  • Option to display a video icon in a target link
  • Background color can be defined

How to use it

With the large image and the integrated text, a very large attention can be achieved. Therefore, this component should be present only selectively and not several times on a page.

Crosslinks

Reference for publisher

AEM view

AEM view

AEM view

Note

Please ensure the aspect ratio by using the crop functionality of the image dialog.

Dark mode selection

Display video icon or button

Crosslinks