Super hero banner
The Super hero banner is our largest and most impactful banner. It should be used for specific high-traffic campaign landing pages, and should help set up diverse and related content for visitors to explore. We recommend using this banner sparingly and getting pre-approval from the design team prior to rolling your page out.
We’ve baked a few key features into this component, including the ability to:
- Have total control of how the image crops
- Full bleed background, offset image, or no image appearances
- Ability to turn component-level top padding on or off
- Note: Use this is to solve “double” padding issues when stacking similar colored components together which may cause large gaps to appear, and get pre-approval for guidance from the Design Platform team
Publishing? View the DCR guidebook for detailed instructions.
Full bleed image appearance
With our full-bleed background, the image sits within the color background, and has either a right or left-side image orientation.
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 our “Image placement & cropping guide” for more details.
Rules and recommendations
Component element | Optional element | Rules | ||
---|---|---|---|---|
Component elementA: Background color options | Optional element | Rules
|
||
Component elementB: Eyebrow | Optional element | Rules
|
||
Component elementC: Headline | Optional element | Rules
|
||
Component elementD: Body copy | Optional element | Rules
|
||
Component elementE: Image | Optional element | Rules
|
||
Component elementF: Component CTA | Optional element | Rules
|
||
Component element*NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release | Optional element | Rules | ||