UI styles, components and patterns
Make your service look like the NHS website with tested design styles, components and patterns.
These styles will give you the NHS website layout and look and feel.
Save time and help users with these accessible UI parts.
- Action link
- Back link
- Care cards
- Contents list
- Date input
- Do and Don't lists
- Error message
- Error summary
- Inset text
- Review date
- Skip link
- Summary list
- Text input
- Warning callout
You can combine components in different patterns for different contexts.
Designing new components
These components are well tested and ready to use. Before you design a new one, please test an existing component. Check with us on the NHS digital service manual Slack workspace or email us at email@example.com as we may already be working on what you need.
If you decide you need a new component, make sure that:
- you have good evidence that it's the best way of meeting the user need
- it will be accessible
- you test it with a representative sample of users, including people with access needs
- you will be able to maintain and update it
- you share what you've learnt
Help improve the manual by contributing to components on GitHub.
Updated: July 2019