Hero Section

Desktop

The hero section extends over the entire browser width and can be used to display various elements.

Depending on how the image is cropped, the white box is aligned to the right or left of the two outer grid columns. The distance to the upper or lower edge of the image can be selected freely.

Mobile

Due to the limited space for mobile applications, the box – overlapping image layer and gray area – is placed at the bottom of the image. This ensures optimal visibility of the image and text.