Product Card

By Kevin

How do I use This?

Product Card for an eCommerce site that has selectable options.

HTML

<div class="product-card">
  <div class="product-card-thumbnail">
    <a href="#"><img src="https://placehold.it/180x180"/></a>
  </div>
  <h2 class="product-card-title"><a href="#">Product Name</a></h2>
  <span class="product-card-desc">Product Description</span>
  <span class="product-card-price">$9.99</span><span class="product-card-sale">$12.99</span>
  <div class="product-card-colors">
    <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
    <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
    <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
    <button href="#" class="product-card-color-option"><img src="https://placehold.it/30x30"/></button>
  </div>
</div>

.product-card {
  background-color: $white;
  border: 1px solid $light-gray;
  padding: 1rem;
  margin-bottom: 1.5rem;  
}

.product-card-thumbnail {
  display: block;
  position: relative;
}

.product-card-title {
  font-family: 'Open sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45rem;
  margin-top: 1rem;
  margin-bottom: 0;
}

.product-card-desc {
  color: $dark-gray;
  display: block;
  font-family: 'Open sans', sans-serif;
  font-size: 0.85rem;
}

.product-card-price {
  color: darken($dark-gray,30%);
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.8rem;
}

.product-card-sale {
  color: $medium-gray;
  display: inline-block;
  font-size: 0.85rem;
  margin-left: 0.3rem;
  text-decoration: line-through;
}

.product-card-colors {
  display: block;
  margin-top: 0.8rem;
}

.product-card-color-option {
  display: inline-block;
  height: 25px;
  width: 25px;
}

.product-card {
  background-color: #fefefe;
  border: 1px solid #e6e6e6;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.product-card-thumbnail {
  display: block;
  position: relative;
}

.product-card-title {
  font-family: 'Open sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45rem;
  margin-top: 1rem;
  margin-bottom: 0;
}

.product-card-desc {
  color: #8a8a8a;
  display: block;
  font-family: 'Open sans', sans-serif;
  font-size: 0.85rem;
}

.product-card-price {
  color: #3e3e3e;
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.8rem;
}

.product-card-sale {
  color: #cacaca;
  display: inline-block;
  font-size: 0.85rem;
  margin-left: 0.3rem;
  text-decoration: line-through;
}

.product-card-colors {
  display: block;
  margin-top: 0.8rem;
}

.product-card-color-option {
  display: inline-block;
  height: 25px;
  width: 25px;
}

Product Card

By Kevin

Mobile Action Sheet

Sticky Footer with CSS Only

Todo List Card

Product Card

By Kevin

Similar Building Blocks

Mobile Action Sheet

Sticky Footer with CSS Only

Todo List Card