Media component

The overline is a useful addition to the component to add some context and intrigue to the copy. This highlights the text and helps lead the user into reading to the title of the media component.

The title field is where to add the title of the component. Ideally, the title should be attention grabbing but not too long.

The content field is where to add the body copy. In most cases, this will probably either be talking about a subject that our image or video will reinforce, or will be directly addressing the image or video itself.

The call to action is where to add a link or button. Generally, this should direct to more information about the section. Choosing “select link” will bring up the url options. The important thing to note here is, in order for the link to be presented as a button, the text for button has to be added into the “link text” field.

There are five color options for the background of the media component which can be selected by clicking the desired color.

The media type option is used to select which type of media will be used in the component. Choose between Image, Embed, Video or other to see applicable options.

The featured image/video is the hallmark feature of the media component. The designated settings will appear based on what media type is selected above. Simply add an image from the media library, embed a link from YouTube or Vimeo, or add in a video from the media library to be displayed. For images the recommended image size is 1440px by 1080px (4:2).

Select which side of the screen you would like the image or video to show with the media placement option. On a mobile device, the media will stack above the text content if left is selected, below if right is selected.

The media component has the option to enable an entry animation as the user scrolls down the page. This can be toggled on and off as desired.