Skip to main content
Media is a dynamic element type that is used to display a variety of visual content on Standards.
Examples of various media from logos to icons and photos

​
Media basics

Media is an element that can be added anywhere in your project and simply consists of a bounding box that can be sized, styled, and filled with content. Media elements may display static images, animated media, and vector files.

​
Adding media

Add menu dropdown open showing a list of all options
1

Select the media add tool

From within the editor, select Media from the +menu in the top bar, or use the hotkey M
2

Select area to add to

Select a point in the project body by selecting between layouts, click + dragging within, or selecting a point inside a column.
3

Choose file

Once added, select or upload the file you want to fill the media element with
Tip: Hold command to add media directly into a column with 1 click.

​
General use

Media is a flexible element with a range of uses. Here are common general uses:
Grid of photography examples

​
Static images

Choose an uploaded file such as .JPEG, .PNG, .webP or .TIFF to display a static image. Standards optimizes images for various screen sizes. Therefor, we recommend uploading your highest resolution images. Tip for gradients: It’s suggested to use high quality .JPEG files for gradients for better color, compression, and file size. Sometimes .PNG gradients will appear overly compressed.
Grid of logos in different colors

​
Vectors

Choose an uploaded .SVG file to display vectorized media. When preparing vectors for Standards, ensure the art-board is cropped to the artwork itself, with no additional space around within the exported file.
Looping video footage

​
Videos

Choose an uploaded file such as .MP4, .WebM, or .GIF to display an animation or video. As with images, Standards optimizes videos for various screen sizes. Therefor, we recommend uploading your highest quality videos below 100mb per file.

​
Video media

Media is often greatly enhanced by incorporating motion or video, not only improving clarity and usability but also simply by adding moments of excitement to your project. Media that references video files gain unique settings to control behavior.
Contextual toolbar beside selected image showing settings

​
Settings

  • Autoplay Play the video once it loads without a trigger
  • Loop Play from the beginning once it reaches the end
  • Mute Mute any audio embedded in the video

​
Hover

  • Play Video Play and pause video media
  • Play Audio Play and pause audio in video media

​
Thumbnails

Media filled with video files automatically use the first frame as their static thumbnail. This can be overridden with a custom thumbnail for each breakpoint, accessed inside the in-body settings.

​
Accessibility

When using Media throughout your project, it is important to keep accessibility in mind. Standards allows you to include meta descriptions for both Media elements, and the Files themselves. Learn more about Accessibility.