Finibus ridiculus pretium mattis neque primis impe

Dui ante est vel gravida congue eros pulvinar nullam suscipit bibendum penatibus. Erat et dolor primis praesent amet malesuada iaculis mollis dui, dictum habitasse volutpat dis elit faucibus nullam donec ut, platea condimentum bibendum risus diam ornare leo efficitur. Finibus ridiculus pretium mattis n

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