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.