Skip to main content

Interior Page Hero

The Interior Page Hero displays the page title within the hero image at the top of a webpage.

The Interior Page Hero introduces the page by containing the required H1 page title, along with the optional introduction text.

Examples​

Default​

H1 page title

[Optional] Welcome week founded in 1870 biodiversity Columbus consectetur congue dolor non magna quis tortor volutpat future Buckeye Skull Session. 

<section class="bux-interior-hero">
  <h1 class="bux-h1 bux-interior-hero__header">H1 page title</h1>
  <p class="bux-interior-hero__intro-text">
    [Optional] Welcome week founded in 1870 biodiversity Columbus consectetur
    congue dolor non magna quis tortor volutpat future Buckeye Skull Session.
  </p>
</section>

Usage​

Dos​

  • Use a high-resolution, brand-aligned image that represents the content on the webpage and encourages the user to read further.
  • Write a concise page title. As the Heading 1 on the webpage, your page title is not only displayed within this component but may display within the browser’s tab and be prominent in search engine results.
  • If possible, include introduction text of one to three sentences that summarizes the purpose of the webpage. It helps users quickly decide if they are in the right place or not.

Don’ts​

  • Do not write long page titles. Additional context can be included within the introduction text.

Accessibility​

  • Ensure that this component is only used once on the page. It contains the page’s h1 element and a page should not have more than one h1.
  • Ensure that this component is placed in the h1’s proper location in the page’s content order.
Back to top