Embedded content
Images, SVG, audio, video, canvas and iframes with small defaults for sizing and alignment.
On this page
Media elements get a few defaults so they behave in a flowing layout. Nothing else is imposed: size them with attributes or your own CSS.
| Element | Default |
|---|---|
img | max-width: 100%, height: auto, no border |
svg | fill: currentColor when it has no fill attribute, overflow hidden |
audio, video, canvas | inline-block; audio without controls is hidden |
iframe | no border |
audio, canvas, iframe, img, svg, video | vertical-align: middle |
Images
An image never grows wider than its container. Set width and height attributes so the browser reserves space before it loads.
<img
alt="A gradient from blue to orange"
width="960"
height="300"
src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%234b6bfb'/%3E%3Cstop offset='1' stop-color='%23f2a65a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='960' height='300' fill='url(%23g)'/%3E%3C/svg%3E"
/>Pair an image with a caption in a figure.
SVG
An inline svg without a fill attribute takes the current text color, so icons follow the theme and dark mode. Set fill on the root to opt out.
<svg width="120" height="60" viewBox="0 0 120 60" role="img" aria-label="Rectangle in the text color">
<rect width="120" height="60" rx="6" />
</svg>
<svg width="120" height="60" viewBox="0 0 120 60" fill="#c0392b" role="img" aria-label="Red rectangle">
<rect width="120" height="60" rx="6" />
</svg>Audio and video
Add controls to show the player. Without it, audio is hidden.
<video
controls
width="480"
height="270"
poster="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='270'%3E%3Crect width='480' height='270' fill='%23333'/%3E%3C/svg%3E"
></video>Add a <track kind="captions"> to video that has speech.
iframe
An iframe has no border. Set a title so assistive tech can name it, and set the size with attributes or CSS.
<iframe
title="Embedded page"
width="100%"
height="160"
srcdoc="<body style='font-family:sans-serif;margin:1rem'><p>Content inside an iframe.</p></body>"
></iframe>Customization
There are no variables for media. Write your own rules for the elements. Unlayered CSS beats the framework layers, see Themes.