Eget himenaeos cubilia feugiat at potenti aliquet port

Mauris suscipit vehicula laoreet maximus nostra sollicitudin metus. Fames pharetra lacus egestas iaculis amet gravida tempus ex pretium a, conubia d

<Docs title="Default" background="dark">
	<MediaCard {...props} client:load />
</Docs>

<Docs title="With Image" background="dark">
	<MediaCard {...props} media={{ maybeImage: image }} client:load />
</Docs>

<Docs title="With Pictogram" background="dark">
	<MediaCard {...props} media={{ maybeImage: picto.maybeImage! }} client:load />
</Docs>

<Docs title="With Text" background="dark">
	<MediaCard {...props} text={text} media={{ maybeImage: image }} client:load />
</Docs>

<Docs title="With Link" background="dark">
	<MediaCard {...props} link={link} media={{ maybeImage: image }} client:load />
</Docs>

<Docs title="With Long Text" background="dark">
	<MediaCard {...props} text={textLong} media={{ maybeImage: image }} client:load />
</Docs>

<Docs title="Media Position Right" background="dark">
	<MediaCard {...props} text={text} media={{ maybeImage: image }} mediaPosition="right" client:load />
</Docs>

<Docs title="With Pictogram and Link" background="dark">
	<MediaCard {...props} link={link} media={{ maybeImage: picto.maybeImage! }} client:load />
</Docs>

<style>
.MediaCard {
	width: 100%;
	max-width: 600px;
}
</style>