Sitemap
Get started
Setup guides
How to guides
- Making labels and legends headings
- Extending and modifying components in production
- Understanding focus state styles
- Updating your service to use the new type scale
Styles
Page structure
- Page template — includes boilerplate
- Layout
- Spacing — includes margin or padding
- Section break
Typography
Visual elements
Components
- Accordion
- Back link — includes return link or back button
- Breadcrumbs — includes navigation path or cookie crumb
- Button
- Character count — includes word count
- Checkboxes — includes check boxes, tickboxes or tick boxes
- Cookie banner — includes cookies banner, consent banner, gdpr banner, tracking banner or analytics banner
- Date input
- Details — includes reveal, progressive disclosure, hidden text, show and hide or showyhideything
- Error message — includes validation message
- Error summary
- Exit this page
- Fieldset
- File upload
- Footer — includes privacy notice, accessibility statement or terms and conditions
- Header
- Inset text — includes highlighted text or callout
- Notification banner — includes alert, warning, success message, important message or flash message
- Pagination
- Panel — includes confirmation box, results box, reference number, application complete or application number
- Password input — includes pass word or pass phrase
- Phase banner — includes alpha banner, beta banner, prototype banner, status banner or feedback banner
- Radios — includes radio buttons or option buttons
- Select — includes drop down menu, list box, drop down list, combo box or pop-up menu
- Skip link — includes skip navigation link
- Summary list — includes summary card
- Table
- Tabs
- Tag — includes chip, badge, flag or token
- Task list
- Text input — includes text box, text field, input field or text entry box
- Textarea — includes multi-line text box or multi-line text field
- Warning text — includes important text or legal text
Patterns
Ask users for…
- Addresses
- Bank details
- Dates
- Email addresses
- Equality information — includes protected characteristics, ethnic group, diversity, demographic, age, disability, marriage, civil partnership, religion, sex, gender identity or sexual orientation
- Gender or sex — includes title, titles, pronoun or pronouns
- Names
- National Insurance numbers
- Passwords
- Payment card details
- Telephone numbers — includes phone numbers
Help users to…
- Check a service is suitable
- Check answers
- Complete multiple tasks
- Confirm a phone number — includes 2fa, mfa, multi-factor authentication, security code, telephone number, text message or two-factor authentication
- Confirm an email address
- Contact a department or service team
- Create a username
- Create accounts
- Exit a page quickly
- Start using a service — includes start page or start pages
- Recover from validation errors
Pages
- Confirmation pages — includes completion pages, receipts or finish pages
- Cookies page — includes privacy settings, cookie settings or tracking settings
- Page not found pages — includes 404
- There is a problem with the service pages — includes 500
- Question pages
- Service unavailable pages — includes 503
- Step by step navigation
Community
What we’re working on
- Upcoming components and patterns — includes maps, autocomplete, choosing a date or navigation
- Roadmap
Ways to get involved
- Share findings about your users
- Propose a component or pattern
- Develop a component or pattern
- Propose a content change using GitHub
How we work
- Community principles
- Contribution criteria
- Design System working group
- Blog posts, videos and podcasts