Long form article

The long form article template forms the overall structure of the long form article, whose purpose is to add a layer of interaction and delight to a predominantly static article page by segmenting large amounts of written content into bite-sized, tangible and digestible sections, thus increasing user engagement.

Design and usage

A suite of components are available to use exclusively within long-from article template pages, all of which sit within the standard design grid. These components can be mixed and matched accordingly, and are available in a variety of styles and themes. Balance the page with paragraphs of written text and chapter dividers, with short, sweet, punchy heading titles and interactive components, highlighting key areas of content, or supporting content; this will maximise the potential of the design.

Structure

Exclusive components available for use within a long form article:

• Long form hero (with chapter section headings)
• Author and contributor box
• Chapter index
• Social sharing bar
• Audio card
• Image gallery card
• See also card
• Large video player
• Read next article

Ordering

1. Long form hero - mandatory
2. Author and contributor box - mandatory
3. Article oveview - mandatory
4. Up to nine article chapters - mandatory
5. Additional content, eg. footnotes - optional
6. Read next article - mandatory

Article introduction / foreword

This introductory chapter should be made up of:

1. Article oveview - mandatory
2. Social sharing bar - optional
3. Article introduction / foreword - mandatory

Chapter content

Components may be mixed and matched within each chapter but must remain within the standard design grid. Main copy must remain within a maximum of eight columns at desktop but editorial pullouts or wider components may be used to help balance the page.

Exclusive components that can be used to add a layer of interaction and delight to a predominantly static article page are:

• Audio card
• Image gallery card
• See also card
• Large video player

Interaction

• Hero image becomes the background for all chapter headings / dividers
• Chapter index becomes visble after the article introduction is above half way up the window
• Chapter index becomes hidden after the last chapter passes half way up the window

Labels

• Chapter titles must be kept as short and susinct as possible, ideally below 45 characters.
• The title for the first chapter (chapter 0) which is not displayed on the page but within the chapter index should be appropriate for the article, for example 'Introduction' or 'Foreword'.

Accessibility and screen readers

• Image / text contrast in line with pre-existing WCAG guidelines and established Framework components
• Ability to disable animation effects

Placement

• Placed directly between the masthead and the footer

Design notes

• Article content is limited to maximum of eight columns wide at desktop
• Article chapter spacing follows standard section in-out rules
• Article overview copy should be H3 styling