simonwhatley / govuk-design-system-snippets-atom-package

This Atom package includes snippets to help build UK Government digital services.

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
Pagination	govuk-pagination
Previous/next navigation	govuk-previous-next
Skip link	govuk-skip-link

Miscellaneous

Name	Shortcut	Notes
Cookie banner	govuk-cookie-banner

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 [email protected] 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 [email protected] 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.