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 sub-patterns.

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 options and sub-patterns are below, but you can also see the full page example to get a sense for how to use the options and sub-patterns together.

Options

You can mix and match these options 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.
Lightened 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.

Sub-patterns

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

Asides
End piece
Pull quotes

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 sub-pattern. It shows a square box with the date the article was published.

<p class="end">Tuesday 14 February 2017</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>
...

Slider gallery (beta)

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.

Lead paragraph

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

Code




    

        
            Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.

Background image white text

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Code




    

        
            Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Background image dark text

Lorem ipsum dolor

Code




    

        
            Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Background light grey

Lorem ipsum dolors

Code




    

        
            Lorem ipsum dolors
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Standard

Lorem ipsum dolor

Consectetur adipisicing elit
Sed do eiusmod
Excepteur sint occaecat

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.
A Christmas Carol by Charles Dickens

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Code




    

        
            Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.
Consectetur adipisicing elit
Sed do eiusmod
Excepteur sint occaecat
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.
A Christmas Carol by Charles Dickens
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Full width

Lorem ipsum dolor

Code




    

        
            Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Medium width

Lorem ipsum dolor

Code




    

        
            Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

No padding

Lorem ipsum dolor

Code




    

        
            Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Asides

Aside examples

Code




    

        
            Aside examples
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.align-centre
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.align-left
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.align-right
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.extend-left
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.extend-right
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.float-left
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.float-right
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.parallel-left
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.parallel-right
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Pull quote

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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.

Code




    

        
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
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.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

End piece

28 August 2015

Code




    

        
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
28 August 2015

Credits

Graphics and design by the University of St Andrews digital communications team. Content written by Carley Hollis, digital communications team. Video, audio and additional photography by the student-run Lightbox Creative St Andrews.

Thanks

Robert Crawford and the University of St Andrews School of English.
Norman McBeath.
Professor Ifor Samuel and the University of St Andrews Organic Semiconductor Optoelectronics research group.
University of St Andrews Creative English MLitt students Helen Nicholson, Amanda Merritt and Tristram Fane Saunders.
Photographers, Kim Bennett, Gerry Priest and David Ogden.
Alice Crawford and the Digital Humanities Project, part of University of St Andrews Library, for digitising Light Box.
Rachel Hart and the University of St Andrews Special Collections, for access to Light Box.

Sources

'A Scottish Assembly', Robert Crawford, 1990, Oxford University Press.
About the Year of Light. Retrieved May 7, 2015, from http://www.light2015.org/Home/About.html

Contact

Email: proffice@st-andrews.ac.uk
Phone: 01334 46 2108

Code




    

        
            Credits
Graphics and design by the University of St Andrews digital communications team. Content written by Carley Hollis, digital communications team. Video, audio and additional photography by the student-run Lightbox Creative St Andrews.
Copyright for portraits, photographs and poems from Light Box remains with Norman McBeath and Robert Crawford.
Thanks
Robert Crawford and the University of St Andrews School of English.
Norman McBeath.
Professor Ifor Samuel and the University of St Andrews Organic Semiconductor Optoelectronics research group.
University of St Andrews Creative English MLitt students Helen Nicholson, Amanda Merritt and Tristram Fane Saunders.
Photographers, Kim Bennett, Gerry Priest and David Ogden.
Alice Crawford and the Digital Humanities Project, part of University of St Andrews Library, for digitising Light Box. 
 Rachel Hart and the University of St Andrews Special Collections, for access to Light Box.
Sources
'A Scottish Assembly', Robert Crawford, 1990, Oxford University Press.
About the Year of Light. Retrieved May 7, 2015, from http://www.light2015.org/Home/About.html
Contact
Email: proffice@st-andrews.ac.uk
Phone: 01334 46 2108

Digital pattern library

Long-form content

Options

Text and backgrounds

Width

Vertical padding

Credits

Sub-patterns

Asides

Aside variants

End piece

Lead paragraph

Pull quotes

Thumbnail gallery

Slider gallery (beta)

Lead paragraph

Lorem ipsum dolor

Lorem ipsum dolor

Background image white text

Lorem ipsum dolor

Lorem ipsum dolor

Background image dark text

Lorem ipsum dolor

Lorem ipsum dolor

Background light grey

Lorem ipsum dolors

Lorem ipsum dolors

Standard

Lorem ipsum dolor

Lorem ipsum dolor

Full width

Lorem ipsum dolor

Lorem ipsum dolor

Medium width

Lorem ipsum dolor

Lorem ipsum dolor

No padding

Lorem ipsum dolor

Lorem ipsum dolor

Asides

Aside examples

Aside examples

Pull quote

End piece

Credits

Credits

Thanks

Sources

Contact

Credits

Thanks

Sources

Contact