Sitemap
Get started
Setup guides
How to guides
- Replace variables, functions and mixins from our old frameworks
- Making labels and legends headings
- Extending and modifying components in production
- Understanding focus state styles
Styles
- Colour — also known as palette
- Images
- Layout
- Page template — also known as boilerplate
- Spacing — also known as margin or padding
- Typography
Components
- Accordion
- Back link — also known as return link or back button
- Breadcrumbs — also known as navigation path or cookie crumb
- Button
- Character count — also known as word count
- Checkboxes — also known as check boxes, tickboxes or tick boxes
- Date input
- Details — also known as reveal, progressive disclosure, hidden text, show and hide or showyhideything
- Error message — also known as validation message
- Error summary
- Fieldset
- File upload
- Footer
- Header
- Inset text — also known as highlighted text or callout
- Panel — also known as confirmation box, results box, reference number, application complete or application number
- Phase banner — also known as alpha banner, beta banner, prototype banner, status banner or feedback banner
- Radios — also known as radio buttons or option buttons
- Select — also known as drop down menu, list box, drop down list, combo box or pop-up menu
- Skip link — also known as skip navigation link
- Summary list
- Table
- Tabs
- Tag — also known as chip, badge, flag or token
- Text input — also known as text box, text field, input field or text entry box
- Textarea — also known as multi-line text box or multi-line text field
- Warning text — also known as important text or legal text
Patterns
Ask users for…
- Addresses
- Bank details
- Dates
- Email addresses
- Ethnic groups
- Gender or sex — also known as title, titles, pronoun or pronouns
- Names
- National Insurance numbers
- Passwords
- Payment card details
- Telephone numbers — also known as phone numbers
Help users to…
- Check a service is suitable
- Check answers
- Confirm an email address
- Contact a department or service team
- Create a username
- Create accounts
- Understand the impact of an emergency on your service — also known as coronavirus or covid
- Recover from validation errors
Pages
- Confirmation pages — also known as completion pages, receipts or finish pages
- Page not found pages — also known as 404
- There is a problem with the service pages — also known as 500
- Question pages
- Service unavailable pages — also known as 503
- Start pages
- Step by step navigation
- Task list pages