nhsuk-design-system-snippets

NHS.UK Design System snippets for Nunjucks by Simon Whatley

Simon Whatley

42

0

Bug Reports

0.1.0

MIT

GitHub

NHS.UK Design System snippets for Nunjucks

This Atom package includes snippets to help build the UK's NHS digital services.

Installation

Go to Atom > Preferences > Install and then search for nhsuk design system snippets under Packages.

After installing the package, you will need to restart Atom.

Available snippets

Styles

Layout

Name Shortcut Notes
Form group nhsuk-form-group
Form section nhsuk-form-section
Grid column full nhsuk-grid-column-full
Grid column one-half nhsuk-grid-column-one-half
Grid column one-quarter nhsuk-grid-column-one-quarter
Grid column one-third nhsuk-grid-column-one-third
Grid column two-thirds nhsuk-grid-column-two-thirds
Grid column nhsuk-grid-column
Grid row nhsuk-grid-row
Layout one-third / two-thirds nhsuk-layout-one-third-two-thirds
Layout two-thirds / one-third nhsuk-layout-two-thirds-one-third

Typography

Name Shortcut Notes
Caption nhsuk-caption
Font size override nhsuk-font-size
Font weight override nhsuk-font-weight
Heading nhsuk-heading
Links nhsuk-link
Lists nhsuk-list
Lists – Bulleted nhsuk-list-bulleted
Lists – Numbered nhsuk-list-numbered
Paragraph body text nhsuk-paragraph-body
Paragraph body text large nhsuk-paragraph-body-lead
Paragraph body text small nhsuk-paragraph-body-small
Section break nhsuk-section-break
Visually hidden nhsuk-visually-hidden Creates a visually hidden span

Components

Form elements

Name Shortcut Notes
Addresses nhsuk-address
Button nhsuk-button
Checkboxes nhsuk-checkboxes
Checkbox or radio option nhsuk-option Use in conjunction with the nhsuk-checkboxes and nhsuk-radios Nunjucks snippets.
Date input nhsuk-date
Error summary nhsuk-error-summary
Fieldset nhsuk-fieldset
Radios nhsuk-radios
Select nhsuk-select
Select option nhsuk-select-option Use in conjunction with the nhsuk-select Nunjucks snippet.
Text input nhsuk-input
Textarea nhsuk-textarea

Content presentation

Name Shortcut Notes
Details nhsuk-details
Inset text nhsuk-inset-text
Tables nhsuk-table
Warning callout nhsuk-warning-callout

Navigation

Name Shortcut Notes
Back link nhsuk-back-link
Breadcrumbs nhsuk-breadcrumbs
Footer nhsuk-footer
Header nhsuk-header
Skip link nhsuk-skip-link

Dependencies

Using this package depends on the installation of the NHS.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.