NHS Design Component Editor Blocks User Guide

Modified on Wed, 9 Aug, 2023 at 6:03 PM

A series of display components from the NHSUK Frontend Library, based on research from the NHS Service Manual to ensure that NHS websites are consistent, fully accessible and easy to use whilst also looking great.


Use Do and Don’t lists to help users understand more easily what they should and shouldn’t do.

Use buttons to help users carry out an action on a page like starting an application or saving their progress.



Make a complex topic easier to digest by letting users reveal more detailed information only if they need it.



Panels can be used to differentiate content and to group similar content together visually



The promo block is designed to act as an onscreen “advert” for content. It sits in a fully clickable region and is differentiated from other content on the page.



The simple quote section takes content out of the normal stream and adds a left hand border to help users identify and understand important content on the page, even if they don’t read the whole page.


Use the card region to help users identify and understand the sort of care, information or action they need, who to contact and how quickly.





Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article