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