Hero CTA

Hero CTA banner

The Hero CTA banner is used to define a major section or high-traffic webpage; i.e. a campaign landing page, and should help set up diverse and related content for visitors to explore. We recommend using this banner on most L1 pages, which then links to lower-level pages.

Engage users by keeping headlines short, descriptive, and by creating a very clear call-to-action that directs them to take the next step.

If the purpose of your webpage is to tell one unifying message in a seamless flow, i.e. “Larry’s letter” as the hero, then a related content piece on sustainability, you can use this component multiple times on a page, in a stack of 3–4 for example. If doing so, please take care to alternate orientation to show variability in the content.

Designing for iShares? View the iShares Design System for their version of this component.

Image appearances

We have multiple image layout options to choose from, all with a right-side or left-side image orientation:

• Full-height — image extends to the top/bottom of the component
• Offset — image locks to the bottom of the component, with top-padding
• Border — image has top/bottom 40px inset border

For any of these layout options, you have the choice of where the image gets cropped from across different breakpoints; center, left or right side of the image container. This works for either right-side or left-side image orientation. See “Image placement & cropping guide” for more details.

PRO TIP: Always default to image-right as the first banner on the page, and alternate orientations if your content needs require stacking more banners below.

Rules and recommendations 

Alternate variations

To help you visualize different possible layouts and background colors, we stacked a few components together to give you a more clear understanding of how this could look.

No image appearances

If your content requires a more “standard” style banner on a lower-level web page, but also allows for introductory copy and a CTA option, then choose this appearance. It has all the options as our “image” appearance, but without the image.

Note: We do not suggest using the “no image” appearance more than one time per web page. It should always be placed at the top of the page, below the main navigation menu.

Rules and recommendations 

Alternate variations

To help you visualize different possible layouts and background colors, we stacked a few components together to give you a more clear understanding of how this could look.