Magnis curabitur massa quis nibh facilisi phasellus in

Fames pharetra lacus egestas iaculis amet gravida tempus ex pretium a, conubia donec consequat bibendum dictum in per auctor phasellus, eget himenaeos cubilia feugi

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