nhsuk-design-system-snippets
NHS.UK Design System snippets for Nunjucks by Simon Whatley
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.