Components

Media

A line drawing that takes a named tone through currentColor, or a real image with its intrinsic dimensions.

Artwork in a tone

tone="neutral"
tone="blue"
tone="violet"

A real image

Sun above layered mountains

Reset the float when the image should return to normal document flow. The image keeps its intrinsic ratio at every width.

Text wraps around the floated image and continues in the remaining inline space.

Used on the Responsive Design guide.

Usage and interface

DemoMedia without src draws the site’s mountain artwork as an inline SVG on a sheet, painted with currentColor from tone. With src and alt it renders the site Image with its intrinsic width and height.

<DemoMedia tone="blue" className="w-full h-auto" aria-label="Blue mountain illustration" /><DemoMedia src="/demo/landscape.svg" alt="Sun above layered mountains" width={320} height={200} />

The component adds no layout; dimensions, radius and float belong to the example.