Back to all 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>

Create a hero banner with a call-to-action button to guide users toward the primary task on a landing page.

When to use

Use this pattern when:

  • Creating a landing page for a service
  • You need a prominent call-to-action
  • Introducing users to a service or feature
  • Building a start page for public forms

Considerations

  • Use the “start” button type for primary actions
  • Keep the banner text concise and action-oriented
  • The actions slot positions the button appropriately
  • Ensure the heading clearly describes the service purpose