Media Object

The Media Object is an image/icon (media) to the left, with descriptive content (title and subtitle/description) to the right.

Change the spacing between the media and content by passing a gap-* class. The default gap is gap-4.

Use flexbox utilities to change the alignment of the media and content.

Compose the <MediaObject> with the <MediaObject.Media> and <MediaObject.Content> components as direct children.

import { MediaObject } from "@ngrok/mantle/media-object";

<MediaObject.Root>
	<MediaObject.Media>
		<ExampleMedia />
	</MediaObject.Media>
	<MediaObject.Content>
		<h4 className="text-lg font-medium">Lorem ipsum</h4>
		<p className="mb-4 mt-1">
			Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis
			voluptatem. Minus quidem ipsam quia iusto.
		</p>
		<p>Ea eiusmod eiusmod aute reprehenderit exercitation eu ea id adipisicing occaecat.</p>
	</MediaObject.Content>
</MediaObject.Root>;

API Reference

MediaObject.Root

The MediaObject is an image/icon (media) to the left, with descriptive content (title and subtitle/description) to the right. Root container for all MediaObject.Root sub-components.

All props from div, plus:

MediaObject.Media

The container for an image or icon to display in the media slot of the MediaObject.

All props from div, plus:

MediaObject.Content

The container for the content slot of a MediaObject.

All props from div, plus: