Download
Page hero 01 – Variant A

In this first variant, the right column has a basis of 50vw. It doesn’t grow, but it can shrink. The left column has a basis of `fit-content`, and can grow and shrink. Its inner element is set to occupy 100% of the width, with a limit of 37.5rem (600px) — half the grid.
As a result:
– At desktop size they appear to be of equal width.
– As the viewport gets narrower, they smoothly shrink, with the left column
– At mobile size, they get stacked

Headline stating what your business does

Page Hero One — variant A (BG img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant A (real img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant A // inverted (BG img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant A // inverted (real img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.
Page Hero 01 – Variant B

In this second variant, the right column takes up half of the viewport. It doesn’t grow, but it can shrink. The left column’s size is based on its contents, and it can grow and shrink, while its inner element is set to occupy 100% of its width, with a maximum of 37.5rem (600px) — half the grid.
As a result:
– At desktop size they appear to be of equal width.
– As the viewport gets narrower, they smoothly shrink, with the left column
– At mobile size, they get stacked

Headline stating what your business does

Page Hero One — variant B (BG img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant B (real img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant B // inverted (BG img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant B // inverted (real img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.
Page Hero 01 – Variant C

In this first variant, the right column has a basis of 50vw. It doesn’t grow, but it can shrink. The left column has a basis of `fit-content`, and can grow and shrink. Its inner element is set to occupy 100% of the width, with a limit of 37.5rem (600px) — half the grid.
As a result:
– At desktop size they appear to be of equal width.
– As the viewport gets narrower, they smoothly shrink, with the left column
– At mobile size, they get stacked

Headline stating what your business does

Page Hero One — variant C (BG img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant C (real img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant C // inverted (BG img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant C // inverted (real img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.
Page Hero 01 – Variant D

This fourth variant uses the CSS grid layout engine (and not flexbox).
There are 12 columns in the grid, which spans the entire viewport width.
This breaks alignment with our global website grid, but can be used for sections that are meant to work in isolation from the rest of the content.
It can easily be modified to accomodate different column widths to create a large amount of variations.

Headline stating what your business does

Page Hero One — variant D (BG img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant D (Real img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant D // inverted (BG img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant D (Real img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.
Page Hero 01 – Variant E

This fifth variant uses the grid layout engine as well.
The main difference is, we’re constraining the grid to our website’s grid width.
It can easily be modified to accomodate different column widths to create a large amount of variations.

Headline stating what your business does

Page Hero One — variant E (BG img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant E (real img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant E // inverted (bg img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

Headline stating what your business does

Page Hero One — variant E // inverted (real img)

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

dzdzdz

dzdz

dzdzdz

dzdz

dzdzdz

dzdz

Headline stating what your business does

Page Hero ???

Lorem ipsum amet elit morbi dolor tortor nostra sagittis nascetur ullam corper. Pharetra torquent auctor metus felis nibh velit. Metus fringilla ullam corper odio aliquam lacinia mauris tempor etiam ultricies proin gravida.

dzdzdz

dzdz

dzdzdz

dzdz

dzdzdz

dzdz