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 Offset image appearance No image appearance
Paragraph-2,Super Hero Banner-1,Paragraph-3,Advance Static Table-1
Paragraph-4,Super Hero Banner-2,Paragraph-5,Advance Static Table-2,Super Hero Banner-3,Content Block-1
Paragraph-6,Super Hero Banner-4,Paragraph-7,Advance Static Table-3,Paragraph-8,Super Hero Banner-5,Super Hero Banner-6

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.

optional eyebrow

Full bleed image appearance

Intrinsicly morph technically sound paradigms with competitive systems. Assertively deliver competitive collaboration and idea-sharing before client-focused content.

 

Enthusiastically reintermediate maintainable processes rather than user friendly resources. Holisticly reinvent collaborative web services vis-a-vis progressive ideas.

Optional button Optional button
tab1-img1

Rules and recommendations

Component elementOptional elementRules
Component elementA: Background color options Optional element Rules
  • • BLK_White (ONLY optional bottom border - aligns to body text width)
    •   • Use bottom border if not using the CTA. It helps “anchor” the text block
  • • BLK_Neutral
  • • BLK_Black
  • • BLK_Yellow
Component elementB: Eyebrow Optional element Rules
  • • Character count: ~35*
  • • Used for anything user-journey related - page titles, section titles (i.e. “Who we are”)
Component elementC: Headline Optional element Rules
  • • Headline character count: ~70
Component elementD: Body copy Optional element Rules
  • • Body character count: ~500*
  • • Ability to include hyperlink
  • • Stylization: Italic, bold capabilities
Component elementE: Image Optional element Rules
  • • Image dimension: 860x600px graphic (JPG/PNG)
  • • Graphics are cut wider to accommodate responsive layouts
  • • Image alignment: right or left
  • • See “Image and cropping guides” section for detailed instructions on cropping
  • • All image assets must be optimized for the web: <300kb
Component elementF: Component CTA Optional element Rules
  • • CTA can be either a primary button or a tertiary link
  • • Keep these "digital" friendly; i.e. short descriptors
Component element*NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release Optional element Rules
Showing 1 to 7 of 7 entries