Skip to main content

Product cards

Product cards designed to add to your E-commerce website. They are simple and beautiful.

Default product card​

Hover card

CategoryLorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fugit nulla odio optio...

USD$ 24.99
See details
<div class="card card-product">
  <div class="card-image">
    <img src="..." alt="..." />
  </div>
  <div class="card-content">
    <h4 class="card-title">...</h4>
    <p>...</p>
  </div>
  <div class="card-footer">
    <h6 class="price">...</h6>
    <a href="#" class="button button-primary">
      ...
    </a>
  </div>
</div>

Product card price on image​

Hover cardUSD$ 24.99

CategoryLorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fugit nulla odio optio...

See detailsAdd to cart 
<div class="card card-product">
  <div class="card-image">
    <img src="..." alt="..." />
    <span class="price">...</span>
    <span class="like"><icon/></span>
  </div>
  <div class="card-content">
    <h4 class="card-title">...</h4>
    <p>...</p>
  </div>
  <div class="card-footer">
    <a href="#" class="button button-primary semi-transparent">
      ...
    </a>
    <a href="#" class="button button-primary">
      ...
    </a>
  </div>
</div>

Product card hover buttons​

Hover cardUSD$ 24.99

CategoryLorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fugit nulla odio optio...

<div class="card card-product">
  <div class="card-image">
    <img src="..." alt="..." />
    <span class="price">...</span>
  </div>
  <div class="card-content">
    <h4 class="card-title">
      <small class="block text-xs font-medium text-gray-500 uppercase">...</small>
      ...
    </h4>
    <p>...</p>
  </div>
  <div class="hover-buttons">
    <a href="#" class="add-to-bag">
      <your-icon />
    </a>
    <a href="#" class="see-details">
      <your-icon />
    </a>
    <a href="#" class="like">
      <your-icon />
    </a>
  </div>
</div>

Clean product card​

Hover card
Categoryfrom USD $ 60

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fugit nulla odio optio...

See detailsAdd to card
<div class="card card-product clean-card">
  <div class="relative card-header">
    <img src="..." alt="..." />
  </div>
  <div class="card-content">
    <div class="top-header">
      <span class="info">...</span>
      <span class="price">...</span>
    </div>
    <h4 class="card-title">
      ...
    </h4>
    <p>...</p>
  </div>
  <div class="card-footer">
    <a href="#" class="button button-primary-outline">
      ...
    </a>
    <a href="#" class="button button-primary">
      ...
    </a>
  </div>
</div>

Clean product card with hover buttons​

Hover card
Categoryfrom USD $ 60

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fugit nulla odio optio...

<div class="card card-product clean-card">
  <div class="relative card-header">
    <img src="..." alt="..." />
  </div>
  <div class="card-content">
    <div class="top-header">
      <span class="info">...</span>
      <span class="price">...</span>
    </div>
    <h4 class="card-title">
      ...
    </h4>
    <p>...</p>
  </div>
  <div class="hover-buttons">
    <a href="#" class="add-to-bag">
      <your-icon />
    </a>
    <a href="#" class="see-details">
      <your-icon />
    </a>
    <a href="#" class="like">
      <your-icon />
    </a>
  </div>
</div>