About the GOV.UK Visual Studio Code extension

This extension for Visual Studio Code includes snippets to help in the building of UK Government digital services.

Available snippets

Name	Shortcut	Notes
Form group	`govuk-form-group`
Form section	`govuk-form-section`
Grid column full	`govuk-grid-column-full`
Grid column one-half	`govuk-grid-column-one-half`
Grid column one-quarter	`govuk-grid-column-one-quarter`
Grid column one-third	`govuk-grid-column-one-third`
Grid column two-thirds	`govuk-grid-column-two-thirds`
Grid column	`govuk-grid-column`
Grid row	`govuk-grid-row`
Layout one-third / two-thirds	`govuk-layout-one-third-two-thirds`
Layout two-thirds / one-third	`govuk-layout-two-thirds-one-third`

Name	Shortcut	Notes
Caption	`govuk-caption`
Font size override	`govuk-font-size`
Font weight override	`govuk-font-weight`
Heading	`govuk-heading`
Link item	`govuk-link-item`
Links	`govuk-link`
Lists	`govuk-list`
lists – Bulleted	`govuk-list-bulleted`
lists – Numbered	`govuk-list-numbered`
Paragraph body text	`govuk-paragraph-body`
Paragraph body text large	`govuk-paragraph-body-lead`
Paragraph body text small	`govuk-paragraph-body-small`
Section break	`govuk-section-break`
Visually hidden	`govuk-visually-hidden`	Creates a visually hidden `span`

Name	Shortcut	Notes
Addresses	`govuk-address`
Bank details	`govuk-bank-details`
Button	`govuk-button`
Character count	`govuk-character-count`
Checkboxes	`govuk-checkboxes`
Checkbox or radio option	`govuk-option`	Use in conjunction with the `govuk-checkboxes` and `govuk-radios` Nunjucks snippets.
Currency input	`govuk-currency-input`
Dates	`govuk-date`
Email address	`govuk-email`
Error summary	`govuk-error-summary`
Fieldset	`govuk-fieldset`
File upload	`govuk-file`
National Insurance Number (NINO)	`govuk-nino`
Radios	`govuk-radios`
Select	`govuk-select`
Select option	`govuk-select-option`	Use in conjunction with the `govuk-select` Nunjucks snippet.
Telephone number	`govuk-telephone`
Text input	`govuk-input`
Textarea	`govuk-textarea`

Name	Shortcut	Notes
Accordion	`govuk-accordion`
Details	`govuk-details`
Inset text	`govuk-inset-text`
Notification banner	`govuk-notification-banner`
Panels	`govuk-panel`
Phase banner	`govuk-phase-banner`
Summary list	`govuk-summary-list`
Tables	`govuk-table`
Tabs	`govuk-tabs`
Tab item HTML	`govuk-tab-item`	Use in conjunction with the `govuk-tabs` snippet. This snippet can be used to encapsulate a tab panel.
Tags	`govuk-tag`
Warning text	`govuk-warning-text`

Name	Shortcut	Notes
Cookie banner	`govuk-cookie-banner`

Using this extension depends on the installation of the GOV.UK Frontend and Nunjucks into your project.

This repository is maintained by Simon Whatley. If you’ve got a question or need support you can:

If you’ve got an idea or suggestion you can:

Email contribute@humanedesign.co putting the repository name in the subject line.
Create a GitHub issue.

Unless otherwise stated, this codebase is released under the MIT License. This covers both the codebase and any sample code in the documentation.