University of St Andrews

Long-form sections

The long-form section pattern shows the background options that can be used within a long-form story. Different backgrounds help to separate out the different sections of the story.

Rules for long-form sections

• Must only be used within the main content of a long-form page.
• Must alternate sections so that same background isn't adjacent to itself.

Options available

• Dark text on white background (default)
• Dark text on light grey background
• Dark text on light image background
• White text on dark image background

Dark text on white background (default)

    

        

            

                

                    
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.
                    Lorem ipsum dolor sit amet
                
            
        
    

Dark text on light grey background

Add the class long-form--bg-light-grey. This cannot be used for the section before the long-form credits section.

    

        

            

                

                    
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.
                    Lorem ipsum dolor sit amet
                
            
        
    

Dark text on light image background

Add the class long-form--bg-lighten.

    

        

            

                

                    
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.
                    Lorem ipsum dolor sit amet
                
            
        
    

White text on dark image background

Add the classes long-form--inverse long-form--bg-darken. This must be used for the long-form intro section.

    

        

            

                

                    
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.
                    Lorem ipsum dolor sit amet