Microsite header

Communicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service.

Props

type
GoabServiceLevel alpha | beta | live
The service type which determines the badge style. "live" shows official government site text, "alpha" and "beta" show development stage badges.
feedbackUrl
string
URL to a feedback page displayed when provided.
feedbackUrlTarget
GoabLinkTarget self | blank
Sets the target attribute for the feedback URL link.
Defaults to blank.
headerUrlTarget
GoabLinkTarget self | blank
Sets the target attribute for the header link.
Defaults to blank.
maxContentWidth
string
Maximum width of the content area.
Defaults to 100%.
testId
string
Sets a data-testid attribute for automated testing.
version
string | React.ReactNode
App or service version displayed on the right side of the header.
type
GoabServiceLevel alpha | beta | live
The service type which determines the badge style. "live" shows official government site text, "alpha" and "beta" show development stage badges.
feedbackUrl
string
Url to feedback page that will be displayed when provided.
feedbackUrlTarget
GoabLinkTarget self | blank
Sets the target attribute for the feedback URL link.
headerUrlTarget
GoabLinkTarget self | blank
Sets the target attribute for the header link.
maxContentWidth
string
Maximum width of the content area.
testId
string
Sets a data-testid attribute for automated testing.
version
string | TemplateRef<any>
App or service version displayed on the right side of the header.
type
GoabMicrositeHeaderType live | alpha | beta
The service type which determines the badge style. "live" shows official government site text, "alpha" and "beta" show development stage badges.
feedbackurl
string
Url to feedback page that will be displayed when provided.
feedbackurltarget
GoabMicrositeHeaderUrlTargetType self | blank
Sets the target attribute for the feedback URL link.
Defaults to blank.
hasfeedbackhandler
boolean true | false
When true, enables a custom feedback click handler via the _feedbackClick event instead of navigating to feedbackurl.
Defaults to false.
headerurltarget
GoabMicrositeHeaderUrlTargetType self | blank
Sets the target attribute for the header link.
Defaults to blank.
maxcontentwidth
string
Maximum width of the content area
Defaults to 100%.
testid
string
Sets a data-testid attribute for automated testing.
version
string
App or service version displayed on the right side of the header.

Events

onFeedbackClick
() => void
Callback fired when the feedback link is clicked, enables custom feedback handling.
onFeedbackClick
() => void
Emits when the feedback link is clicked.
_feedbackClick
CustomEvent
Emits when the feedback link is clicked.

ReactNode

version
ReactNode
App or service version displayed on the right side of the header.
version
TemplateRef
App or service version displayed on the right side of the header.
version
slot
App or service version displayed on the right side of the header.
Examples

Show version number

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.

View old component docs