Heroes

Display Heading

Text link can come here

Hero images are generally used at the top of a page for marketing or campaign landing pages. They serve to draw in a user, provide context about the content, and reinforce our brand. They spread across the full width of the page.

For displaying text over hero image:

  • To make typography legible on top of imagery, apply a mask as indicated or based on context.
  • Limit to page title only; no subtitle or descriptor text
  • Heading text should not exceed 75 characters (including spaces)
  • Use the <h1> with .display-1 class name
  • Text link character limit: TBD

Use the default hero as pages with CTA, business’s value proposition or emotion-focused pages. Don’t use on pages with heavy browsing/searching and function-focused pages.

Hero elements

Display Heading

Text link can come here
<div class="hero"> <div class="hero__content"> <h1 class="display-1">Display Heading</h1> <div class="hero__actions"> <button class="btn btn--primary btn--lg">Primary button</button> </div> </div> <div class="hero__anchor"> <a href="" class="link">Text link can come here</a> </div> <img class="hero__art" src="https://d2jtqy5ihenyjm.cloudfront.net/education/sites/default/files/styles/tlr_component_hero/public/tlr_component/img_heroimage.jpg?itok=Wp5MKQhQ" aria-role="presentation"> </div>
Heading .display-1 Hero title
Actions .hero__actions Optional large, primary button. Use the .btn--primary .btn--lg on the button element
Art .hero__art Vertically centered background art
Anchor .hero__anchor optional text link positioned towards the bottom of the hero

Slim hero

Use the slim (.hero--slim) on subpages or supportive pages such as About, Help, Q&A. Slim heroes have a narrower min-height (250px) compared to a default hero min-height (300px).

Display Heading

<div class="hero hero--slim"> <div class="hero__content"> <h1 class="display-1">Display Heading</h1> </div> <img class="hero__art" src="https://d2jtqy5ihenyjm.cloudfront.net/education/sites/default/files/styles/tlr_component_hero/public/tlr_component/img_heroimage.jpg?itok=Wp5MKQhQ" aria-role="presentation"> </div>

Art direction

The hero art element, .hero__art, is vertically center aligned by default. Adjust the y-axis as needed with .hero--top or .hero--bottom.

Responsive art

TBD

results matching ""

    No results matching ""