Card

index.svelte

<script>
  import { Button, Card } from 'twelveui'
</script>

<Card class="max-w-xs">
  <h3 slot="title" 
      class="text-2xl text-gray-900">
      Kittens R Us
  </h3>
  <p slot="subtitle" 
     class="text-sm uppercase text-gray-500">
     Fun & Games
  </p>
  <img slot="media" 
       src="https://placekitten.com/200/200" 
       alt="A cute kitten looking at you."
  >
  <p slot="body" 
     class="text-gray-600">
     We're cuddly and cute all the time. 
     Bring some string and come play with us! 
     We can't wait to see you!
  </p>
  <img slot="avatar" 
       class="rounded-full w-12 h-12" 
       src="https://placekitten.com/200/200" 
       alt="kitten pic">
  <svelte:fragment slot="actions">
    <Button class="text-blue-600">
      Cancel
    </Button>
    <Button class="text-blue-600">
      OK
    </Button>
  </svelte:fragment>
</Card>

Slots

Name	Type	Use Case
actions	svelte:fragment	Generally for buttons or links.
avatar	html element	Set height, width, and "rounded" look with CSS.
media	html element	Generally for an image or video.
subtitle	html element
body	html element	Description/Info for the card.
title	html element
topAvatar	html element	Place the avatar above the image.
topSubtitle	html element	Place the subtitle above the image.
topTitle	html element	Place the title above the image.

Props

Name	Type	Default	Description
class	String	empty	CSS class list.