Skip to main content

Background Image for Hero:

Header Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Action Item Text

Something wrong with this pattern or the documentation? File an issue on Bitbucket.

Options

Data Field Location Option Result
hero_text_alignment Page Properties > Data right Shifts hero copy to the right side.
hero_vignetting Page Properties > Data 10 Sets hero vignetting transparency to 10%.
slot_01 - slot_10 Page Properties > Data hero Inserts hero into designated slot.
N/A Files > Edit File > Labels The slug of the page that contains the hero, plus -hero-background. For example, if it is on your Home page, and the page slug is home label the image with home-hero-background. Assigns a background image to the hero.

Do

  • Use this when you want to create visual impact and call-to-action.
  • Use this when you have nice background photos on a consistent basis.
  • Use a compelling header that is in-brand and relevant to your most important content/action item.

Don’t

  • Don't use the hero pattern without a clear call-to-action.
  • Don't use a background image that renders your copy illegible.
  • Don't use a background photo that is pixelated.
  • Don't use a background photo unless it meets our brand guidelines.
  • Don't use more than one hero unit on a page.
  • Don't just repeat the site title in the header.

Something wrong with this pattern or the documentation? File an issue on Bitbucket.