NHS.UK Design System snippets for Nunjucks

This Atom package includes snippets to help build the UK's NHS digital services.

Installation

Go to Atom > Preferences > Install and then search for nhsuk design system snippets under Packages.

After installing the package, you will need to restart Atom.

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 package 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.