Card

Set up

Import Card in the script tag.

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

Examples

<Card header="Noteworthy technology acquisitions 2021">
  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400" slot="paragraph">
  Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
  </p>
</Card>

Card with a link

<Card header="Noteworthy technology acquisitions 2021" link="/" btnLabel="Read more">
  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400" slot="paragraph">
 Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
  </p>
</Card>

Card with image

<Card img="/images/image-1.jpeg" header="Noteworthy technology acquisitions 2021" link="/" btnLabel="Read more">
  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400" slot="paragraph">
  Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
  </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 on:click={btn1}>Click me</Button>
  </div>
  </span>
</Card>

Props

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

Related components

References