GOV.UK Design System snippets for Nunjucks
This Atom package includes snippets to help build UK Government digital services.
Installation
Go to Atom > Preferences > Install and then search for govuk design system snippets under Packages.
After installing the package, you will need to restart Atom.
Available snippets
Styles
Layout
| Name | Shortcut | Notes |
|---|---|---|
| Form group | govuk-form-group |
|
| Form section | govuk-form-section |
|
| Grid column full | govuk-grid-column-full |
|
| Grid column one-half | govuk-grid-column-one-half |
|
| Grid column one-quarter | govuk-grid-column-one-quarter |
|
| Grid column one-third | govuk-grid-column-one-third |
|
| Grid column two-thirds | govuk-grid-column-two-thirds |
|
| Grid column | govuk-grid-column |
|
| Grid row | govuk-grid-row |
|
| Layout one-third / two-thirds | govuk-layout-one-third-two-thirds |
|
| Layout two-thirds / one-third | govuk-layout-two-thirds-one-third |
Typography
| Name | Shortcut | Notes |
|---|---|---|
| Caption | govuk-caption |
|
| Font size override | govuk-font-size |
|
| Font weight override | govuk-font-weight |
|
| Heading | govuk-heading |
|
| Link item | govuk-link-item |
|
| Links | govuk-link |
|
| Lists | govuk-list |
|
| Lists – Bulleted | govuk-list-bulleted |
|
| Lists – Numbered | govuk-list-numbered |
|
| Paragraph body text | govuk-paragraph-body |
|
| Paragraph body text large | govuk-paragraph-body-lead |
|
| Paragraph body text small | govuk-paragraph-body-small |
|
| Section break | govuk-section-break |
|
| Visually hidden | govuk-visually-hidden |
Creates a visually hidden span |
Components
Form elements
| Name | Shortcut | Notes |
|---|---|---|
| Addresses | govuk-address |
|
| Bank details | govuk-bank-details |
|
| Button | govuk-button |
|
| Character count | govuk-character-count |
|
| Checkboxes | govuk-checkboxes |
|
| Checkbox or radio option | govuk-option |
Use in conjunction with the govuk-checkboxes and govuk-radios Nunjucks snippets. |
| Currency input | govuk-currency-input |
|
| Dates | govuk-date |
|
| Email address | govuk-email |
|
| Error summary | govuk-error-summary |
|
| Fieldset | govuk-fieldset |
|
| File upload | govuk-file |
|
| National Insurance Number (NINO) | govuk-nino |
|
| Radios | govuk-radios |
|
| Select | govuk-select |
|
| Select option | govuk-select-option |
Use in conjunction with the govuk-select Nunjucks snippet. |
| Telephone number | govuk-telephone |
|
| Text input | govuk-input |
|
| Textarea | govuk-textarea |
Content presentation
| Name | Shortcut | Notes |
|---|---|---|
| Accordion | govuk-accordion |
|
| Details | govuk-details |
|
| Inset text | govuk-inset-text |
|
| Notification banner | govuk-notification-banner |
|
| Panels | govuk-panel |
|
| Phase banner | govuk-phase-banner |
|
| Summary list | govuk-summary-list |
|
| Tables | govuk-table |
|
| Tabs | govuk-tabs |
|
| Tab item HTML | govuk-tab-item |
Use in conjunction with the govuk-tabs snippet. This snippet can be used to encapsulate a tab panel. |
| Tags | govuk-tag |
|
| Warning text | govuk-warning-text |
Navigation
| Name | Shortcut | Notes |
|---|---|---|
| Back link | govuk-back-link |
|
| Breadcrumbs | govuk-breadcrumbs |
|
| Footer | govuk-footer |
|
| Header | govuk-header |
|
| Skip link | govuk-skip-link |
Dependencies
Using this package depends on the installation of the GOV.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.