Microsite header

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

Related components: Header

<GoAMicrositeHeader type="alpha"></GoAMicrositeHeader>

type

alpha | beta | live

versionstring | ReactNode

Displayed on the right-hand side of the header.

feedbackUrlstring

Url to feedback page that will be displayed when provided.

maxContentWidthstring

Maximum width of the content area Defaults to 100%.

feedbackUrlTargetself | blank

For internal feedback urls sets target='_self' Defaults to blank.

headerUrlTargetself | blank

For internal header urls sets target='_self' Defaults to blank.

onFeedbackClick() => void

Function invoked when feedback link is clicked.

Custom click event handler (for feedback)

export default function MicrositeHeader() {
  function onClick() {
    console.log("Feedback clicked");
    alert("Thank you for your feedback!");
  }

  return (
    <>
      <GoAMicrositeHeader
        type="alpha"
        onFeedbackClick={() => onClick()}
      />
    </>
  );
}

Slotted version

Slotted version text.v1.23

<GoAMicrositeHeader
  type="alpha"
  version={<><span>Slotted <b>version text</b>.</span><span>v1.23</span></>}
></GoAMicrositeHeader>

Coming Soon

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours

Microsite header

Component

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

Component

Properties

Examples

Custom click event handler (for feedback)

Slotted version