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

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 Controls where the Media aligns inside a parent column or menu, as well as the alignment of cropped content filled in the Media container itself.

Sizing Controls the width and height of the container.

Spacing Controls the padding around the media content.

Fill Controls the content that is displayed in the container, as well as styling such as the crop and scale of your media, the background color, overlays, or corner radius.

Stroke Borders for any side of the container.

Accessibility Outlined below

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> 💡

</aside>

Vectors

Related guides

Text

Click & Hover Behaviors

Files & Downloads

Sequence