Image-backed: pass an approved, self-hosted image when it adds useful institutional context. The backdrop is decorative because the title and summary carry the page meaning, so use an empty alt value. When no approved image exists, omit image and the same component provides its high-contrast solid state.

Use one editorial hero and one page-level h1 per page. Keep the eyebrow short, the summary to one or two sentences and the action set to no more than two links, with the primary action first. Use UjPageHeader for smaller internal-page introductions.

Do not recreate the overlay, colours, spacing, typography or responsive behaviour in application CSS. Do not place text inside the image, add video or carousel behaviour, or make the image the only source of meaning.

<UjEditorialHero
  actions={
    <>
      <UjButtonLink href="/programmes">
        Explore programmes
      </UjButtonLink>
      <UjButtonLink href="/departments" variant="secondary">
        Explore departments
      </UjButtonLink>
    </>
  }
  eyebrow="University of Johannesburg"
  image={{ alt: "", src: "/images/faculty-hero.webp" }}
  summary="Discover programmes, academic departments, staff expertise and news."
  title="Faculty of Health Sciences"
/>