Hero Image Layouts

hero image diagram

The diagrams shows a hero image layout which would typically comprise a background image with text arranged to the left.

Hero images are large, high-quality visuals prominently displayed at the top of a webpage. They are designed to grab attention and set the tone for the content that follows.

Typically, hero images span the full width of the screen, often accompanied by minimal text or a call-to-action button. These images play a crucial role in making a strong first impression, conveying key messages, and enhancing the overall aesthetic appeal of the website.

On this page, you’ll find a variety of hero image designs, each tailored to different purposes and styles.

Feel free to explore the examples below and find the perfect card design that fits your project’s requirements. Whether you’re looking for inspiration or ready-to-use designs, our collection aims to provide you with the tools you need to create a stunning and functional web experience.

Section 1

Hero image for mobile

The mobile view

Hero image for desktop

The desktop view

Mobile View:

  • A background image spans the width of the screen.
  • The section content comprises a headline, title, description and up to two buttons.
  • The content is arranged vertically.

Desktop View:

  • A background image spans the width of the screen.
  • The section content comprises a headline, title, description and up to two buttons.
  • The content is arranged aligned with the left edge of the main content area.

Please Note:

  • The background image will be displayed at different aspect ratios on desktop and mobile. So parts of it will be cropped out, the image needs to be considered for this effect.
  • There needs to be sufficient contrast between the text and image, in this case a semi transparent layer was placed over the image to achieve sufficient contrast.

View in a browser:

  • Please click the button to see the page section in a browser, scroll down to find the correct section.
  • Try narrowing the browser window to see section in mobile view.
View in a Browser

Section 2

mobile screen shot

The mobile view

desktop screen shot

The desktop view

Mobile View:

  • The section content comprises a headline, title, description and up to two buttons and an image.
  • The content is stacked vertically and horizontally centred.

Desktop View:

  • The section content comprises a headline, title, description and up to two buttons and an image.
  • The text is aligned to the left of the content area.
  • The image is aligned to the right of the content area.

Please Note:

  • Showing the photo at it’s original aspect ratio means it won’t be affected by the screen size unlike hero image 1.
  • The optional buttons form can request action from the visitor.

View in a browser:

  • Please click the button to see the page section in a browser, scroll down to find the correct section.
  • Try narrowing the browser window to see section in mobile view.
View in a Browser

Section 3

hero image mobile

The mobile view

hero image desktop

The desktop view

Mobile View:

  • The content comprises a headline, title, description and a list of two items comprising an icon, title and text.
  • The content is stacked vertically and mainly centred.

Desktop View:

  • The screen is split 50/50 into two areas.
  • On the left is a headline, title, description and a list of two items comprising an icon, title and text.
  • On the right is an image which aligns with the right edge of the screen.

View in a browser:

  • Please click the button to see the page section in a browser, scroll down to find the correct section.
  • Try narrowing the browser window to see section in mobile view.
View in a Browser

Section 4

hero image for mobile

The mobile view

hero image for desktop

The desktop view

Mobile View:

  • Text as for desktop but is centred with the exception of the icon list.
  • Images are stacked vertically and occupy the content area’s width.

Desktop View:

  • The content is sized to the width of the content area with text on the left and images on the right.
  • Text comprises headline, title, descriptive text with a subtitle and icon list. Images are side by side with accompanying text.

View in a browser:

  • Please click the button to see the page section in a browser, scroll down to find the correct section.
  • Try narrowing the browser window to see section in mobile view.
View in a Browser

Section 5

hero image for mobile

The mobile view

hero image for desktop

The desktop view

Mobile View:

  • Title and descriptive text are centred.
  • Background image occupies the full screen width.

Desktop View:

  • Title and descriptive text are centred.
  • Background image occupies the full screen width.

Please Note:

  • Showing the photo at it’s original aspect ratio means it won’t be affected by the screen size unlike hero image 1.

View in a browser:

  • Please click the button to see the page section in a browser.
  • Try narrowing the browser window to see section in mobile view.
View in a Browser

Section 6

T shirt Model 1 Hero image mobile

The mobile view

T shirt Model 1 Hero image desktop

The desktop view

Mobile View:

  • Eyebrow text and icon and title centred.
  • Horizontal list with icons/text
  • Call to action button centred.
  • Full width image shown at fixed aspect ratio.

Desktop View:

  • 50/50 split with text on the left and an image on the right.
  • Eyebrow text and icon and title left aligned.
  • Horizontal list with icons/text and call to action button
  • Full width image shown at fixed aspect ratio.

Please Note:

  • Showing the photo at it’s original aspect ratio means it won’t be affected by the screen size unlike hero image 1.

View in a browser:

  • Please click the button to see the page section in a browser.
  • Try narrowing the browser window to see section in mobile view.
View in a Browser