Hero banner with actions - GoA Design System

Back to all 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>
        <GoabxButton type="start" onClick={handleClick}>
          Call to action
        </GoabxButton>
      </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>
    <goabx-button type="start" (onClick)="onClick()">Call to action</goabx-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>

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