Tall Banner
Layout Variant: C073
Content Type: Collection
| Teaser Title | Teaser Text | Pictures and Media | Items | CTAs |
C073 Collection | Yes | Yes | Yes | No | Optional |
Aspect Ratio
Expected Use:
The Tall Banner’s primary purpose is to be used as a Hero for product pages or feature content block. It can still serve that purpose or can be used as a product or service feature with optional CTA. This tall banner is for content that needs space to shine. This Hero was originally designed for the Sensi eSite as a way to highlight a graphic image in a hero with a solid background using the "Background Color" setting. Check with your platform governance before using this hero as it is not a stand hero in any page layout.
Building the Component:
On the Content Tab, include a Teaser Text, Image and optional Linked CTA. As this is a "Content Block" component, the Layout Variant is set in the C073 Collection and not in the Page Placement for the hero even if you are using it as a hero. Your content should contain the following:
- Teaser Title: This is not used for this component
- Teaser Text - This is both the title and the body copy of the hero. The first line of copy is the title and should be styled with a "Heading 1" (H1) and the second line for the body copy should not have any styling.
- Pictures and Other Media - this includes the image shown on the right side of the Hero.
- CTA Button - When using as a tall banner, you can optionally use a CTA. When using as a Hero you should not use a CTA in most use cases as you want someone to scroll further down the page. For the teasable content, use the Call-to-Action-Button section with the radio button selection of "Use Linked Call-to-Action Label". The component will pick up the CTA label of your teasable content. If no CTA Label is defined, the standard CTA label available for your teasable content ("Learn More") will be used. Please note, the "Use Custom and Linked Call-to-Action Button" does not work in this component.
- Background Color - this should be set to an appropriate choice. This is the primary fill color of the Hero banner.
- Set the Layout Variant to C073
