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

<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 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