Microsite header
Communicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service.
Props
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.
type
GoabServiceLevel
The service type which determines the badge style. "live" shows official government site text, "alpha" and "beta" show development stage badges.
Events
onFeedbackClick
() => void
Callback fired when the feedback link is clicked, enables custom feedback handling.
Slots
version
App or service version displayed on the right side of the header. Accepts a string or custom ReactNode for rich content.
Link the user to give feedback to the service
import { GoabMicrositeHeader } from "@abgov/react-components";
export function LinkTheUserToGiveFeedbackToTheService() {
const onClick = () => {
console.log("Feedback clicked");
alert("Thank you for your feedback!");
};
return <GoabMicrositeHeader type="alpha" onFeedbackClick={onClick} />;
}onFeedbackClick(): void {
console.log("Feedback clicked");
alert("Thank you for your feedback!");
}<goab-microsite-header type="alpha" (onFeedbackClick)="onFeedbackClick()"></goab-microsite-header>document.getElementById("microsite-header").addEventListener("_feedbackClick", () => {
console.log("Feedback clicked");
alert("Thank you for your feedback!");
});<goa-microsite-header type="alpha" id="microsite-header"></goa-microsite-header>Show version number
<GoabMicrositeHeader
type="alpha"
version={
<span>Slotted <b>version text</b>.</span>
<span>v1.23</span>
}
/><goab-microsite-header type="alpha" [version]="versionTemplate">
<ng-template #versionTemplate>
<span>Slotted <b>version text</b>.</span>
<span>v1.23</span>
</ng-template>
</goab-microsite-header><goa-microsite-header type="alpha">
<div slot="version">
<span>Slotted <b>version text</b>.</span>
<span>v1.23</span>
</div>
</goa-microsite-header>