Long-form content

The Long-form content pattern is designed to be used repetitively with a variety of options to achieve an engaging, story-telling experience that still remains consistent in look and feel. It is ideally suited to blend longer passages of text with images, video and audio. It also carries several subpatterns.

Usage

• Use a University header and University footer (an abbreviated footer is typically acceptable).
• Use as many Long-form content sections as you want in between.
• At the end of the story narrative, you should use the End piece element to communicate that the story has finished.
• The page must end with a Credits variant, see below.

Examples for individual variants and subpatterns are below, but you can also see the full page example to get a sense for how to use the variants and subpatterns together.

Syntax

Variants

You can mix and match these variants to get a variety of display options.

Text and backgrounds

• Black and white (Default)
  By default the background is white and the text is black (dark grey).
• Inverse text
  Modifier class: .long-form--inverse
  This switches the text colour from black to white. It is useful in conjunction with a darker background image.
• Background image
  Using a style attribute, set the URL of a background image on the <section class="long-form"> element.
• Background light grey
  Modifier class: .long-form--bg-light-grey
  Sets the background colour to a light grey.
• Darkened background image
  Modifier class: .long-form--bg-darken
  Adds a semi-transparent black overlay on the background image. Typically used to make a bright background image usable behind white text.
• Ligthened background image
  Modifier class: .long-form--bg-lighten
  Adds a semi-transparent white overlay on the background image. Typically used to make a dark background image usable behind black text.

Width

• Compressed content column (Default)
  By default content has a width of 8 grid columns with a 2 grid column offset achieving a 2-8-2 pattern.
• Medium content column
  Modifier class: .long-form--width-medium
  This sets the content to have a width of 10 grid columns with a 1 grid column offset achieving a 1-10-1 pattern.
• Full-width content column
  Modifier class: .long-form--width-full
  This sets the content to span all 12 grid columns.

Vertical padding

• Vertical padding (Default)
  By default there is generous padding on the top and bottom.
• No vertical padding
  Modifier class: .long-form--padding-none
  Removes the top and bottom padding.

Credits

• Credits section
  Modifier class: .long-form--credits
  All long-form content pages must end with a credits section. This section has a medium (1-10-1) width, grey background, smaller text, and a St Andrews logo in a watermark effect.

Subpatterns

The following subpatterns may be used inside the <div class="long-form__content"> element.

• Asides
• End piece
• Pull quotes
• Thumbnail gallery
• (BETA) Horizontal gallery

Asides

Standard HTML5 <aside> elements are enhanced with a set of classes to flexibly position them relative to content. This approach removes the need for a dedicated sidebar. The <aside> element is often used to wrap <figure> elements, but can equally wrap any tangential content.

Note: These asides are only designed to work inside the default compressed content column, not the medium or full-width variants.

<aside class="ALIGNMENT">
    ...
</aside>

Aside variants

• Align centre
  Modifier class: .align-centre or .align-center
  Centre the <aside> inside the content column.
• Align left
  Modifier class: .align-left
  Align <aside> to the left of the content column.
• Align right
  Modifier class: .align-right
  Align <aside> to the right of the content column.
• Extend left
  Modifier class: .extend-left
  Float to left and span the content column and the 2 left grid columns. Since no width is set, the <aside> takes on the width of the content it contains.
• Extend right
  Modifier class: .extend-right
  Float to right and span the content column and the 2 right grid columns. Since no width is set, the <aside> takes on the width of the content it contains.
• Float left
  Modifier class: .float-left
  Float left.
• Float right
  Modifier class: .float-right
  Float right.
• Parallel left
  Modifier class: .parallel-left
  Place the <aside> in the left 2 grid columns directly parallel to the content that it precedes.
• Parallel right
  Modifier class: .parallel-right
  Place the <aside> in the right 2 grid columns directly parallel to the content that it precedes.

End piece

Long-form content articles should end with the End piece subpattern. It shows a square box with the date the article was published.

<p class="end">Tuesday 04 October 2016</p>

Lead paragraph

The opening <h1> is typically followed by a lead paragraph.

<p class="lead">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Pull quotes

Pull quotes are used to quote something from the flow of the article in a larger size to draw the reader into the article. This is different in purpose to a blockquote where you want to include a longish quotation in the flow of the narrative. Additionally, these pull quote elements are automatically populated with links to share on Twitter and Facebook.

<p class="pull-quote" data-quote="...there is nothing in the world so irresistibly contagious as laughter and good humour.">
    It is a fair, even-handed, noble adjustment of things, that while there is infection in disease and sorrow, there is nothing in the world so irresistibly contagious as laughter and good humour.
</p>

You may provide a custom tweet quote using the data-quote attribute. However, if the data-quote attribute is not present — or left blank — then the tweet quote will be created automatically; if required, it will be truncated to fit within 140 characters.

Thumbnail gallery

The thumbnail gallery provides a simple and elegant display of a collection of images in thumbnail format, additionally enhancing them by setting them to open up in the pattern library's theatre viewer for further navigation.

...

<div class="thumbnail-gallery">
    <h4 class="thumbnail-gallery__title">Scientists involved with Light Box</h4>

    <div class="thumbnail-gallery__images">

        <figure class="image">
            <img src="path/to/image.jpg" alt="Professor Ifor Samuel" title="Professor Ifor Samuel">
            <figcaption>Ifor Samuel<br><em>Physicist</em></figcaption>
        </figure><figure class="image">
            <img src="path/to/image.jpg" alt="John Allen" title="Ashu Kumar Bansal">
            <figcaption>John Allen<br><em>Physicist</em></figcaption>
        </figure><figure class="image">
            <img src="path/to/image.jpg" alt="Ashu Kumar Bansal" title="Ashu Kumar Bansal">
            <figcaption>Ashu Kumar Bansal<br><em>Optical physicist</em></figcaption>
        </figure><figure class="image">
            <img src="path/to/image.jpg" alt="Hien Nguyen" title="Hien Nguyen">
            <figcaption>Hien Nguyen<br><em>Polymer chemist</em></figcaption>
        </figure><figure class="image">
            <img src="path/to/image.jpg" alt="Olena Kulyk" title="Olena Kulyk">
            <figcaption>Olena Kulyk<br><em>Biomedical electronics engineer</em></figcaption>
        </figure>

    </div>

</div>
...

(BETA) Slider gallery

The Slider gallery provides an alternative interface for displaying large images in the long-form content pages. Note, this is a conceptual implementation currently and needs further engineering before being used in production situations.

Examples