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 <MediaObjectMedia> and <MediaObjectContent> components as direct children.

Lorem ipsum

Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.

Ea eiusmod eiusmod aute reprehenderit exercitation eu ea id adipisicing occaecat.

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

<MediaObject>
	<MediaObjectMedia>
		<ExampleMedia />
	</MediaObjectMedia>
	<MediaObjectContent>
		<h4 className="text-lg font-bold">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>
	</MediaObjectContent>
</MediaObject>

API Reference

MediaObject

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 sub-components.

All props from div, plus:

Prop	Type	Default	Description
asChild	boolean	false	Use the `asChild` prop to compose the `MediaObject` styling and functionality onto alternative element types or your own React components.

MediaObjectMedia

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

All props from div, plus:

Prop	Type	Default	Description
asChild	boolean	false	Use the `asChild` prop to compose the `MediaObjectMedia` styling and functionality onto alternative element types or your own React components.

MediaObjectContent

The container for the content slot of a MediaObject

All props from div, plus:

Prop	Type	Default	Description
asChild	boolean	false	Use the `asChild` prop to compose the `MediaObjectContent` styling and functionality onto alternative element types or your own React components.