LOREM IPSUM DOLOR

Consectetuer adipiscing elit

Image Focused Hero Banner

Usage

The image focused hero banner is a visual element that is placed on top of the page with a focus on the image. This banner is mainly used for residential use.

References

Confluence link

Atomic Design link

Adobe Documentation

Configurations

Background

You can choose between a background image and a background color.

 

  • Image: you can add a background image for desktop as well as for tablet and mobile. If mobile and tablet are not filled out, the desktop image will be used everywhere.
    Image size: Desktop 1440 x 480px
                            Tablet 768 x 380px

                            Mobile 320 x 300px


    The width is minimum the height is fixed

    TIP: check your image on mobile devices to ensure it works on all screen sizes

  • Color: you can choose between Green, Pink, Light grey, Dark Grey

 

PROMO HIGHLIGHT

The promo highlight can be turned on or off.

CTA BUTTON

The CTA button can be turned on or off.

SUBTITLE

An optional subtitle can be added beneath the banner title.