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
Version number or identifier displayed in 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
For internal header urls sets target=
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">
<GoabAppFooter />
</section>
</GoabOneColumnLayout>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>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} />;
}Show version number
<GoabMicrositeHeader
type="alpha"
version={
<span>Slotted <b>version text</b>.</span>
<span>v1.23</span>
}
/>