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