Phase banner examples

• # default

  Open this example in a new tab

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

  {
    "tag": {
      "text": "Alpha"
    },
    "html": "This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it."
  }

  
  {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
  
  {{ govukPhaseBanner({
    "tag": {
      "text": "Alpha"
    },
    "html": "This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it."
  }) }}
          

• # classes

  Open this example in a new tab

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

  {
    "text": "This is a new service – your feedback will help us to improve it",
    "classes": "extra-class one-more-class"
  }

  
  {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
  
  {{ govukPhaseBanner({
    "text": "This is a new service – your feedback will help us to improve it",
    "classes": "extra-class one-more-class"
  }) }}
          

• # text

  Open this example in a new tab

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

  {
    "text": "This is a new service – your feedback will help us to improve it"
  }

  
  {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
  
  {{ govukPhaseBanner({
    "text": "This is a new service – your feedback will help us to improve it"
  }) }}
          

• # html as text

  Open this example in a new tab

  This is a new service - your <a href="#" class="govuk-link">feedback</a> will help us to improve it.

  {
    "text": "This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it."
  }

  
  {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
  
  {{ govukPhaseBanner({
    "text": "This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it."
  }) }}
          

• # attributes

  Open this example in a new tab

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

  {
    "text": "This is a new service – your feedback will help us to improve it",
    "attributes": {
      "first-attribute": "foo",
      "second-attribute": "bar"
    }
  }

  
  {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
  
  {{ govukPhaseBanner({
    "text": "This is a new service – your feedback will help us to improve it",
    "attributes": {
      "first-attribute": "foo",
      "second-attribute": "bar"
    }
  }) }}
          

• # tag html

  Open this example in a new tab

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

  {
    "text": "This is a new service – your feedback will help us to improve it",
    "tag": {
      "html": "<em>Alpha</em>"
    }
  }

  
  {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
  
  {{ govukPhaseBanner({
    "text": "This is a new service – your feedback will help us to improve it",
    "tag": {
      "html": "<em>Alpha</em>"
    }
  }) }}
          

• # tag classes

  Open this example in a new tab

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

  {
    "text": "This is a new service – your feedback will help us to improve it",
    "tag": {
      "classes": "govuk-tag--grey",
      "text": "Alpha"
    }
  }

  
  {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
  
  {{ govukPhaseBanner({
    "text": "This is a new service – your feedback will help us to improve it",
    "tag": {
      "classes": "govuk-tag--grey",
      "text": "Alpha"
    }
  }) }}