Digital pattern library – continuous improvement

Stephen Evans
Tuesday 7 March 2017

This sprint we have focused on making minor updates to the documentation and HTML code of the digital pattern library, following testing of the site with Sitemorse and feedback from content editors in the digital communications team.  The lessons learned from this will enable future patterns to have a more rigorous approach to quality assurance.

This is what we updated this sprint:

More news – new pattern

More news is a new pattern. It is intended for showing a list of news articles or blog posts that provide links to the full article.

More news example



Navboxes are used to present featured navigation items with an optional background image and paragraph. This pattern is used extensively throughout the external website, particularly within Study at St Andrews.

We have improved the documentation to make it easier to understand the options available and the image sizes that need to be used. In the next sprint we are going to be updating the associated navbox grid pattern to provide information about the the available combinations of these sizes.

Navbox example


Contact card

The contact card pattern is used to display contact information for staff and students. We have updated the documentation to give clearer guidance on how they should be used for staff and students.

Contact card example


Hero banner

The hero banner pattern is used to display a large heading, introductory text and call to action over an optional, large background image. Choosing an image that is optimised for this pattern can be difficult, particularly if it is overly complicated and could detract from the text, so we have provided the option of having a background image with a transparent overlay.


Next sprint

In the next sprint (sprint 41 ‘JK Rowling’) we will continue to improve the documentation of existing patterns.

By the end of March we plan to launch the first stable version of our digital pattern library, version 1.0.0.

Related topics