COMPONENTS
Hero
Hero combines combines large background imagery with text to call attention to important messaging.
DESIGN ONLY: This page outlines the latest design guidance from the Goldman Sachs Design System. This component is not yet implemented in code. Future guidance may change to support code implementation or new research and methods.
- Hero Container
- Hero Background (Imagery, Video or Surface)
- Hero Text Container
- Hero Pre-title
- Hero Title
- Hero Body
- Hero Call To Action
The Hero banner has three content styles available— product, marketing and editorial. The content style controls several of the default settings for the text container including font type and padding. Styles are meant to be used independently and should not be mixed and matched or used together in a hero banner.
The hero banner has three ratios — primary, secondary or tertiary. These values correspond to the image aspect ratio, with primary being the tallest and most prominent option.
Hero text can be placed in just a single internal container or split between an internal and external text container that is placed at the bottom of the hero image area and overlaps it slightly.
The surface color for the external text container has two options — surface-primary (white) or surface-secondary (light gray).
Hero text can have center or left alignment. Typically the text and component alignment will match. For example, a center aligned text container should use center aligned text. However, when using an additional external container and left alignment, the outer edge of the external container aligns left, while the content keeps center alignment.
Calls to action overlaid on an image should use the contrast button style. Actions beneath the hero image should use the info or primary button style.
Image overlay can be applied over an image to add greater contrast for improved text legibility. By default it is a 20% black overlay which can be adjusted as needed.
There are two options for the background imagery — scaling or cropping.
Scaling maintains the aspect ratio of the hero background for all breakpoints. This is best used when the image or video cannot be cropped because it contains important information or people that should not be cropped into. Typically when using scaling at smaller breakpoints an additional external container should be added for body copy and actions as there will not be enough space inside the main background container area..
Cropping is an alternative that is used when the height of the hero is defined either by the content within the hero or by a pre-set height. The background image is then cropped by the container as needed. Cropping is best used for images that are patterns or background fill.
Each hero variation comes in three sizes — large, medium and small. Size changes the size of the text within the container and the spacing used between elements. They also correspond to the viewport width they will be displayed in with small being optimized for smaller breakpoints and large being optimized for the larger breakpoints. See Layout for breakpoint information.
DO: Consider the focal point of the image being used and position the text container in an area that is clear of the imagery focal point.
DON'T: Position the text over important focal points.
DON'T: Allow the container to crop important focal points of the image such as faces.
DON'T: Mix style types on the same page. For example, if the hero banner uses the Marketing Style, cards on the same page should not use the editorial style.
Contents