Hero banner

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

Props

heading
string
Main heading text
backgroundurl
string
Background image url
minheight
string
Minimum height of the hero banner. Defaults to 600px when a background image is provided.
maxcontentwidth
any
Maximum width of the content area
Defaults to 100%.
backgroundcolor
string
Hero Banner background color when no background image is provided
Defaults to #f8f8f8.
textcolor
string
Text color within the hero banner.
testId
string
Sets a data-testid attribute for automated testing.
Defaults to background.

Slots

actions
Named slot for content
 Examples

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.

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.

Performance

Resources are available to help Alberta entrepreneurs.
Do
Enable image optimization for desktop, tablet, and mobile to minimize loading times.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

Accessibility

Resources are available to help Alberta entrepreneurs.
Do
Ensure hero banner images are accessible by using descriptive alt text.
View old component docs