Navigation banner

The Navigation banner is used to define a major section or specific area of our site, and should help set up diverse and related content for visitors to explore. We recommend using this banner when creating Hub landing 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. The navigation box offers links to draw users into the site to explore related, important content.

 


Publishing? View the DCR guidebook for detailed instructions.


 

Rules and recommendations

Navigation banner reference guide

 

Navigation banner
A: Backgrounds: 2 color options: BLK_Black, BLK_White with optional top/bottom border
B: Eyebrow (optional): Character count: 35*
C: Headline:
• Character count before text gets cut off: 70*
• Due to varying alphabets and character widths, please ensure your publisher tests this prior to release
D: Description:
• Character count before text gets cut off: 350*
• Due to varying alphabets and character widths, please ensure your publisher tests this prior to release
E: CTA (optional):
• CTA can be either a button or a link
• Keep these "digital" friendly; i.e. short descriptors and be explicit to where you are leading the user
F: Image
• Recommended image size: 718x367px graphic (JPG/PNG) to accommodate responsive layouts
• Image automatically scales and maintains aspect ratio
• All image assets must be optimized for the web: <300kb
G: Link list
• 5 links max
• Make sure these link to relevant pages/material that relate to your hub page
• Keep these "digital" friendly; i.e. short descriptors and be explicit to where you are leading the user
*NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release

 

Alternate appearance