Ecommerce Card
Set up
<script>
import { EcommerceCard } from "flowbite-svelte";
let img1 = {
src: "/images/product-1.webp",
alt: "product image",
};
let img2 = {
src: "/images/product-2.webp",
alt: "product image",
};
let img3 = {
src: "/images/product-3.webp",
alt: "product image",
};
let img4 = {
src: "/images/product-4.webp",
alt: "product image",
};
</script>Examples
<EcommerceCard
title="Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport"
link="/alerts"
price="$543"
img={img1}
/>
<EcommerceCard
title="Women's Cashmere Sweaters Lorem ipsum dolor sit amet."
link="/tabs"
btnColor="red"
stars="4.0"
price="$461"
img={img2}
/>
<EcommerceCard
title="Pink cup Lorem ipsum dolor sit amet et mete."
link="/cards"
btnColor="purple"
stars="3"
price="$321"
img={img3}
/>
<EcommerceCard
title="Nintendo Game Lorem ipsum dolor sit amet."
link="modals"
btnColor="green"
stars="5"
price="$211"
img={img4}
/>Props
The component has the following props, type, and default values. See types page for type information.
| Name | Type | Default |
|---|---|---|
| img | ImgType | - |
| href | string | '/' |
| btnColor | Colors | 'blue' |
| rel | string | '' |
| title | string | 'Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport' |
| stars | number | 5 |
| price | string | '$555' |
| headerClass | string | 'text-xl font-semibold tracking-tight text-gray-900 dark:text-white' |
| divClass | string | 'max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700' |