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
Test ID for the component
Defaults to background.

Slots

actions
Named slot for content
 Examples

Hero banner with actions

ReactAngularWeb Components
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>

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.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.