Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>NHS.UK Design System snippetsNew to Visual Studio Code? Get it now.

NHS.UK Design System snippets

Simon Whatley

|
58 installs
| (0) | Free
NHS.UK Design System snippets for Nunjucks by Simon Whatley
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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
Button nhsuk-button
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
Error summary nhsuk-error-summary
Fieldset nhsuk-fieldset
Radios nhsuk-radios
Select nhsuk-select
Select option nhsuk-select-option Use in conjunction with the nhsuk-select Nunjucks snippet.
Text input nhsuk-input
Textarea nhsuk-textarea

Content presentation

Name Shortcut Notes
Details nhsuk-details
Inset text nhsuk-inset-text
Tables nhsuk-table
Warning callout nhsuk-warning-callout

Navigation

Name Shortcut Notes
Back link nhsuk-back-link
Breadcrumbs nhsuk-breadcrumbs
Footer nhsuk-footer
Header nhsuk-header
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:

  • Email support@humanedesign.co putting the repository name in the subject line.
  • View known issues on GitHub.

Contributing

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.

Licence

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

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2021 Microsoft