Hero banner

A visual band of text, including an image and a call to action.

Props

heading

string

Main heading text.

backgroundColor

string

Hero Banner background color when no background image is provided.

Defaults to #f8f8f8.

backgroundUrl

string

Background image url.

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.

ReactNode

actions

ReactNode

Content rendered in the actions slot.

Examples

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>

Interaction

Learn more about what we offer. Contact us

Don't

Don't include a call-to-action link in a hero banner unless it is on the home page.