Theme Switcher

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.

<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>