This Atom package includes snippets to help build the UK's NHS digital services.
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.
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 |
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
|
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 |
Name | Shortcut | Notes |
---|---|---|
Details | nhsuk-details |
|
Inset text | nhsuk-inset-text |
|
Tables | nhsuk-table |
|
Warning callout | nhsuk-warning-callout |
Name | Shortcut | Notes |
---|---|---|
Back link | nhsuk-back-link |
|
Breadcrumbs | nhsuk-breadcrumbs |
|
Footer | nhsuk-footer |
|
Header | nhsuk-header |
|
Skip link | nhsuk-skip-link |
Using this package depends on the installation of the NHS.UK Frontend and Nunjucks into your project.
This repository is maintained by Simon Whatley. If you’ve got a question or need support you can:
If you’ve got an idea or suggestion you can:
Unless otherwise stated, this codebase is released under the MIT License. This covers both the codebase and any sample code in the documentation.
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.