Kitchen sink

All GOV.UK Design System component examples on one page

Accordion

open

# default

Section A

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.

Section B

• Example item 2

# with additional descriptions

Test

Additional description

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.

• Example item 1

Test 2

Additional description (wrapped in span)

• Example item 2

# with long content and description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor.

Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem.

• Example item 1

Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum.

Maecenas nec est sapien. Etiam varius luctus mauris non porttitor.

• Example item 2

# with all sections already open

Section A

• Example item 1

Section B

• Example item 2

# classes

Section A

Some content

# attributes

Section A

Some content

# custom heading level

Section A

Some content

# heading html

Section A

Some content

# with falsy values

Section A

Some content

Section B

Some content

# with remember expanded off

Section A

Some content

# with focusable elements inside

Section A

Link A

Section B

Link B

# with one section open

Section A

• Example item 1

Section B

• Example item 2

# with translations

Section A

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.

Section B

• Example item 2

---

Back link

open

# default

# inverse

# classes

# html as text

# html

# with custom text and link

# attributes

---

Breadcrumbs

open

# default

# with one level

# without the home section

# with last breadcrumb as current page

# with collapse on mobile

# inverse

# classes

# attributes

# item attributes

# html as text

# html

# custom label

---

Button

open

# default

# disabled

# link

# start

# input

# secondary

# warning

# inverse

# attributes

# link attributes

# input attributes

# classes

# link classes

# input classes

# name

# type

# input type

# explicit link

# no href

# value

# html

# no type

# no data-prevent-double-click

# don't prevent double click

# id

# start link

# input disabled

# prevent double click

---

Character count

open

# default

You can enter up to 10 characters

# with hint

Don't include personal or financial information, eg your National Insurance number or credit card details.

You can enter up to 10 characters

# with hint and error

Don't include personal or financial information, eg your National Insurance number or credit card details.

Please provide more detail

You can enter up to 10 characters

# with default value

221B Baker Street London NW1 6XE

You can enter up to 100 characters

# with default value exceeding limit

Please do not exceed the maximum allowed limit

221B Baker Street London NW1 6XE

You can enter up to 10 characters

# with custom rows

You can enter up to 10 characters

# with label as page heading

You can enter up to 10 characters

# with word count

You can enter up to 10 words

# with threshold

You can enter up to 10 characters

# with custom textarea description

Gallwch ddefnyddio hyd at 10 nod

# classes

You can enter up to 10 characters

# id

You can enter up to 10 characters

# attributes

You can enter up to 10 characters

# formGroup with classes

You can enter up to 10 characters

# custom classes on countMessage

You can enter up to 10 characters

# spellcheck enabled

You can enter up to 10 characters

# spellcheck disabled

You can enter up to 10 characters

# custom classes with error message

Error message

You can enter up to 10 characters

# with id starting with number

You can enter up to 10 characters

# with id with special characters

You can enter up to 10 characters

# with textarea maxlength attribute

You can enter up to 10 characters

# to configure in JavaScript

# when neither maxlength nor maxwords are set

# when neither maxlength/maxwords nor textarea description are set

# with translations

You can enter up to 10 characters

---

Checkboxes

open

# default

What is your nationality?

# with hint

What is your nationality?

Select all that apply

# with pre-checked values

How do you want to be contacted?

# with divider and None

Which types of waste do you transport regularly?

or

# with divider, None and conditional items

Do you have any access needs?

or

# with hints on items

How do you want to sign in?

You'll have a user ID if you've registered for Self Assessment or filed a tax return online before.

You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.

# with legend as a page heading

Which types of waste do you transport regularly?

Select all that apply

# with error message

Which types of waste do you transport regularly?

Please select an option

Nullam id dolor id nibh ultricies vehicula ut id elit.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Nullam id dolor id nibh ultricies vehicula ut id elit.

# with very long option text

Maecenas faucibus mollis interdum?

Nullam id dolor id nibh ultricies vehicula ut id elit.

# with conditional items

How do you want to be contacted?

# with optional form-group classes showing group error

How do you want to be contacted?

Problem with input

# small

Filter by

# small with long text

Filter by

# small with error

Filter by

Select a thing

# small with hint

Filter by

hint for a thing

# small with conditional reveal

How do you want to be contacted?

# small with divider and None

Which types of waste do you transport regularly?

or

# with id and name

What is your nationality?

If you have dual nationality, select all options that are relevant to you.

# with disabled item

How do you want to sign in?

You'll have a user ID if you've registered for Self Assessment or filed a tax return online before.

You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.

# with idPrefix

# with falsy values

# classes

# with fieldset describedBy

Which option?

If you have dual nationality, select all options that are relevant to you.

# attributes

# with checked item

# items with attributes

# empty conditional

# with label classes

# multiple hints

If you have dual nationality, select all options that are relevant to you.

Hint for british option here

Hint for other option here

# with conditional items with special characters

How do you want to be contacted?

# with error message and hint

What is your nationality?

If you have dual nationality, select all options that are relevant to you.

Please select an option

# with error, hint and fieldset describedBy

What is your nationality?

If you have dual nationality, select all options that are relevant to you.

Please select an option

# label with attributes

# fieldset params

What is your nationality?

Please select an option

# fieldset html params

What is your nationality?

# with single option set 'aria-describedby' on input, and describedBy

Please accept the terms and conditions

# with single option (and hint) set 'aria-describedby' on input, and describedBy

Please accept the terms and conditions

Go on, you know you want to!

# with error and idPrefix

Please select an option

# with error message and fieldset describedBy

What is your nationality?

Please select an option

# with conditional item checked

How do you want to be contacted?

# item checked overrides values

# textarea in conditional

Test

test

---

Cookie banner

open

# default

Cookies on this government service

We use analytics cookies to help understand how users use our service.

View cookie preferences

# accepted confirmation banner

Your cookie preferences have been saved. You have accepted cookies.

# rejected confirmation banner

Your cookie preferences have been saved. You have rejected cookies.

# with html

Cookies on my service

We use cookies in our service.

We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.

View cookie preferences

# heading html

Cookies on my service

# heading html as text

Cookies on <span>my service</span>

# html

We use cookies in our service.

# classes

# attributes

# custom aria label

We use cookies on GOV.UK

# hidden

# hidden false

# default action

# link

This is a link

# link with false button options

This is a link

# link as a button

# type

# button classes

# button attributes

# link classes

Link with custom classes

# link attributes

Link with attributes

# client-side implementation

Cookies on this service

We use cookies to help understand how users use our service.

View cookie preferences

# full banner hidden

# rebrand

Cookies on this government service

We use analytics cookies to help understand how users use our service.

View cookie preferences

---

Date input

open

# default

What is your date of birth?

For example, 31 3 1980

# day and month

What is your birthday?

For example, 5 12

# month and year

When did you move to this property?

For example, 3 1980

# with errors only

What is your date of birth?

Error message goes here

# with errors and hint

What is your date of birth?

For example, 31 3 1980

Error message goes here

# with error on day input

What is your date of birth?

For example, 31 3 1980

Error message goes here

# with error on month input

What is your date of birth?

For example, 31 3 1980

Error message goes here

# with error on year input

What is your date of birth?

For example, 31 3 1980

Error message goes here

# classes

# attributes

# with items

What is your date of birth?

For example, 31 3 1980

# with empty items

# custom pattern

# custom inputmode

# with nested name

# with id on items

# suffixed id

# with values

# with hint and describedBy

What is your date of birth?

For example, 31 3 1980

# with error and describedBy

What is your date of birth?

Error message goes here

# fieldset html

What is your date of birth?

# items with classes

# items without classes

# with optional form-group classes

What is your date of birth?

For example, 31 3 1980

# with autocomplete values

What is your date of birth?

For example, 31 3 1980

# with input attributes

What is your date of birth?

For example, 31 3 1980

---

Details

open

# default

Help with nationality

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.

# expanded

Help with nationality

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.

# id

Expand this section

Here are some more details

# html as text

Expand this section

More about the greater than symbol (>)

# html

Expand this section

More about bold text

# summary html as text

The greater than symbol (>) is the best

Here are some more details

# summary html

Use bold text sparingly

Here are some more details

# classes

Expand me

Here are some more details

# attributes

Expand me

Here are some more details

# with html

Where to find your National Insurance Number

Your National Insurance number can be found on

• your National Insurance card
• your payslip
• P60
• benefits information
• tax return

---

Error message

open

# default

Error message about full name goes here

# translated

Neges gwall am yr enw llawn yn mynd yma

# id

This is an error message

# classes

This is an error message

# html as text

Unexpected > in body

# html

Unexpected bold text in body copy

# attributes

This is an error message

# with visually hidden text

Rhowch eich enw llawn

# visually hidden text removed

There is an error on line 42

---

Error summary

open

# default

There is a problem

# without links

There is a problem

• Invalid username or password

# mixed with and without links

There is a problem

• Invalid username or password
• Agree to the terms of service to log in

# with description only

There is a problem

The file couldn't be loaded. Try again later.

# with everything

There is a problem

Please fix the errors below.

• Invalid username or password
• Agree to the terms of service to log in

# html as titleText

Alert, <em>alert</em>

• Invalid username or password

# title html

Alert, alert

• Invalid username or password

# description

There is a problem

Lorem ipsum

• Invalid username or password

# html as descriptionText

There is a problem

See errors below (>)

• Invalid username or password

# description html

There is a problem

See errors below

• Invalid username or password

# classes

There is a problem

• Invalid username or password

# attributes

There is a problem

• Invalid username or password

# error list with attributes

There is a problem

# error list with html as text

There is a problem

• Descriptive link to the <b>question</b> with an error

# error list with html

There is a problem

• The date your passport was issued must be in the past

# error list with html link

There is a problem

# error list with html as text link

There is a problem

# autofocus disabled

There is a problem

# autofocus explicitly enabled

There is a problem

---

Exit this page

open

# default

# testing

# testing-html

# translated

---

Fieldset

open

# default

What is your address?

# styled as xl text

What is your address?

# styled as large text

What is your address?

# styled as medium text

What is your address?

# styled as small text

What is your address?

# as page heading xl

What is your address?

# as page heading l

What is your address?

# as page heading m

What is your address?

# as page heading s

What is your address?

# as page heading without class

What is your address?

# html fieldset content

What is your address?

This is some content to put inside the fieldset

# with describedBy

Which option?

# html as text

What is <b>your</b> address?

# html

What is your address?

# legend classes

What is your address?

# classes

Which option?

# role

Which option?

# attributes

Which option?

---

File upload

open

# default

# with hint text

Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.

# with error message and hint

Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.

Error message goes here

# with label as page heading

# enhanced

# enhanced, with error message and hint

Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.

Error message goes here

# enhanced, multiple files

# with value

# attributes

# classes

# id

# with describedBy

# with hint and describedBy

Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.

# error

Error message

# with error and describedBy

Error message

# with error, describedBy and hint

hint

Error message

# translated, no javascript enhancement

# allows multiple files

# disabled

# with optional form-group classes

# translated

---

Footer

open

# default

# with custom HTML content licence and copyright notice

# with custom text content licence and copyright notice

# with custom meta

# with meta links and meta content

# with default width navigation (one column)

# with default width navigation (two columns)

# with navigation

# Full GDS example

# Three equal columns

# attributes

# classes

# with container classes

# with HTML passed as text content

# with empty meta

# with empty meta items

# with meta

# meta html as text

# with meta html

# with meta item attributes

# with empty navigation

# with navigation item attributes

# rebrand

---

Header

open

# default

# with service name

Service Name

# with service name but no service url

Service Name

# with navigation

# with custom menu button text

# with service name and navigation

Service Name

# with large navigation

# with product name

Product Name

# full width

# full width with navigation

# with full width border

# navigation item with html

# navigation item with text without link

# with St. Edward's Crown

# attributes

# classes

# custom homepage url

# with custom navigation label

# navigation item with attributes

# navigation item with html as text

Service Name

# navigation item with html without link

Service Name

# with custom menu button label

# with custom navigation label and custom menu button text

# empty navigation array

# rebrand

# with service name and navigation and rebrand

Service Name

# with product name and rebrand

Product Name

---

Hint

open

# default

It's on your National Insurance card, benefit letter, payslip or P60. For example, 'QQ 12 34 56 C'.

# with html

It's on your National Insurance card, benefit letter, payslip or P60. For example, 'QQ 12 34 56 C'.

# classes

It's on your National Insurance card, benefit letter, payslip or P60.

# id

It's on your National Insurance card, benefit letter, payslip or P60.

# html as text

Unexpected <strong>bold text</strong> in body

# attributes

It's on your National Insurance card, benefit letter, payslip or P60.

---

Input

open

# default

# with hint text

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

# with error message

Enter a National Insurance number in the correct format

# with error and hint

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

Enter a National Insurance number in the correct format

# with width-2 class

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

# with width-3 class

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

# with width-4 class

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

# with width-5 class

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

# with width-10 class

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

# with width-20 class

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

# with width-30 class

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

# with label as page heading

# with prefix

£

# with suffix

kg

# with prefix and suffix

£

per item

# with prefix and suffix and error

Error message goes here

£

per item

# with prefix and suffix and width modifier

£

per item

# with extra letter spacing

# classes

# id

# custom type

# value

# zero value

# with describedBy

# attributes

# hint with describedBy

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

# error with describedBy

Error message

# with error, hint and describedBy

Hint

Error message

# inputmode

# with prefix with html as text

<span>£</span>

# with prefix with html

£

# with prefix with classes

£

# with prefix with attributes

£

# with suffix with html as text

<span>kg</span>

# with suffix with html

kg

# with suffix with classes

kg

# with suffix with attributes

kg

# with customised input wrapper

£

per item

# with optional form-group classes

# with autocomplete attribute

# with pattern attribute

# with spellcheck enabled

# with spellcheck disabled

# with autocapitalize turned off

# disabled

---

Inset text

open

# default

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

# with html

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

Warning You can be fined up to £5,000 if you don’t register.

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

# classes

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

# id

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

# html as text

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

# attributes

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

---

Label

open

# default

# with bold text

# styled as xl text

# styled as large text

# styled as medium text

# styled as small text

# as page heading xl

# as page heading l

# as page heading m

# as page heading s

# as page heading without class

# empty

# classes

# html as text

# html

# for

# attributes

---

Notification banner

open

# default

Important

This publication was withdrawn on 7 March 2014.

# with text as html

Important

This publication was withdrawn on 7 March 2014

The following 4 files are available

# with type as success

Success

Email sent to example@email.com

# with long heading

Important

This publication was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters.

# with lots of content

Important

Check if you need to apply the reverse charge to this application

You will have to apply the reverse charge if the applicant supplies any of these services:

• constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services
• constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours

# custom title

Important information

This publication was withdrawn on 7 March 2014.

# title as html

Important information

This publication was withdrawn on 7 March 2014.

# title html as text

<span>Important information</span>

This publication was withdrawn on 7 March 2014.

# custom title heading level

Important

This publication was withdrawn on 7 March 2014.

# custom title id

Important

This publication was withdrawn on 7 March 2014.

# custom title id with type as success

Success

Email sent to example@email.com

# custom text

Important

This publication was withdrawn on 7 March 2014.

# html as text

Important

<span>This publication was withdrawn on 7 March 2014.</span>

# custom role

Important

This publication was withdrawn on 7 March 2014.

# classes

Important

This publication was withdrawn on 7 March 2014.

# attributes

Important

This publication was withdrawn on 7 March 2014.

# with invalid type

Important

This publication was withdrawn on 7 March 2014.

# auto-focus disabled, with type as success

Success

Email sent to example@email.com

# auto-focus explicitly enabled, with type as success

Success

Email sent to example@email.com

# role=alert overridden to role=region, with type as success

Success

Email sent to example@email.com

# custom tabindex

Success

Email sent to example@email.com

---

Pagination

open

# default

# with custom link and item text

# with many pages

# first page

# last page

# with prev and next only

# with prev and next only and labels

# with prev and next only and very long labels

# with previous only

# with next only

# with custom classes

# with custom attributes

# with custom navigation landmark

# with custom accessible labels on item links

---

Panel

open

# default

Application complete

Your reference number: HDJ2123F

# title html as text

Application <strong>not</strong> complete

Please complete form 1

# title html

Application not complete

Please complete form 1

# body html as text

Application complete

Your reference number<br><strong>HDJ2123F</strong>

# body html

Application complete

Your reference number
HDJ2123F

# classes

Application complete

Your reference number is HDJ2123F

# attributes

Application complete

Your reference number is HDJ2123F

# title with no body text

Application complete

# custom heading level

Application complete

Your reference number: HDJ2123F

---

Password input

open

# default

# with hint text

It probably has some letters, numbers and maybe even some symbols in it.

# with error message

It probably has some letters, numbers and maybe even some symbols in it.

Error message goes here

# with label as page heading

# with input width class

# classes

# id

# value

# attributes

# with describedBy

# with new-password autocomplete

# with translations

---

Phase banner

open

# default

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

# classes

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

# html as text

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

# attributes

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

# tag html

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

# tag classes

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

---

Radios

open

# default

Have you changed your name?

# with hint

Have you changed your name?

This includes changing your last name or spelling your name differently.

# inline

Have you changed your name?

This includes changing your last name or spelling your name differently.

# with legend as page heading

Which part of the Housing Act was your licence issued under?

Select one of the options below.

# with a divider

How do you want to sign in?

or

# with hints on items

How do you want to sign in?

You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.

You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.

# without fieldset

# with fieldset and error message

Have you changed your name?

Please select an option

# with very long option text

Maecenas faucibus mollis interdum?

Nullam id dolor id nibh ultricies vehicula ut id elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

# with conditional items

How do you want to be contacted?

# with conditional item checked

How do you want to be contacted?

# with optional form-group classes showing group error

How do you want to be contacted?

Problem with input

# small

How do you want to be contacted?

# small with long text

Venenatis Condimentum

# small with error

How do you want to be contacted?

Select a thing

# small with hint

How do you want to be contacted?

Hint for email address

# small with conditional reveal

How do you want to be contacted?

# small inline

Sort by

# small with a divider

How do you want to sign in?

or

# with idPrefix

# minimal items and name

# with falsy items

# fieldset with describedBy

Which option?

# attributes

# items with attributes

# with empty conditional

# label with classes

# with hints on parent and items

Have you changed your name?

This includes changing your last name or spelling your name differently.

Hint for yes option here

Hint for no option here

# with describedBy and hint

Have you changed your name?

This includes changing your last name or spelling your name differently.

# with error message

Please select an option

# with error message and idPrefix

Please select an option

# with hint and error message

Have you changed your name?

This includes changing your last name or spelling your name differently.

Please select an option

# with hint, error message and describedBy

Have you changed your name?

This includes changing your last name or spelling your name differently.

Please select an option

# label with attributes

# fieldset params

Have you changed your name?

This includes changing your last name or spelling your name differently.

# fieldset with html

Have you changed your name?

# with fieldset, error message and describedBy

Have you changed your name?

Please select an option

# item checked overrides value

# textarea in conditional

Test

test

# with disabled

How do you want to sign in?

You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.

You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.

# prechecked using value

# with conditional items with special characters

How do you want to be contacted?

# with conditional items and pre-checked value

How do you want to be contacted?

---

Select

open

# default

# with hint text and error message

Hint text goes here

Error message goes here

# with label as page heading

# with full width override

# with describedBy

# attributes

# attributes on items

# with falsy items

# hint

Hint text goes here

# hint and describedBy

Hint text goes here

# error

Error message

# error and describedBy

Error message

# without values

# without values with selected value

# with falsy values

# item selected overrides value

# id

# with selected value

# with optional form-group classes

---

Service navigation

open

# default

# with navigation with a current item

# with large navigation

# with HTML navigation items

# with non-link navigation items

# with service name

Service name

# with service link

Service name

# with long service name

Apply to receive a rare holofoil Charizard Pokémon card from the King

# with service name and navigation

Apply for a juggling license

# inverse

Apply for a juggling license

# with collapseNavigationOnMobile set to false

Apply for a juggling license

# with a single navigation item

Apply for a juggling license

# with a single navigation item and collapseNavigationOnMobile set to true

Apply for a juggling license

# with no options set

# attributes

Service name

# classes

Service name

# with custom aria-label

Service name

# with custom navigation toggle text

# with custom navigation toggle label

# with identical navigation toggle text and label

# with custom navigation label

# with custom navigation toggle text and navigation label

# with custom navigation classes

# with custom navigation ID

# with navigation having empty values

# with navigation having only empty values

# with navigation being an empty array

# with navigation with an active item

# with slotted content

[start]

[end]

# rebrand

---

Skip link

open

# default

Skip to main content

# with focus

Skip to main content

# no href

# custom href

Skip to custom content

# custom text

# html as text

# html

# classes

# attributes

---

Summary list

open

# default

• Name: Firstname Lastname
• Date of birth: 13/08/1980
• Contact information:

  email@email.com

  Address line 1; Address line 2; Address line 3; Address line 4; Address line 5

# with actions

• Name: Firstname Lastname
• Date of birth: 13/08/1980
• Date of birth: Change
• Contact information:

  email@email.com

  Address line 1; Address line 2; Address line 3; Address line 4; Address line 5

# no-border

• Name: Firstname Lastname
• Date of birth: 13/08/1980
• Contact information:

  email@email.com

  Address line 1; Address line 2; Address line 3; Address line 4; Address line 5

# no-border on last row

• Name: Firstname Lastname
• Date of birth: 13/08/1980
• Contact information:

  email@email.com

  Address line 1; Address line 2; Address line 3; Address line 4; Address line 5

# extreme

• Name: Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky
• Long website address: https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
• Long website address: Change
• Long email address: webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com
• Long email address: Change
• No wrapping allowed:

  michelle.longish.name@example.com

• No wrapping allowed: Change
• Pneumonoultramicroscopicsilicovolcanoconiosis:

  Pneumonoultramicroscopicsilicovolcanoconiosis is a word coined by the president of the National Puzzlers’ League as a synonym for the disease known as silicosis. It is the longest word in the English language published in a dictionary, the Oxford English Dictionary, which defines it as "an artificial long word said to mean a lung disease caused by inhaling very fine ash and sand dust."

  Silicosis is a form of occupational lung disease caused by inhalation of crystalline silica dust, and is marked by inflammation and scarring in the form of nodular lesions in the upper lobes of the lungs. It is a type of pneumoconiosis.

• Its vanished trees, the trees that had made way for Gatsby’s house, Pneumonoultramicroscopicsilicovolcanoconiosis had once pandered in whispers to the last and greatest of all human dreams; for a transitory enchanted moment man must have held his breath in the presence of this continent, compelled into an aesthetic contemplation he neither understood nor desired, face to face for the last time in history with something commensurate to his capacity for wonder.: The Great Gatsby

# as a summary card with a text header

Undergraduate teaching assistant

• Name: Firstname Lastname
• Date of birth: 13/08/1980

# as a summary card with a html header

Undergraduate teaching assistant

• Name: Firstname Lastname
• Date of birth: 13/08/1980

# as a summary card with actions

• Name: Firstname Lastname
• Date of birth: 13/08/1980

# as a summary card with actions plus summary list actions

• Name: Firstname Lastname
• Date of birth: 13/08/1980
• Date of birth: Change

# as a summary card extreme

• Name: Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky
• Long website address: https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
• Long website address: Change

# attributes

• Name: Firstname Lastname

# with falsy values

• Name: Firstname Lastname
• Name 2: Firstname2 Lastname2

# key with html

• Name: Firstname Lastname

# key with classes

• Name: Firstname Lastname

# value with html

• Name: email@email.com

# actions href

• Name: Firstname Lastname
• Name: Go to GOV.UK

# actions with html

• Name: Firstname Lastname
• Name: Edit

# actions with classes

• Name: Firstname Lastname
• Name: Edit

# actions with attributes

• Name: Firstname Lastname
• Name: Edit

# single action with anchor

• Name: Firstname Lastname
• Name: First action

# classes on items

• Name: Firstname Lastname
• Name: Edit

# empty items array

• Name: Firstname Lastname

# rows with classes

• Name: Firstname Lastname

# summary card with custom classes

• Name: Firstname Lastname
• Date of birth: 13/08/1980

# summary card with custom attributes

• Name: Firstname Lastname
• Date of birth: 13/08/1980

# summary card with only 1 action

Undergraduate teaching assistant

My lonely action

• Name: Firstname Lastname
• Date of birth: 13/08/1980

# translated

• Enw: Firstname Lastname
• Dyddiad geni: 13/08/1980
• Dyddiad geni: Golygu
• Gwybodaeth cyswllt:

  email@email.com

  Address line 1; Address line 2; Address line 3; Address line 4; Address line 5

• Gwybodaeth cyswllt: Golygu

# with some actions

• Name: Firstname Lastname
• Date of birth: 13/08/1980
• Contact information:

  email@email.com

  Address line 1; Address line 2; Address line 3; Address line 4; Address line 5

# overridden-widths

• Name: Firstname Lastname
• Date of birth: 13/08/1980
• Date of birth: Change
• Contact information:

  email@email.com

  Address line 1; Address line 2; Address line 3; Address line 4; Address line 5

# as a summary card with a custom header level

Undergraduate teaching assistant

• Name: Firstname Lastname
• Date of birth: 13/08/1980

---

Table

open

# default

January	£85	£95
February	£75	£55
March	£165	£125

# with head

Month you apply	Rate for bicycles	Rate for vehicles
January	£85	£95
February	£75	£55
March	£165	£125

# with head and caption

Caption 1: Months and rates

Month you apply	Rate for bicycles	Rate for vehicles
January	£85	£95
February	£75	£55
March	£165	£125

# classes

Jan

Feb

# attributes

Jan

Feb

# html as text

Foo <script>hacking.do(1337)</script>
Foo <script>hacking.do(1337)</script>

# html

Foo bar
Foo bar

# head with classes

Foo
Jan	Feb

# head with rowspan and colspan

Foo
		Jan	Feb

# head with attributes

Foo
Jan	Feb

# with firstCellIsHeader true

January	£85	£95
February	£75	£55
March	£165	£125

# firstCellIsHeader with classes

Foo

# firstCellIsHeader with html

Foo bar

# firstCellIsHeader with html as text

Foo <script>hacking.do(1337)</script>

# firstCellIsHeader with rowspan and colspan

Foo

# firstCellIsHeader with attributes

Foo

# with falsy items

A	1
B	2
C	3

# rows with classes

Foo

# rows with rowspan and colspan

Foo

# rows with attributes

Foo

# with small text modifier for tables with a lot of data

January	£85	£95
February	£75	£55
March	£165	£125

---

Tabs

open

# default

Contents

Past day

Case manager	Cases opened	Cases closed
David Francis	3	0
Paul Farmer	1	0
Rita Patel	2	0

Past week

Case manager	Cases opened	Cases closed
David Francis	24	18
Paul Farmer	16	20
Rita Patel	24	27

Past month

Case manager	Cases opened	Cases closed
David Francis	98	95
Paul Farmer	122	131
Rita Patel	126	142

There is no data for this year yet, check back later

# classes

Contents

Information about tabs

# id

Contents

Information about tabs

# title

Custom title for Contents

Information about tabs

# attributes

Contents

Information about tabs

# item with attributes

Contents

Information about tabs

# panel with attributes

Contents

Panel text

# no item list

Contents

# empty item list

Contents

# with falsy values

Contents

Panel 1 content

Panel 2 content

# idPrefix

Contents

Panel 1 content

Panel 2 content

# html as text

Contents

<p>Panel 1 content</p>

<p>Panel 2 content</p>

# html

Contents

Panel 1 content

Panel 2 content

# tabs-with-anchor-in-panel

Contents

Tab 1

Testing that when you click the anchor it moves to the anchor point successfully

Anchor

Anchor Point

Tab 2

---

Tag

open

# default

Alpha

# grey

Grey

# light blue

Light blue

# turquoise

Turquoise

# green

Green

# purple

Purple

# pink

Pink

# red

Red

# orange

Orange

# yellow

Yellow

# attributes

Tag with attributes

# html as text

<span>Alpha</span>

# html

Alpha

---

Task list

open

# default

• Company Directors
  Completed
• Registered company details
  Incomplete
• Business plan
  Incomplete

# forced hover state

• Company Directors
  Completed
• Registered company details
  Incomplete
• Business plan
  Incomplete

# with hint text and additional states

• Company Directors
  Completed
• Registered company details
  Not started
• Business plan

  Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.
  Review
• Documentation
  In progress
• Charitable status
  Error
• Payment

  It will cost between £15 and £75
  Cannot start yet

# with all possible colours

• Task A
  Text colour
• Task B
  Secondary text colour
• Task C
  Grey
• Task D
  Blue
• Task E
  Light blue
• Task F
  Turquoise
• Task G
  Green
• Task H
  Purple
• Task I
  Pink
• Task J
  Red
• Task K
  Orange
• Task L
  Yellow

# with very long single word tags

• Company Directors
  Completed
• Registered company details
  Incomplete
• A very very very long Business plan
  Thisisaverylongwaytosaythatsomethingisincomplete

# custom classes

• A Link
  Status
• Not a link
  Status

# custom attributes

• A Link
  Status

# custom id prefix

• A Link

  Hint text
  Status

# html passed as text

• <strong>Linked Title</strong>

  <strong>Hint</strong>
  <strong>Status</strong>
• <strong>Unlinked Title</strong>
  <strong>Tag</strong>

# html

• Linked Title

  Hint
  Status
• Unlinked Title
  Tag

# with empty values

• Task A
  Completed
• Task B
  Completed

---

Textarea

open

# default

# with hint

Don't include personal or financial information, eg your National Insurance number or credit card details.

# with error message

You must provide an explanation

# with default value

221B Baker Street London NW1 6XE

# with custom rows

# with label as page heading

# id

# classes

# attributes

# with describedBy

# with hint and described by

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

# with error message and described by

Error message

# with hint and error message

Hint

Error message

# with hint, error message and described by

Hint

Error message

# with optional form-group classes

# with autocomplete attribute

# with spellcheck enabled

# with spellcheck disabled

---

Warning text

open

# default

You can be fined up to £5,000 if you don’t register.

# multiple lines

If you are not covered by this License), You must: (a) comply with the terms stated above for the purpose of this license. It explains, for example, the production of a Source form, including but not limited to, the implied warranties or conditions of this License, without any additional file created by such Respondent to you under Sections 2.1 and 2.2 above. Larger Works. You may choose to distribute such a notice and a brief idea of what it does.

# attributes

You can be fined up to £5,000 if you don’t register.

# classes

Warning text

# html

Some custom warning text

# html as text

<span>Some custom warning text</span>

# icon fallback text only

# no icon fallback text

This is a warning

---