<script lang="ts">
	import { Card } from 'stwui';
</script>

<Card bordered={false}>
   <Card.Cover slot="cover">
      <img
         src="image.png"
         alt="cover"
         class="object-cover object-center w-full h-full aspect-1"
      />
   </Card.Cover>
   <Card.Actions slot="actions">
      <Card.Actions.Action icon="settings" />
      <Card.Actions.Action icon="description" />
   </Card.Actions>
</Card>

<script lang="ts">
	import { Card, Media } from 'stwui';
</script>

<Card bordered={false} hoverable>
   <Card.Cover slot="cover" class="relative rounded-b-md">
      <img
         src="image.png"
         alt="cover"
         class="object-cover object-center w-full h-full aspect-1"
      />
      <Card.Cover.Overlay class="top-[unset] h-24">
         <Media class="absolute bottom-0 left-0 right-0 px-4 py-5">
            <Media.Content>
               <Media.Content.Title class="text-white">Europe Street beat</Media.Content.Title>
               <Media.Content.Description class="text-gray-200">www.instagram.com</Media.Content.Description>
            </Media.Content>
         </Media>
      </Card.Cover.Overlay>
   </Card.Cover>
</Card>

<script lang="ts">
	import { Card, Media } from 'stwui';
</script>

<Card bordered={false}>
   <Card.Cover slot="cover">
      <img
         src="https://tailwindui.com/img/ecommerce-images/category-page-01-image-card-12.jpg"
         alt="cover"
         class="object-cover object-center w-full h-full aspect-1"
      />
   </Card.Cover>
   <Card.Content slot="content">
      <Media>
         <Media.Content>
            <Media.Content.Title>Europe Street beat</Media.Content.Title>
            <Media.Content.Description>www.instagram.com</Media.Content.Description>
         </Media.Content>
      </Media>
   </Card.Content>
</Card>

<script lang="ts">
	import { Card } from 'stwui';
</script>

<Card bordered={false}>
   <Card.Header slot="header">Card Header</Card.Header>
   <Card.Content slot="content">Card Content</Card.Content>
   <Card.Footer slot="footer">Card Footer</Card.Footer>
   <Card.Actions slot="actions">
      <Card.Actions.Action icon="looks_one" />
      <Card.Actions.Action icon="looks_two" />
   </Card.Actions>
</Card>