Smelte logo
SMELTE
Github Smelte

Cards

avatar
The three little kittens
A kitten poem
The three little kittens, they lost their mittens,
And they began to cry,
"Oh, mother dear, we sadly fear,
That we have lost our mittens."
prop
description
type
Default value
hover Enable hover elevation Boolean true
elevation Default elevation value Number 1
hoverElevation Hover elevation value Number 8
classes String of root element classes String rounded inline-flex flex-col overflow-hidden duration-200 ease-in
<script>
	import {
		Card,
		Button,
		Image
	} from "smelte";
</script>

<Card.Card>
	<div slot="title">
		<Card.Title
			title="The three little kittens"
			subheader="A kitten poem"
			avatar="https://placekitten.com/64/64"
		/>
	</div>
	<div slot="media">
		<Image
			class="w-full"
			src="https://placekitten.com/300/200"
			alt="kitty"
		/>
	</div>
	<div slot="text" class="p-5 pb-0 pt-3 text-gray-700 body-2">
		The three little kittens, they lost their mittens,<br>
		And they began to cry,<br>
		"Oh, mother dear, we sadly fear,<br>
		That we have lost our mittens."
	</div>
	<div slot="actions">
		<div class="p-2">
			<Button text>OK</Button>
			<Button text>Meow</Button>
		</div>
	</div>
</Card.Card>