Phase banner

Standard

Default

Use the default phase banner with a tag to show the phase of your service.

Alpha This is a new service - your feedback will help us to improve it.

Show code

<div class="govuk-phase-banner">
  <p class="govuk-phase-banner__content">
    <strong class="govuk-tag govuk-phase-banner__content__tag">Alpha</strong>
    <span class="govuk-phase-banner__text">
      This is a new service - your <a href="#" class="govuk-link">feedback</a> will
      help us to improve it.
    </span>
  </p>
</div>

---
import PhaseBanner from "@i-dot-ai-npm/component-library-astro/phase-banner/phase-banner.astro";
// import PhaseBannerText from "@i-dot-ai-npm/component-library-astro/phase-banner/phase-banner-text.astro";
import Tag from "@i-dot-ai-npm/component-library-astro/tag/tag.astro";
---

<PhaseBanner>
  <Tag class="govuk-phase-banner__content__tag">Alpha</Tag>
  <!-- <PhaseBannerText> -->
  This is a new service - your <a href="#" class="govuk-link">feedback</a> will help
  us to improve it.
  <!-- </PhaseBannerText> -->
</PhaseBanner>

import PhaseBanner from "@i-dot-ai-npm/component-library-react/phase-banner/PhaseBanner";
// import PhaseBannerText from "@i-dot-ai-npm/component-library-react/phase-banner/PhaseBannerText";
import Tag from "@i-dot-ai-npm/component-library-react/tag/Tag";

export default function Example() {
  return (
    <PhaseBanner>
      <Tag className="govuk-phase-banner__content__tag">Alpha</Tag>
      {/* <PhaseBannerText> */}
      This is a new service - your <a href="#" className="govuk-link">feedback</a> will
      help us to improve it.
      {/* </PhaseBannerText> */}
    </PhaseBanner>
  );
}

<script>
  import PhaseBanner from "@i-dot-ai-npm/component-library-svelte/phase-banner/PhaseBanner.svelte";
  // import PhaseBannerText from "@i-dot-ai-npm/component-library-svelte/phase-banner/PhaseBannerText.svelte";
  import Tag from "@i-dot-ai-npm/component-library-svelte/tag/Tag.svelte";
</script>

<PhaseBanner>
  <Tag class="govuk-phase-banner__content__tag">Alpha</Tag>
  <!-- <PhaseBannerText> -->
  This is a new service - your <a href="#" class="govuk-link">feedback</a> will
  help us to improve it.
  <!-- </PhaseBannerText> -->
</PhaseBanner>

import PhaseBanner from "@i-dot-ai-npm/component-library-solid/phase-banner/PhaseBanner";
// import PhaseBannerText from "@i-dot-ai-npm/component-library-solid/phase-banner/PhaseBannerText";
import Tag from "@i-dot-ai-npm/component-library-solid/tag/Tag";

export default function Example() {
  return (
    <PhaseBanner>
      <Tag class="govuk-phase-banner__content__tag">Alpha</Tag>
      {/* <PhaseBannerText> */}
      This is a new service - your <a href="#" class="govuk-link">feedback</a> will
      help us to improve it.
      {/* </PhaseBannerText> */}
    </PhaseBanner>
  );
}

When to use this component

Services hosted on a service.gov.uk domain must use the phase banner until they pass a live assessment.