govuk-design-system-snippets

GOV.UK Design System snippets for Nunjucks by Simon Whatley

Simon Whatley

137

0

Bug Reports

0.12.1

MIT

GitHub

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:

Contributing

If you’ve got an idea or suggestion you can:

Licence

Unless otherwise stated, this codebase is released under the MIT License. This covers both the codebase and any sample code in the documentation.