v2
GOV.UK Design System Nunjucks macro snippets for popular code editors. For use by UK government designers.
Installation will differ based on your operating system and text editor of choice. These snippets are designed to be addded to your existing HTML snippets, be careful not to overwrite your existing snippets.
- Start typing
gov-. - See a list of suggestions.
- Either continue typing until you've selected the correct snippet or use the arrow keys to select from the list.
- Press [return] and the snippet will be inserted automatically.
- Your cursor will be moved to the first insertion point in the snippet, type in your content.
- Press [tab] to move to the next insertion point. Repeat.
- Press [tab] to finalise and move to the end of the snippet.
Visual Studio Code has the added benefit of allowing users to choose from a list of options at some insertion points, simply press [down] to choose from the available options and then [return] to confirm.
| Name | Shortcut | Insertion points | Design System documentation |
|---|---|---|---|
| Two-thirds layout | gov-layout-twothirds |
N/A | Layout - Two-thirds |
| Two-thirds / one-third layout | gov-layout-twothirds-onethird |
N/A | Layout - Two-thirds / one-third |
| Grid row | gov-layout-grid-row |
1. Inside grid row <div> |
Layout |
| Column | gov-layout-column |
1. Class name of column (defining column size) 2 Inside column <div> |
Layout |
| Link | gov-typo-link |
1. Destination href value 2. Link text |
Typography - Links |
| Header text | gov-typo-header-text |
1. Header level; h1 to h6 2. Font size class small to extra large 3. Header title |
Typography - Headings |
| Paragraph text | gov-typo-paragraph-text |
1. Font size class; standard, large or small 2. Paragraph content | Typography - Paragraphs |
| List | gov-typo-list |
1. List type; standard or bullet 2. Inside first list item | Typography - Lists |
| Numbered list | gov-typo-number-list |
1. Inside first list item | Typography - Numbered lists |
| Section break | gov-typo-section-break |
1. Vertical margin size class; extra large, large, medium or standard | Typography - Section break |
| Back link | gov-back-link |
1. Title (default: Back) 2. Destination href value (default: Browser back functionality) |
Components - Back link |
| Warning text | gov-warning-text |
1. Text 2. Text replacement for icon for screen-readers (default: Warning) | Components - Warning text |
| Inset text | gov-inset-text |
1. Text | Components - Inset text |
| Breadcrumbs | gov-breadcrumbs |
1. Root link text (default: Home) 2. Root link destination href value 3. Current page name |
Components - Breadcrumbs |
| Link button | gov-link-button |
1. Button text (default: Start) 2. Destination href value 3. Button type class; standard or start |
Components - Button |
| Form submit button | gov-form-button |
1. Button text (default: Save and continue) | Components - Button |
| Text input | gov-form-text |
1. Name and ID of theinput field 2. Label text 3. Size class (standard, 20 characters, 10 characters) |
Components - Text input |
| Text input with hint | gov-form-text-hint |
1. Name and ID of the input field 2. Label text 3. Hint text 4. Size class (standard, 20 characters, 10 characters) |
Components - Text input |
| Textarea | gov-form-textarea |
1. Name and ID of the textarea element 2. Label text |
Components - Textarea |
| Textarea with hint | gov-form-textarea-hint |
1. Name and ID of the textarea element 2. Label text 3. Hint text |
Components - Textarea |
| Radio buttons | gov-form-radio-buttons |
1. Name and ID prefix of checkbox inputs 2. Legend text, typically a question 3. Hint text, remove hint: {*}, if not required 4. Radio button answers, use shortcut gov-form-option to add item |
Components - Checkboxes |
| Inline radio buttons | gov-form-radio-buttons-inline |
1. Name and ID prefix of checkbox inputs 2. Legend text, typically a question 3. Hint text, remove hint: {*}, if not required 4. Radio button answers, use shortcut gov-form-option to add item |
Components - Checkboxes |
| Radio or checkbox option | gov-form-option |
1. Value of item when selected 2. Text to display in label | N/A |
| Date input | gov-form-date-input |
1. Name and ID prefix, for example using 'dob' would produce names and IDs of 'dob-day','dob-month' and 'dob-year' 2. Legend text, typically a question 3. Hint text, remove hint: {*}, if not required |
Components - Date input |
| File upload | gov-form-file-upload |
1. Name and ID 2. Label, default: 'Upload a file' |
Components - File upload |
| Accordion | gov-accordion |
1. Text for title of accordion section 2. HTML fo when section is expanded | Components - Accordion |
| Character count | gov-character-count |
1. Name and ID of the textarea element 2. Character limit, default: 200 3. Text to display in label 4. Hint text, remove hint: {*}, if not required |
Components - Character count |
| Summary list | gov-summary-list |
1. Text for 'key' in list row 2. Text for detail or description in list row 3. Text for link, default Change 4. URL for link, default # 5. Suffix text for change link for screen readers |
Components - Summary list |
| Tabs | gov-tabs |
1. Text for tab label 2. ID for tab element 3. Panel HTML | Components - Tabs |
| Tag | gov-tag |
1. Text for tag title | Components - Tag |
| Question page | gov-question-page |
1. Text for page title 2. Page content | Patterns - Question page |
Next steps are to bring in more page templates, including confirmation pages etc.