Library · Heroes & Page Banners

Page Banner / Image

Slim interior-page title band over a background photo with a legibility scrim (text literal white by design, as HeroStandard). Covers the Figma Centre-Text and Left-Text components via the align prop.

Figma: Page Banner / Background image | Centre Text ↗ View Elementor template in 8020 ↗

Live preview — edit theme bottom-right

---
import PageBannerImage from "../components/figma/PageBannerImage.astro";
---
<PageBannerImage
  image="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1600&q=60"
  title="Contact Us"
/>

Props

Name	Type	Required	Description
`image`	`string`	Yes	Background image URL
`imageAlt`	`string`	—	Alt text — leave empty for a purely decorative backdrop
`title`	`string`	Yes	The page title (H1 semantics, H2 visual style)
`align`	`'center' \| 'left'`	—	Text alignment — the two Figma components (default: 'center')
`level`	`'h1' \| 'h2'`	—	Semantic heading level (default: 'h1')

Example with all props

<PageBannerImage
  image="/images/coastline.jpg"
  title="Contact Us"
  align="center"
/>