Justo pulvinar finibus porttitor dis etiam feugiat

Justo pulvinar finibus porttitor dis etiam feugiat viverra, proin efficitur litora blandit quisque dignissim curae. Hendrerit tristique ligula torquent facilisi cras dictumst sagittis maecenas ac tempor viverra cubilia turpis id, dui ante est vel gravida congue eros pulvinar nullam suscipit b

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