Library · Heroes & Page Banners

Page Banner / Solid

Slim interior-page title band on a solid colour tone. Covers the Figma Centre-Text and Left-Text [library] sets via the align prop.

Figma: Page Banner / Solid colour | Centre Text [library] ↗ View Elementor template in 8020 ↗

Live preview — edit theme bottom-right

---
import PageBannerSolid from "../components/figma/PageBannerSolid.astro";
---
<PageBannerSolid title="About Us" tone="primary" />
<PageBannerSolid title="Our Services" align="left" tone="secondary" />

Props

Name	Type	Required	Description
`title`	`string`	Yes	The page title (H1 semantics, H2 visual style)
`align`	`'center' \| 'left'`	—	Text alignment — the two Figma sets (default: 'center')
`level`	`'h1' \| 'h2'`	—	Semantic heading level (default: 'h1')
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral"`	—	Background tone — the Figma colour-variant axis

Example with all props

<PageBannerSolid title="About Us" align="center" level="h1" tone="primary" />