Get startedPatternsComponentsStylesContentSupport
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
AllAccordionBadgeBlockButtonButton groupCalloutCheckboxContainerDate pickerDetailsDividerDropdownFile uploaderFilter chipFooterForm itemForm stepperGridHeaderHero bannerIconsIcon buttonInputListMicrosite headerModalNotification bannerPaginationPopoverProgress indicatorRadioSide menuSkeleton loadingSpacerTableTabsTextText areaTooltip

Hero banner

A visual band of text, including a background colour or image and a call to action.

Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
<GoAHeroBanner heading="Heading">
  Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
</GoAHeroBanner>
headingstring
Main heading text
backgroundUrlstring
Background image url
minHeightstring
Sets the height of the Hero Banner Defaults to 600px.
maxContentWidthstring
Maximum width of the content area Defaults to 100%.
backgroundColorstring
Hero Banner background color when no background image is provided Defaults to #f8f8f8.
textColorstring
Text color within the hero banner Defaults to #333.

Hero Banner with actions

Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
Call to action
<GoAHeroBanner heading="Supporting Businesses">
  Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
  <GoAHeroBannerActions>
    <GoAButton type="start" onClick={noop}>Call to action</GoAButton>
  </GoAHeroBannerActions>
</GoAHeroBanner>
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsStylesContentSubmit an issue#design-system-supportContribute to the design systemGive feedbackRelease notes