Heroes function as a primary focal point on a page, often used to introduce a collection of pages by combining a brief description of the goals of that section along with a visually impactful graphic.

Content should be limited to one or two brief sentences to help the user orient themselves and ensure this page will satisfy their desired goal. Copy should be punchy and grab the user’s attention while reinforcing the brand voice.

Heroes are integral to the page, and cannot be removed.

Heroes should be limited to first- (i.e., Consumer Help) or second-level (i.e., Credit & Credit Cards) landing pages. The fewer instances of heroes there are, the more impact they will convey.

Heroes should be the most prominent thing on the page, and help to establish visual hierarchy of where the page lives within the information architecture.

Heroes can contain calls to action. Rules for button versus links apply in a call to action.

• Full-width colored background with black text and blue link or button. Standard link and button styles apply. Color contrast of text and links on background must be 508-accessible.
• No breadcrumb should appear in or above the hero
• Total height: 285px
• Text is vertically centered, top and bottom padding should be no less than 45 px

• Heading: H2
• Subheading: Lead paragraph (Avenir Next Regular, 18px/22px)
• Top and bottom padding: 30px
• Module height is flexible to text height
• Visual is vertically centered

• Heading: H2
• Subheading: Lead paragraph (Avenir Next Regular, 18px/22px)
• Top and bottom padding: 30px
• Illustration is 30px below copy and spans width (to 15px padding)