Skip to content

simonwhatley/nhsuk-visual-studio-code-extension

Repository files navigation

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

Styles

Layout

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

Typography

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

Components

Form elements

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

Content presentation

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

Navigation

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

Dependencies

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

Support

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

Contributing

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

Licence

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