Back to all examples

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>

Display version information in the microsite header using the version slot, allowing custom formatting and styling of version text.

When to use

Use this pattern when:

  • You need to display a version number or status in the header
  • The service is in alpha or beta phase
  • You want to include formatted version information

Considerations

  • Use the version slot for custom version content with formatting
  • Keep version text concise and clear
  • Combine with header type (alpha, beta, live) to indicate service maturity
  • Version information should be easily scannable