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.

File size:

Trial, Plus, Pro Single file upload limit: 100MB
Enterprise Single file upload limit: 2GB

Adding media

From within the editor, select Media from the + menu in the top bar, or use the hotkey M.
Select a point in the project body by selecting between layouts, click + dragging within, or selecting a point inside a column.

Media settings

While selecting a Media element, the right sidebar will display the available settings for styling the container as well as the text and icon within.

Position
Sizing
Spacing
Fill
Stroke
Accessibility

General Use

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

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.

<aside> 💡

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.

</aside>

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.

Related guides

Text

Click & Hover behaviors

Files & downloads

Sequence