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
- Links
- Lists
- 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
- Cookie banner — also known as cookies banner, consent banner, gdpr banner, tracking banner or analytics banner
- 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
- Exit this page
- Fieldset
- File upload
- Footer — also known as privacy notice, accessibility statement or terms and conditions
- Header
- Inset text — also known as highlighted text or callout
- Notification banner — also known as alert, warning, success message, important message or flash message
- Pagination
- 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 — also known as summary card
- 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
- Equality information — also known as protected characteristics, ethnic group, diversity, demographic, age, disability, marriage, civil partnership, religion, sex, gender identity or sexual orientation
- 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 a phone number — also known as 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 — also known as start page or start pages
- Recover from validation errors
Pages
- Confirmation pages — also known as completion pages, receipts or finish pages
- Cookies page — also known as privacy settings, cookie settings or tracking settings
- 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
- Step by step navigation
- Task list pages
Community
What we’re working on
- Upcoming components and patterns — also known as maps, task list, 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