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

product image

Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport

5

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

$543 Buy now
<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.

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 0
price string ''
btnText string ''
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'
priceClass string 'text-3xl font-bold text-gray-900 dark:text-white'

References