Microsite header
Communicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service.
Props
type
live | alpha | beta
The service type which determines the badge style. "live" shows official government site text, "alpha" and "beta" show development stage badges.
version
string
App or service version displayed on the right side of the header.
feedbackurl
string
Url to feedback page that will be displayed when provided.
maxcontentwidth
any
Maximum width of the content area
Defaults to
100%.
headerurltarget
self | blank
Sets the target attribute for the header link.
Defaults to
blank.
feedbackurltarget
self | blank
For internal feedback urls sets target=
Defaults to
blank.
hasfeedbackhandler
boolean
When true, enables a custom feedback click handler via the _feedbackClick event instead of navigating to feedbackurl.
Defaults to
false.
testId
string
Sets a data-testid attribute for automated testing.
Events
onFeedbackClick
(event: Event) => void
_feedbackClick
CustomEvent
Slots
version
Named slot for content
Basic page layout
<GoabOneColumnLayout>
<section slot="header">
<GoabMicrositeHeader type="alpha" version="UAT" />
<GoabAppHeader url="/" heading="Design System">
<a href="/login">Sign in</a>
</GoabAppHeader>
</section>
<GoabPageBlock width="704px">
<p>
<GoabSkeleton type="header" size="4" />
<GoabSkeleton type="text" size="1" />
</p>
<p>
<GoabSkeleton type="header" size="4" />
<GoabSkeleton type="text" size="1" />
</p>
<GoabGrid minChildWidth="30ch">
<GoabSkeleton type="card" size="2" />
<GoabSkeleton type="card" size="2" />
</GoabGrid>
</GoabPageBlock>
<section slot="footer">
<GoabxAppFooter />
</section>
</GoabOneColumnLayout><goab-one-column-layout>
<section slot="header">
<goab-microsite-header type="alpha" version="UAT"></goab-microsite-header>
<goab-app-header url="/" heading="Design System">
<a href="/login">Sign in</a>
</goab-app-header>
</section>
<goab-page-block width="704px">
<p>
<goab-skeleton type="header" size="4"></goab-skeleton>
<goab-skeleton type="text" size="1"></goab-skeleton>
</p>
<p>
<goab-skeleton type="header" size="4"></goab-skeleton>
<goab-skeleton type="text" size="1"></goab-skeleton>
</p>
<goab-grid minChildWidth="30ch">
<goab-skeleton type="card" size="2"></goab-skeleton>
<goab-skeleton type="card" size="2"></goab-skeleton>
</goab-grid>
</goab-page-block>
<section slot="footer">
<goabx-app-footer></goabx-app-footer>
</section>
</goab-one-column-layout><goa-one-column-layout>
<section slot="header">
<goa-microsite-header type="alpha" version="UAT"></goa-microsite-header>
<goa-app-header url="/" heading="Design System">
<a href="/login">Sign in</a>
</goa-app-header>
</section>
<goa-page-block width="704px">
<p>
<goa-skeleton type="header" size="4"></goa-skeleton>
<goa-skeleton type="text" size="1"></goa-skeleton>
</p>
<p>
<goa-skeleton type="header" size="4"></goa-skeleton>
<goa-skeleton type="text" size="1"></goa-skeleton>
</p>
<goa-grid min-child-width="30ch">
<goa-skeleton type="card" size="2"></goa-skeleton>
<goa-skeleton type="card" size="2"></goa-skeleton>
</goa-grid>
</goa-page-block>
<section slot="footer">
<goa-app-footer version="2"></goa-app-footer>
</section>
</goa-one-column-layout>Header with navigation
<GoabAppHeader url="https://www.alberta.ca" heading="Service name">
<GoabAppHeaderMenu heading="Search" leadingIcon="search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</GoabAppHeaderMenu>
<a href="#">Support</a>
<a href="#" className="interactive">
Sign in
</a>
</GoabAppHeader><goab-microsite-header type="live"></goab-microsite-header>
<goab-app-header url="https://example.com" heading="Service name">
<goab-app-header-menu heading="Search" leadingIcon="search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</goab-app-header-menu>
<a href="#">Support</a>
<a href="#" class="interactive">Sign in</a>
</goab-app-header><goa-microsite-header type="live"></goa-microsite-header>
<goa-app-header url="https://example.com" heading="Service name">
<goa-app-header-menu heading="Search" leadingicon="search">
<a href="#">Cases</a>
<a href="#">Payments</a>
<a href="#">Outstanding</a>
</goa-app-header-menu>
<a href="#">Support</a>
<a href="#" class="interactive">Sign in</a>
</goa-app-header>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>