This extension for Visual Studio Code includes snippets to help in building the UK's NHS digital services.
| 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 |
| Name | Shortcut | Notes |
|---|---|---|
| Action link | nhsuk-action-link |
|
| Back link | nhsuk-back-link |
|
| Breadcrumbs | nhsuk-breadcrumbs |
|
| Contents list | nhsuk-contents-list |
|
| Footer | nhsuk-footer |
|
| Header | nhsuk-header |
|
| Pagination | nhsuk-pagination |
|
| Skip link | nhsuk-skip-link |
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:
- Email support@humanedesign.co putting the repository name in the subject line.
- View known issues on GitHub.
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.