Card

Set up

Import Card in the script tag.

<script>
  import { Card } from "flowbite-svelte";
</script>

Examples

<Card header="Simple card with header and content">
  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400" slot="paragraph">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla distinctio.
  </p>
</Card>

Card with a link

<Card header="Card with link" link="/" btnLabel="Read more">
  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400" slot="paragraph">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla distinctio.
  </p>
</Card>

Card with a link and image

<Card img="/images/image-1.jpeg" header="Card with link and image" link="/" btnLabel="Read more">
  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400" slot="paragraph">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla distinctio.
  </p>
</Card>

Card with an image

<Card img="/images/image-2.jpeg" header="Card with image">
  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400" slot="paragraph">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla distinctio.
  </p>
</Card>

Card with a Button component

If you need a click handler rather than a link, use a Button component.

<script>
  const btn1 = ()　=>　{
    alert('You clicked.')
  }
</scipt>
<Card
  img="/images/image-1.jpeg"
  header="Button component"
  btnLabel="Read more"
><span slot="paragraph">
  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400" >
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </p>
  <div class="w-full pt-4">
    <Button name="Click me" on:click={btn1} />
  </div>
  </span>
</Card>

Card with yellow button

<Card
  img="/images/image-1.jpeg"
  header="Yellow button"
  link="/"
  btnColor="yellow"
  btnLabel="Read more"
>
  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400" slot="paragraph">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla distinctio.
  </p>
</Card>

Card with purple button

<Card
  img="/images/image-1.jpeg"
  header="Purple button"
  link="/"
  btnColor="purple"
  btnLabel="Read more"
>
  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400" slot="paragraph">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla distinctio
  consequatur modi ab nisi perferendis placeat natus repellendus officiis
  ipsa.
  </p>
</Card>

Props

The component has the following props, type, and default values. See type-list page for type information.

Related components

Default Card

CTA Card

Ecommerce Card

Horizontal Card

Interactive Card

List Card

Signin Card

References

Flowbite Card