Styleguide

GOV.UK Elements

Repo • Page source

Layout

Halves

Isolate 

<div class="container">
  <div class="grid-row">
    <div class="column-half">
      <p>
        Content
      </p>
    </div>
    <div class="column-half">
      <p>
        Content
      </p>
    </div>
  </div>
</div>
div.container
div.grid-row
div.column-half
p Content
div.column-half
p Content

Thirds

Isolate 

<div class="container">
  <div class="grid-row">
    <div class="column-third">
      <p>
        Content
      </p>
    </div>
    <div class="column-third">
      <p>
        Content
      </p>
    </div>
    <div class="column-third">
      <p>
        Content
      </p>
    </div>
  </div>
  <div class="grid-row">
    <div class="column-two-thirds">
      <p>
        Content
      </p>
    </div>
    <div class="column-third">
      <p>
        Content
      </p>
    </div>
  </div>
</div>
div.container
div.grid-row
div.column-third
p Content
div.column-third
p Content
div.column-third
p Content
div.grid-row
div.column-two-thirds
p Content
div.column-third
p Content

Quarters

Isolate 

<div class="container">
  <div class="grid-row">
    <div class="column-quarter">
      <p>
        Content
      </p>
    </div>
    <div class="column-quarter">
      <p>
        Content
      </p>
    </div>
    <div class="column-quarter">
      <p>
        Content
      </p>
    </div>
    <div class="column-quarter">
      <p>
        Content
      </p>
    </div>
  </div>
</div>
div.container
div.grid-row
div.column-quarter
p Content
div.column-quarter
p Content
div.column-quarter
p Content
div.column-quarter
p Content

Typography

Headings

A 48px Bold heading

A 36px Bold heading

A 24px Bold heading

A 19px Bold heading

A 19px heading 

<h1>
  A 48px Bold heading
</h1>
<h3>
  A 36px Bold heading
</h3>
<h3>
  A 24px Bold heading
</h3>
<h4>
  A 19px Bold heading
</h4>
<h5>
  A 19px heading
</h5>
h1 A 48px Bold heading
h3 A 36px Bold heading
h3 A 24px Bold heading
h4 A 19px Bold heading
h5 A 19px heading

Lead paragraph

A 24px lead paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. 


<p class="lede">
  A 24px lead paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
  A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>
p.lede A 24px lead paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
p A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

Body copy

A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

A 16px supporting text paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. 


<p>
  A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
  <small>A 16px supporting text paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.</small>
</p>
p A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
p
small A 16px supporting text paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

Lists

List items start with a lowercase letter and have no full stop at the end.

  • here is a bulleted list
  • vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  • vestibulum id ligula porta felis euismod semper
  • integer posuere erat a ante venenatis dapibus posuere velit aliquet
  1. here is a numbered list
  2. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  3. vestibulum id ligula porta felis euismod semper
  4. integer posuere erat a ante venenatis dapibus posuere velit aliquet 

<ul>
  <li>
    here is a bulleted list
  </li>
  <li>
    vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  </li>
  <li>
    vestibulum id ligula porta felis euismod semper
  </li>
  <li>
    integer posuere erat a ante venenatis dapibus posuere velit aliquet
  </li>
</ul>
<ol>
  <li>
    here is a numbered list
  </li>
  <li>
    vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  </li>
  <li>
    vestibulum id ligula porta felis euismod semper
  </li>
  <li>
    integer posuere erat a ante venenatis dapibus posuere velit aliquet
  </li>
</ol>
ul
li here is a bulleted list
li vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
li vestibulum id ligula porta felis euismod semper
li integer posuere erat a ante venenatis dapibus posuere velit aliquet
ol
li here is a numbered list
li vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
li vestibulum id ligula porta felis euismod semper
li integer posuere erat a ante venenatis dapibus posuere velit aliquet

Inset text

Use bordered inset text to draw attention to important content on the page.

It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. 


<div class="panel-indent">
  <p>
    It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
  </p>
</div>
div.panel-indent
p It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.

Hidden text (progressive disclosure)

Use this to make your page easier to scan, only showing contextual information when required.

Click on "Help with nationality" to see how this works.

<details role="group"><summary aria-controls="details-content-0" aria-expanded="false" role="button" tabindex="0"><span class="summary">Help with nationality</span></summary>
  <div aria-hidden="true" class="panel-indent" id="details-content-0">
    <p>If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.</p>
    
    <p>We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>
    
  </div>
</details>
details role="group"
summary aria-controls="details-content-0" aria-expanded="false" role="button" tabindex="0"
span.summary Help with nationality
div#details-content-0.panel-indent aria-hidden="true"
p If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.
p We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

Data

Data is recommended as an alternative to using images.

Data visualisation

For screen readers, ensure the data value appears first so it makes sense when read aloud.

24
Ministerial departments
80px
16px 

<div class="grid-row">
  <div class="column-half">
    <div class="data">
      <div class="data-title">
        24
      </div>
      <div class="data-subtitle">
        Ministerial departments
      </div>
    </div>
  </div>
  <div class="column-half">
    <div class="data">
      <div class="data-title">
        80px
      </div>
      <div class="data-subtitle">
        16px
      </div>
    </div>
  </div>
</div>
div.grid-row
div.column-half
div.data
div.data-title 24
div.data-subtitle Ministerial departments
div.column-half
div.data
div.data-title 80px
div.data-subtitle 16px
56/154
on GOV.UK
48px
16px 

<div class="grid-row">
  <div class="column-half">
    <div class="data data-smaller">
      <div class="data-title">
        56/154
      </div>
      <div class="data-subtitle">
        on GOV.UK
      </div>
    </div>
  </div>
  <div class="column-half">
    <div class="data data-smaller">
      <div class="data-title">
        48px
      </div>
      <div class="data-subtitle">
        16px
      </div>
    </div>
  </div>
</div>
div.grid-row
div.column-half
div.data.data-smaller
div.data-title 56/154
div.data-subtitle on GOV.UK
div.column-half
div.data.data-smaller
div.data-title 48px
div.data-subtitle 16px

Data in a table

Consider putting content into tables to make it easier to scan.

  • when comparing rows of numbers, align numbers to the right in table cells
  • use tabular numbers to allow numbers of the same width to be more easily compared

Example of numeric table usage on GOV.UK

Date Paper form Digital
25 November to 1 December 2013 2,763 1,792
2 to 8 December 2013 2,850 1,740
9 to 15 December 2013 2,388 1,683 

<table>
  <thead>
    <tr>
      <th scope="col">
        Date
      </th>
      <th class="numeric" scope="col">
        Paper form
      </th>
      <th class="numeric" scope="col">
        Digital
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        25 November to 1 December 2013
      </td>
      <td class="numeric">
        2,763
      </td>
      <td class="numeric">
        1,792
      </td>
    </tr>
    <tr>
      <td>
        2 to 8 December 2013
      </td>
      <td class="numeric">
        2,850
      </td>
      <td class="numeric">
        1,740
      </td>
    </tr>
    <tr>
      <td>
        9 to 15 December 2013
      </td>
      <td class="numeric">
        2,388
      </td>
      <td class="numeric">
        1,683
      </td>
    </tr>
  </tbody>
</table>
table
thead
tr
th scope="col" Date
th.numeric scope="col" Paper form
th.numeric scope="col" Digital
tbody
tr
td 25 November to 1 December 2013
td.numeric 2,763
td.numeric 1,792
tr
td 2 to 8 December 2013
td.numeric 2,850
td.numeric 1,740
tr
td 9 to 15 December 2013
td.numeric 2,388
td.numeric 1,683

Not all content in tables should be right aligned.

Example of table usage on GOV.UK

Dates and amounts
First 6 weeks £109.80 per week
Next 33 weeks £109.80 per week
Total estimated pay £4,282.20
Tell the mother’s employer 28 days before they want to start maternity pay 

<table>
  <thead>
    <tr>
      <th colspan="2">
        Dates and amounts
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        First 6 weeks
      </td>
      <td>
        £109.80 per week
      </td>
    </tr>
    <tr>
      <td>
        Next 33 weeks
      </td>
      <td>
        £109.80 per week
      </td>
    </tr>
    <tr>
      <td>
        Total estimated pay
      </td>
      <td>
        £4,282.20
      </td>
    </tr>
    <tr>
      <td>
        Tell the mother’s employer
      </td>
      <td>
        28 days before they want to start maternity pay
      </td>
    </tr>
  </tbody>
</table>
table
thead
tr
th colspan="2" Dates and amounts
tbody
tr
td First 6 weeks
td £109.80 per week
tr
td Next 33 weeks
td £109.80 per week
tr
td Total estimated pay
td £4,282.20
tr
td Tell the mother’s employer
td 28 days before they want to start maternity pay

Headers

Global header

A Government Serice

<div class="global-header">
  <div class="container">
    <div class="skip-link">
      <a href="#content">Skip to main content</a>
    </div>
    <div class="header-branding">
      <a href="https://gov.uk" title="Go to the GOV.UK homepage" class="header-logo">
        <span>GOV.UK</span>
      </a>
    </div>
      <div class="header-proposition">
        <div class="proposition-name">A Government Serice</div>
      </div>
    <div class="header-bar"></div>
  </div>
</div>
div.global-header
div.container
div.skip-link
a href="#content" Skip to main content
div.header-branding
a.header-logo href="https://gov.uk" title="Go to the GOV.UK homepage"
span GOV.UK
div.header-proposition
div.proposition-name A Government Serice
div.header-bar

Global header with phase banner

A Government Serice
ALPHA This is a new service – your feedback will help us to improve it.
Isolate 

<div class="global-header">
  <div class="container">
    <div class="skip-link">
      <a href="#content">Skip to main content</a>
    </div>
    <div class="header-branding">
      <a href="https://gov.uk" title="Go to the GOV.UK homepage" class="header-logo">
        <span>GOV.UK</span>
      </a>
    </div>
      <div class="header-proposition">
        <div class="proposition-name">A Government Serice</div>
      </div>
    <div class="header-bar"></div>
  </div>
</div>

<div class="global-subheader container">
  <div class="subheader-item phase-banner">
      <span class="phase-tag phase-tag-alpha">
        ALPHA
      </span>
    <span class="phase-banner-message">
      This is a new service – your <a href="/feedback">feedback</a> will help us to improve it.
    </span>
  </div>
</div>
div.global-header
div.container
div.skip-link
a href="#content" Skip to main content
div.header-branding
a.header-logo href="https://gov.uk" title="Go to the GOV.UK homepage"
span GOV.UK
div.header-proposition
div.proposition-name A Government Serice
div.header-bar
div.global-subheader.container
div.subheader-item.phase-banner
span.phase-tag.phase-tag-alpha ALPHA
span.phase-banner-message This is a new service – your will help us to improve it.
a href="/feedback" feedback

Forms

Keep forms as simple as possible – only ask what's needed to run your service.

Optional and mandatory fields

  • only ask for the information you absolutely need
  • if you do ask for optional information, mark the labels of optional fields with '(optional)'
  • don't mark mandatory fields with asterisks

Labels

  • all form fields should be given labels
  • don't hide labels, unless the surrounding context makes them unnecessary
  • labels should be aligned above their fields
  • label text should be short, direct and in sentence case
  • avoid colons at the end of labels
  • labels should be associated with form fields using the for attribute

<div class="form-group">
  <label class="form-label" for="full-name-1">Full name</label><input class="form-control" id="full-name-1" type="text" />
</div>
div.form-group
label.form-label for="full-name-1" Full name
input#full-name-1.form-control type="text"

Form fields

Make field widths proportional to the input they take.

Ensure that users can enter the information they need at smaller screen sizes.

Snap form fields to 100% width at smaller screen sizes.

Fieldsets and legends

Use fieldsets to group related form controls. The first element inside a fieldset must be a legend element which describes the group.

Form focus states

All elements use the yellow focus style as a highlight, as either a fill or 3px outline.

Click on the label "Full name" or inside the form field to show the focus state.


<div class="form-group">
  <label class="form-label" for="full-name-2">Full name</label><input class="form-control" id="full-name-2" type="text" />
</div>
div.form-group
label.form-label for="full-name-2" Full name
input#full-name-2.form-control type="text"

Spacing between form elements

Ensure there is sufficient spacing between form elements. 


<div class="form-group">
  <label class="form-label" for="first-name">First name</label><input class="form-control" id="first-name" type="text" />
</div>
<div class="form-group">
  <label class="form-label" for="last-name">Last name</label><input class="form-control" id="last-name" type="text" />
</div>
div.form-group
label.form-label for="first-name" First name
input#first-name.form-control type="text"
div.form-group
label.form-label for="last-name" Last name
input#last-name.form-control type="text"

Hint text

  • don't use placeholder text in form fields, as this will disappear once content is entered into the form field
  • use hint text for supporting contextual help, this will always be shown
  • hint text should sit above a form field
  • ensure hint text can be read correctly by screen readers
It'll be on your last payslip. For example, JH 21 90 0A. 

<div class="form-group">
  <label class="form-label" for="ni-number">National Insurance number</label>
  <div class="form-hint">
    It'll be on your last payslip. For example, JH 21 90 0A.
  </div>
  <input class="form-control" id="ni-number-2" type="text" />
</div>
div.form-group
label.form-label for="ni-number" National Insurance number
div.form-hint It'll be on your last payslip. For example, JH 21 90 0A.
input#ni-number-2.form-control type="text"

Radio buttons

  • use these to let users choose a single option from a list
  • for more than two options, radio buttons should be stacked
  • radio buttons with large hit areas are easier to select with a mouse or touch devices
Isolate 

<div class="form-group inline">
  <label class="block-label" for="radio-inline-1"><input id="radio-inline-1" name="radio-inline-group" type="radio" value="Yes">Yes</input></label><label class="block-label" for="radio-inline-2"><input id="radio-inline-2" name="radio-inline-group" type="radio" value="No">No</input></label>
</div>
div.form-group.inline
label.block-label for="radio-inline-1" Yes
input#radio-inline-1 name="radio-inline-group" type="radio" value="Yes"
label.block-label for="radio-inline-2" No
input#radio-inline-2 name="radio-inline-group" type="radio" value="No"

or

Isolate 
<label class="block-label selected" for="radio-1"><input id="radio-1" name="radio-group" type="radio" value="ni">Northern Ireland</input></label><label class="block-label" for="radio-2"><input id="radio-2" name="radio-group" type="radio" value="isle-of-man-channel">Isle of Man or the Channel Islands</input></label>
<p class="form-block">
  or
</p>
<label class="block-label" for="radio-3"><input id="radio-3" name="radio-group" type="radio" value="british-abroad">I am a British citizen living abroad</input></label>
label.block-label.selected for="radio-1" Northern Ireland
input#radio-1 name="radio-group" type="radio" value="ni"
label.block-label for="radio-2" Isle of Man or the Channel Islands
input#radio-2 name="radio-group" type="radio" value="isle-of-man-channel"
p.form-block or
label.block-label for="radio-3" I am a British citizen living abroad
input#radio-3 name="radio-group" type="radio" value="british-abroad"

Checkboxes

  • use these to select either on/off toggles or multiple selections
  • make it clear with words when users can select one or multiple options
Which types of waste do you transport regularly?

Select all that apply

Isolate 

<fieldset>
  <legend class="form-label-bold">Which types of waste do you transport regularly?</legend>
  <p>
    Select all that apply
  </p>
  <label class="block-label selected" for="checkbox-1"><input id="checkbox-1" type="checkbox" value="animals">Waste from animal carcasses</input></label><label class="block-label" for="checkbox-2"><input id="checkbox-2" type="checkbox" value="mines">Waste from mines or quarries</input></label><label class="block-label" for="checkbox-3"><input id="checkbox-3" type="checkbox" value="agriculture">Farm or agricultural waste</input></label>
</fieldset>
fieldset
legend.form-label-bold Which types of waste do you transport regularly?
p Select all that apply
label.block-label.selected for="checkbox-1" Waste from animal carcasses
input#checkbox-1 type="checkbox" value="animals"
label.block-label for="checkbox-2" Waste from mines or quarries
input#checkbox-2 type="checkbox" value="mines"
label.block-label for="checkbox-3" Farm or agricultural waste
input#checkbox-3 type="checkbox" value="agriculture"

Large hit areas aren't always appropriate.

Isolate 

<div class="form-group">
  <label class="form-label" for="phone-number">Enter your telephone number</label><input class="form-control" id="phone-number" type="text" /><label class="form-checkbox" for="phone-number-checkbox"><input id="phone-number-checkbox" type="checkbox" value="1">I need to be contacted using a text phone</input></label>
</div>
div.form-group
label.form-label for="phone-number" Enter your telephone number
input#phone-number.form-control type="text"
label.form-checkbox for="phone-number-checkbox" I need to be contacted using a text phone
input#phone-number-checkbox type="checkbox" value="1"

Inset form elements

Insets can be used within forms to emphasise supporting information.

Click on "Yes" to see how this works.

Do you know their National Insurance number?
Isolate 

<fieldset>
  <legend>Do you know their National Insurance number?</legend>
  <div class="form-group inline">
    <label class="block-label" for="radio-inline-11"><input id="radio-inline-11" name="radio-inline-group" type="radio" value="Yes">Yes</input></label><label class="block-label" for="radio-inline-12"><input id="radio-inline-12" name="radio-inline-group" type="radio" value="No">No</input></label>
  </div>
  <div class="panel-indent" data-control-value="Yes" data-controlled-by="radio-inline-group">
    <label class="form-label" for="ni-number-2">National Insurance number</label><input class="form-control" id="ni-number-2" type="text" />
  </div>
</fieldset>
fieldset
legend Do you know their National Insurance number?
div.form-group.inline
label.block-label for="radio-inline-11" Yes
input#radio-inline-11 name="radio-inline-group" type="radio" value="Yes"
label.block-label for="radio-inline-12" No
input#radio-inline-12 name="radio-inline-group" type="radio" value="No"
div.panel-indent data-control-value="Yes" data-controlled-by="radio-inline-group"
label.form-label for="ni-number-2" National Insurance number
input#ni-number-2.form-control type="text"

Click on "Citizen of a different country" to see how this works.

What is your nationality?

Select all options that are relevant to you.

Isolate 

<fieldset>
  <legend class="form-label-bold">What is your nationality?</legend>
  <p>
    Select all options that are relevant to you.
  </p>
  <div class="form-group">
    <label class="block-label selected" for="inset-checkbox-1"><input id="inset-checkbox-1" name="inset-checkbox" type="checkbox" value="british">British (including English, Scottish, Welsh and Northern Irish)</input></label><label class="block-label" for="inset-checkbox-2"><input id="inset-checkbox-2" name="inset-checkbox" type="checkbox" value="irish">Irish</input></label><label class="block-label" for="inset-checkbox-3"><input id="inset-checkbox-3" name="inset-checkbox" type="checkbox" value="different">Citizen of a different country</input></label>
  </div>
  <div class="panel-indent" data-control-value="different" data-controlled-by="inset-checkbox">
    <label class="form-label" for="ni-country-name-1">Country name</label><input class="form-control" id="ni-number-2" name="country-name" type="text" />
  </div>
</fieldset>
fieldset
legend.form-label-bold What is your nationality?
p Select all options that are relevant to you.
div.form-group
label.block-label.selected for="inset-checkbox-1" British (including English, Scottish, Welsh and Northern Irish)
input#inset-checkbox-1 name="inset-checkbox" type="checkbox" value="british"
label.block-label for="inset-checkbox-2" Irish
input#inset-checkbox-2 name="inset-checkbox" type="checkbox" value="irish"
label.block-label for="inset-checkbox-3" Citizen of a different country
input#inset-checkbox-3 name="inset-checkbox" type="checkbox" value="different"
div.panel-indent data-control-value="different" data-controlled-by="inset-checkbox"
label.form-label for="ni-country-name-1" Country name
input#ni-number-2.form-control name="country-name" type="text"

Buttons

Use buttons to move though a transaction, aim to use only one button per page.

Button text

Button text should be short and describe the action the button performs.

<button class="button">Save and continue</button><button class="button button-secondary">Save and continue</button>
button.button Save and continue
button.button.button-secondary Save and continue

Launch your service with a Start now button. 


<button class="button button-get-started">Start now</button>
button.button.button-get-started Start now

Align the primary action button to the left edge of your form, in the user's line of sight.

Back 


<div class="form-group">
  <label class="form-label" for="email-address-1">Email address</label><input class="form-control" id="email-address-1" type="email" />
</div>
<div class="form-group">
  <p>
    <button class="button">Save and continue</button>
  </p>
  <p>
    <a href="#back">Back</a>
  </p>
</div>
div.form-group
label.form-label for="email-address-1" Email address
input#email-address-1.form-control type="email"
div.form-group
p
button.button Save and continue
p
a href="#back" Back

Disabled buttons

Disabled buttons should be set at 50% opacity.

<button class="button" disabled="">Primary button</button><button class="button button-secondary" disabled="">Secondary button</button>
button.button disabled="" Primary button
button.button.button-secondary disabled="" Secondary button

Errors and validation

Summarise validation errors in a box at the top of your page. Use jump links in the summary box to reach the errors in the form.

Ensure error messages make sense when read by screen readers.

Form validation

use a red border on the box to visually connect the errors and messages in the form apply the same colour to the area of the form where an error has occurred error copy should be specific to the question and validation should identify all errors errors should not cause pre-filled fields to clear

Alpha and beta banners

You have to use an alpha banner if your thing is in alpha, and a beta banner if it’s in beta.

Things on the service.gov.uk subdomain

If your service is in beta or alpha, you must show the relevant banner in the header. It should sit directly underneath the black GOV.UK header and colour bar.

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

<div class="global-subheader container">
  <div class="subheader-item phase-banner">
      <span class="phase-tag phase-tag-alpha">
        ALPHA
      </span>
    <span class="phase-banner-message">
      This is a new service – your <a href="/feedback">feedback</a> will help us to improve it.
    </span>
  </div>
</div>
div.global-subheader.container
div.subheader-item.phase-banner
span.phase-tag.phase-tag-alpha ALPHA
span.phase-banner-message This is a new service – your will help us to improve it.
a href="/feedback" feedback
BETA This is a new service – your feedback will help us to improve it. 

<div class="global-subheader container">
  <div class="subheader-item phase-banner">
      <span class="phase-tag phase-tag-beta">
        BETA
      </span>
    <span class="phase-banner-message">
      This is a new service – your <a href="/feedback">feedback</a> will help us to improve it.
    </span>
  </div>
</div>
div.global-subheader.container
div.subheader-item.phase-banner
span.phase-tag.phase-tag-beta BETA
span.phase-banner-message This is a new service – your will help us to improve it.
a href="/feedback" feedback

Things on GOV.UK

If your GOV.UK content is in beta or alpha, show the relevant banner below the page title, but above the body content. You can see what they should look like in this blog post.