Hero Block

The Phillips 66 Hero Block is a full-width, full-height block designed to serve as the primary visual focal point on a page. Typically, the Hero Block will sit at the top of a page, but there are times when it may be useful to use it in the body.

Image Settings

The Hero Block accommodates both video and image links. All assets must be hosted in Widen.

Hero with image background

And an optional description

Hero with video background

And an optional description

Sticky Settings

By default, the Hero Block is Sticky. This means that it will not scroll away, and the following blocks on the page will scroll on top of it. This creates visual interest, movement, and animation. However, you must be mindful of how your content will look on top of a Sticky Hero, and you must make thoughtful use of Groups in order to ensure that your content is readable. Within the Editorial Sidebar, you can make your Hero not Sticky.

Learn more about groups

Sticky Hero

Notice how the following Blocks scroll on top of this image.

Section header

This content will scroll on top of the header. This content will scroll on top of the header. This content will scroll on top of the header. This content will scroll on top of the header. This content will scroll on top of the header. This content will scroll on top of the header. This content will scroll on top of the header. This content will scroll on top of the header. This content will scroll on top of the header. This content will scroll on top of the header. This content will scroll on top of the header. This content will scroll on top of the header.