Interactive Card

Set up

<script>
  import { InteractiveCard }from 'flowbite-svelte';
  let dropdownLinks = [
    {
      href: "/",
      name: "Edit",
    },
    {
      href: "/",
      name: "About",
    },
    {
      href: "/",
      name: "Profile",
    },
  ];
  let img = {
    src: "/images/profile-picture-3.jpeg",
    alt: "Suzan Boil",
  };
  let header = "Lorem ipsum";
  let content = "Proin efficitur purus felis.";
  let link1 = { href: "/", name: "Add friend" };
  let link2 = { href: "/", name: "Message" };
</script>

Examples

Suzan Boil

Lorem ipsum

Proin efficitur purus felis.
Suzan Boil

Lorem ipsum

Proin efficitur purus felis.
<InteractiveCard 
  {dropdownLinks}
  {img} 
  {header} 
  {content} 
  {link1} 
  {link2} 
/>

<InteractiveCard
  {dropdownLinks}
  {img}
  {header}
  {content}
  {link1}
  {link2}
  buttonColor="purple"
/>

Props

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

Name Type Default
dropdownLinks LinkType[]
img ImgType
header string 'Lorem ipsum'
content string 'Proin efficitur purus felis.'
buttonColor Colors 'blue'
link1 LinkType
link2 LinkType
headerClass string 'mb-1 text-xl font-medium text-gray-900 dark:text-white'
divClass string 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700'

References