Digital pattern library – long-form

Stephen Evans
Tuesday 21 February 2017

We have now updated the ‘long-form’ components of our digital pattern library (DPL). The seven long-form components are used to create longer feature articles such as the “Light Box” story. Having the components clearly defined will make it much easier to implement this in T4 or WordPress and make it faster to create new articles.

Long-form intro

This pattern introduces a long-form story and must be included at the top of the page.

Example long form intro

Long-form end piece

This marks the end of content in a long-form story and must be included.

Example long-form end piece

Long-form credits

The long-form credits section is the final item before the footer. It comes after the long-form end piece content item.

Example long form credits

There is also the option of a minimum credits section.

Example long form credits minimum

Long-form asides

Long-form asides are used in a variety of ways to include content beside the main content. This can be used to very good effect. For example, in the story about discovering the Chanka.

Example long-form aside

Long-form gallery

The long-form gallery pattern demonstrates a method of displaying a large number of images on a page and makes use of the Lightbox JavaScript library to view the images in an immersive experience.

Example long form gallery

Long-form quotes

The long-form quotes pattern is used to include quotes within a long-form story. There are two types of quotes:


These are used to quote something within the flow of the article.

Example blockquote

Pull quotes

These are used to quote something from the flow of the article in a larger size to draw the reader into the article.

Example pull quote


The long-form section pattern provides ways to break up the page into different sections. This can be used to great effect when used with background images. For example, in the story about project Zambia.

Example long form section


The long-form elements provide a lot of flexibility in the way we can now create featured stories or other articles. Note that these elements are not designed for standard web pages.

The next phase of the digital pattern library work is going to focus on improving the remainder of our patterns such as the contact card and navigation.

Related topics

Share this story