Interior Page Hero

Component status:Ready

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] Intro text dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor sed odio ut vesti bulum. Morbi a sapien et ligula egestas interdum et. Satapien et ligula egestast.

<div class="bux-container">
  <section class="bux-interior-hero bux-interior-hero--with-image">
    <div class="bux-interior-hero__image-wrapper">
      <img
        class="bux-interior-hero__image"
        src="/images/placeholders/osu-bux-5.jpg"
        alt="Graduates performing the O-H-I-O pose"
      />
      <div class="bux-interior-hero__header-container">
        <h1 class="bux-h1 bux-interior-hero__header">H1 page title</h1>
      </div>
    </div>
    <p class="bux-interior-hero__intro-text">
      [Optional] Intro text dolor sit amet, consectetur adipiscing elit.
      Pellentesque porttitor sed odio ut vesti bulum. Morbi a sapien et ligula
      egestas interdum et. Satapien et ligula egestast.
    </p>
  </section>
</div>

{#
Buckeye UX - version 1.1.0
Copyright (C) 2025 The Ohio State University
#}

{#
Interior Page Hero
The Interior Page Title Hero introduces the page by containing the required H1 page title along with optional
introduction text that summarizes the goals of the page. The image is also optional, but it's recommended to provide
an engaging visual to support the content on the page.
#}

<div class="bux-container">
  <section class="bux-interior-hero{% if image.src %} bux-interior-hero--with-image{% endif %}">
  {% if image.src %}
    <div class="bux-interior-hero__image-wrapper">
        <img class="bux-interior-hero__image" src="{{ image.src }}" alt="{{ image.alt }}" />
      <div class="bux-interior-hero__header-container">
        <h1 class="bux-h1 bux-interior-hero__header">{{ header }}</h1>
      </div>
    </div>
  {% else %}
    <h1 class="bux-h1 bux-interior-hero__header">{{ header }}</h1>
  {% endif %}
  {% if intro %}
    <p class="bux-interior-hero__intro-text">{{ intro }}</p>
  {% endif %}
  </section>
</div>

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.