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",
  };
  let star5 = 5.0
  let star4 = 4.7
  let star3 = 3.5
</script>

Examples

<EcommerceCard
  title="Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport"
  href="/"
  price="$543"
  img={img1}
  stars={star5}
  btnText="Buy now"
>
<p cloass="dark:text-white">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</EcommerceCard>

Without stars

<EcommerceCard
  title="Women's Cashmere Sweaters Lorem ipsum dolor sit amet."
  href="/"
  btnColor="red"
  price="$461"
  img={img2}
  btnText="Buy now"
/>

Without stars and button

<EcommerceCard
  title="Pink cup Lorem ipsum dolor sit amet et mete."
  href="/"
  price="$321"
  img={img3}
/>

Without stars, button, price

<EcommerceCard
  title="Nintendo Game Lorem ipsum dolor sit amet."
  href="/"
  img={img4}
/>

Props

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

Related components

References