Featured media

This pattern is for displaying featured content that includes media such as an image or video.

Rules for featured media

• When using a two column layout, one column must contain text and the other column must contain an image or a video.
• Images must be sized 750 × 500 pixels when positioned to the right or left.
• The featured media may benefit from a caption explaining it in further detail.
• The transparent (white) background can be replaced by either an image with a colour overlay or a solid blue coloured background.
• If using an optional coloured background, all text and links must be white and links must be underlined.
• The heading may be linked.
• A button can be used to feature a prominent call-to-action.

Helper classes

CSS classes for positioning the media alongside the text on larger displays

• featured-media--left
• featured-media--right

CSS classes for approved transparent overlay colours

• featured-media--blue-transparent-overlay
• featured-media--orange-transparent-overlay
• featured-media--burgundy-transparent-overlay
• featured-media--purple-transparent-overlay

CSS classes for approved background colours

• featured-media--sta-blue

Options available

• Featured media with image
• Featured media with video on left
• Centered video with caption
• Blue background and video
• Image background with orange transparent overlay and video
• Image background with burgundy transparent overlay and centered video

Featured media with image

This example includes a button to promote a prominent call-to-action and a caption for the image.

       

            
This is the heading of the section
            
Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat.
Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor.
            
Call to action
        
        

            

                
                
            
        
    

Featured media with video on left

       

            
This is the heading of the section
            
Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat.
Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor.
        
        

            

                

                
            
        
    

Centered video with caption

If a preferred side is not specified then the media is placed in the centre and more prominently on larger displays.

Blue background and video

This example includes a linked heading.

       

            
What's bad about being good?
            
Research at St Andrews explores effective altruism, a rapidly growing social movement which encourages us to do the most good we can with the money and time available.
        
        

            

                

                
            
        
    

Image background with orange transparent overlay and video

       

            
What's bad about being good?
            
Research at St Andrews explores effective altruism, a rapidly growing social movement which encourages us to do the most good we can with the money and time available.
        
        

            

                

                
            
        
    

Image background with burgundy transparent overlay and centered video

       

            
What is David Russell Apartments like?