About the NHS.UK Visual Studio Code extension

This extension for Visual Studio Code includes snippets to help in building the UK's NHS digital services.

Available snippets

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

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

Name	Shortcut	Notes
Addresses	`nhsuk-address`
Bank details	`nhsuk-bank-details`
Button	`nhsuk-button`
Character count	`nhsuk-character-count`
Checkboxes	`nhsuk-checkboxes`
Checkbox or radio option	`nhsuk-option`	Use in conjunction with the `nhsuk-checkboxes` and `nhsuk-radios` Nunjucks snippets.
Date input	`nhsuk-date`
Email address	`nhsuk-email`
Error summary	`nhsuk-error-summary`
Fieldset	`nhsuk-fieldset`
National insurance number	`nhsuk-nino`
Radios	`nhsuk-radios`
Select	`nhsuk-select`
Select option	`nhsuk-select-option`	Use in conjunction with the `nhsuk-select` Nunjucks snippet.
Telephone number	`nhsuk-telephone`
Text input	`nhsuk-input`
Textarea	`nhsuk-textarea`

Name	Shortcut	Notes
Care cards	`nhsuk-care-card`
Details	`nhsuk-details`
Do and don’t lists	`nhsuk-do-dont-list`
Expander	`nhsuk-expander`
Images	`nhsuk-image`
Inset text	`nhsuk-inset-text`
Summary list	`nhsuk-summary-list`
Table	`nhsuk-table`
Tabs	`nhsuk-tabs`
Tab item HTML	`nhsuk-tab-item`	Use in conjunction with the `nhsuk-tabs` snippet. This snippet can be used to encapsulate a tab panel.
Tag	`nhsuk-tag`
Warning callout	`nhsuk-warning-callout`

Using this extension depends on the installation of the NHS.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.