Simple Product Card Code

A Simple Product Card using HTML/CSS

— Chelsea 

This is a simple product card that is NOT connected to any checkout gateway. I use these in my Google sites to show clients what is possible.

<!DOCTYPE html>




<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="" rel="stylesheet">

<script src=""></script>

.card {

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

max-width: 300px;

margin: auto;

text-align: center;

font-family: arial;


.price {

color: grey;

font-size: 22px;


.card button {

border: none;

outline: 0;

padding: 12px;

color: white;

background-color: #000;

text-align: center;

cursor: pointer;

width: 100%;

font-size: 18px;


.card button:hover {

opacity: 0.7;





<div class="card">

<img src="imghosturl" alt="Digital Planner" style="width:100%">

<h1>Cute Digital Planner</h1>

<p class="price">$19.99</p>

<p>Get this Cute Digital Planner in our shop today! Lorem impsum journal planner. Ipsum 365 days, ipsum task, and more.</p>

<p><button>Add to Cart</button></p>