This Atom package includes snippets to help build UK Government digital services.
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.
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 |
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
|
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 |
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 |
Name | Shortcut | Notes |
---|---|---|
Back link | govuk-back-link |
|
Breadcrumbs | govuk-breadcrumbs |
|
Footer | govuk-footer |
|
Header | govuk-header |
|
Skip link | govuk-skip-link |
Using this package depends on the installation of the GOV.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.