Components

Phase banner

Use the phase banner component to show users your service is still being worked on.

See the GOV.UK Design System documentation on the phase banner for more information on when to use this component.

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

<gv-phase-banner tag="Alpha">      
  This is a new service – your <a class="govuk-link" href="https://github.com/govuk-vue/govuk-vue/issues">feedback</a> will help us to improve it.
</gv-phase-banner>

Using the phase banner without a tag

You can omit the tag if it's not required for your service but you still want to provide a feedback link.

You can send us feedback to help us improve this service.

<gv-phase-banner>      
  You can <a class="govuk-link" href="https://github.com/govuk-vue/govuk-vue/issues">send us feedback</a> to help us improve this service.
</gv-phase-banner>

Props

Name	Type	Description
text	string	Text to use within the phase banner. If content is provided in the default slot, this prop will be ignored.
contentClass	string|array|object	Classes to add to the phase banner content <p> tag. You can bind a string, an array or an object, as with normal Vue class bindings.
tag	string	Text to use within the tag component. If content is provided in the tag slot, this prop will be ignored. You can bind a string, an array or an object, as with normal Vue class bindings.
tagClass	string|array|object	Classes to add to the tag.
tagColour	string	The colour of the tag. Allowed values: grey, green, turquoise, blue, purple, pink, red, orange, yellow.

Slots

Name	Description
tag	The content of the tag. If content is provided in this slot, the tag prop will be ignored.
default	The content of the phase banner. If content is provided in this slot, the text prop will be ignored.