Quick links
🔑 Sign in
🖥 Website standards.site
🐦 Twitter @standards_site
📷 Instagram @standards.site
Design & Editing
In this guide:
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.
+ menu in the top bar, or use the hotkey M.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
Media is a flexible element with a range of uses. Here are common general uses:
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.
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.
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.
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.
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
Play Video Play and pause video Media
Play Audio Play and pause audio in video Media
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 about adding alternate text to Media: