Microsite header

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

Props

type
GoabServiceLevel
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
Sets the target attribute for the feedback URL link.
Defaults to blank.
headerUrlTarget
GoabLinkTarget
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
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
For internal feedback urls sets target.
headerUrlTarget
GoabLinkTarget
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
For internal feedback urls sets target=
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
Examples

Show version number

No usage guidelines have been documented for this component yet.
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.

Related components

Header

Provide structure to help users find their way around the service.
View old component docs