@subcomponents/reset v3.1.5

Media (embedded content)

Image

img

Example image

Figure

figure>(img+figcaption)

Example image inside figure element
The HTML figcaption or Figure Caption element represents a caption or legend describing the rest of the contents of its parent figure element

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eveniet voluptate vitae labore eos, ducimus laborum omnis ipsum deserunt, dolorum voluptas, consectetur temporibus sed tenetur aut quaerat doloribus error quasi!

Picture

figure>picture>(source+img)

Example image inside picture element
The HTML figcaption or Figure Caption element represents a caption or legend describing the rest of the contents of its parent figure element

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia deserunt, atque magnam quo? Ex at tenetur error quam doloremque sunt, a aliquid quo consequatur qui! Eveniet deserunt quaerat tempore dicta.

Audio

audio

The HTML figcaption or Figure Caption element represents a caption or legend describing the rest of the contents of its parent figure element

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quaerat eum amet enim, saepe pariatur ab vero. Laudantium voluptas soluta fuga praesentium dolore deserunt eos harum doloribus iusto, tempore, earum.

Video

video

Iframe

iframe

Embed

embed

Object

object

Canvas

canvas

canvas requires [width] and [height] attributes, otherwise browser will apply arbitrary dimensions

canvas

SVG

svg

To make SVG responsive relative to its container: Add viewBox="0 0 <width> <height>", add preserveAspectRatio="xMidYMid meet", and remove [width] and [height] attributes

To make SVG responsive relative to its own [width] and [height] attributes: Apply CSS max-width: 100%; height: auto;, preserve [width] and [height] attributes

SVG icons usually don't need to be responsive, so [width] and [height] attributes are usually enough

Meter

meter

75%

Progress

progress

75%