Digital pattern library – version 1.9.0

Lewis Wake
Monday 26 March 2018

We have launched version 1.9.0 of the digital pattern library. This release of the DPL features new patterns that will be used on the redesigned news and media centre section of the University website.

We have added three new patterns and updated the documentation and examples for a number of others. The following post is a summary of notable updates. Please see our DPL changelog for a full list of updates.


Search bar

The search bar has been a feature within the header pattern for a while, but we have now documented the search bar as a pattern so that the standalone code is captured. There are two new options included with this pattern, a ‘search banner‘ and a ‘search banner with tag buttons‘.

The ‘search banner‘ option is to allow search bars to be featured on the main body of a webpage. This is to maintain user retention so they can continue to browse the University website. Ideally, this option should appear above the footer pattern, however, there is scope to include this option elsewhere on full-width page layouts.

The ‘search banner with tag buttons‘ option is specific to the news website redesign project at this stage. This option’s functionality is similar to our ‘form banner‘ pattern, but the text field is a search bar. Users can use this option to enter a search query and while typing related tags specific to their query will appear below. This allows the user a choice while searching.


Numerical list

The numerical list pattern is used to show a list of ranked links in the aside of a WordPress blog site. This pattern is intended for use in sidebars to allow users browsing the updated news site the opportunity of further reading of top stories published by the University.


Share options

The share options pattern allows news posts to be shared across social media platforms. This is specific to the news redesign project as there is a requirement to allow posts to be shared easily. For the first iteration of this pattern, we have included the option to share to the following platforms:

  • Facebook
  • Twitter
  • Messenger
  • LinkedIn
  • WhatsApp
  • Email

The WhatsApp share option only appears on browser widths lower than 768px. The BBC News site also does this and we believe this is due to WhatsApp primarily being a standalone mobile app. While a web version of WhatsApp does exist, we first want to capture the data to see how often it is being used before including the option on desktop.


Other notable updates

  • A new option has been added to the news updates pattern. This option is to showcase focused news stories in the sidebar of a post.
  • A new option has been added to the buttons pattern. ‘Tag buttons’ are to be used on WordPress installations to display links to related tags and categories.

  • Future updates

    The digital communications team will continue to support and develop the digital pattern library in response to the requirements of the user.

    We actively and enthusiastically work with colleagues across the University. If you would like to use the digital pattern library for your own web project, or you require consultation, please contact the digital communications team by email via [email protected].

Related topics

Share this story