Hero banner
A visual band of text, including an image and a call to action.
Props
backgroundColor
string
Hero Banner background color when no background image is provided.
Defaults to
#f8f8f8.
backgroundUrl
string
Background image url.
heading
string
Main heading text.
maxContentWidth
string
Maximum width of the content area.
Defaults to
100%.
minHeight
string
Minimum height of the hero banner. Defaults to 600px when a background image is provided.
testId
string
Sets a data-testid attribute for automated testing.
textColor
string
Text color within the hero banner.
Slots
actions
Angular template reference for the actions slot content.
Hero banner with actions
function handleClick() {
console.log("Call to action clicked");
}<GoabHeroBanner heading="Supporting Businesses">
Resources are available to help Alberta entrepreneurs and small businesses
start, grow and succeed.
<GoabHeroBannerActions>
<GoabButton type="start" onClick={handleClick}>
Call to action
</GoabButton>
</GoabHeroBannerActions>
</GoabHeroBanner>onClick(): void {
console.log("Call to action clicked");
}<goab-hero-banner heading="Supporting Businesses" [actions]="heroBannerActionTemplate">
Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
<ng-template #heroBannerActionTemplate>
<goab-button type="start" (onClick)="onClick()">Call to action</goab-button>
</ng-template>
</goab-hero-banner>document.getElementById("cta-btn").addEventListener("_click", () => {
console.log("Call to action clicked");
});<goa-hero-banner heading="Supporting Businesses">
Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
<div slot="actions">
<goa-button version="2" type="start" id="cta-btn">Call to action</goa-button>
</div>
</goa-hero-banner>Content
Resources are available to help Alberta entrepreneurs.
Don't
Don't select photos with focal points at the edges, as text overlays the imagery.
Resources are available to help Alberta entrepreneurs.
Don't
Don't use a photograph without first cropping and resizing to fit the hero banner.
Resources are available to help Alberta entrepreneurs.
Do
Select photos that place the subject matter or focal point in the center.