Digital pattern library – long-form
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.
Long-form end piece
This marks the end of content in a long-form story and must be included.
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.
There is also the option of a minimum credits section.
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.
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.
Long-form quotes
The long-form quotes pattern is used to include quotes within a long-form story. There are two types of quotes:
Blockquotes
These are used to quote something within the flow of the article.
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.
Long-form-sections
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.
Conclusion
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.