Minimal Product Block

index.html

<ul class="tiny-block-grid-1 small-block-grid-2 medium-block-grid-2 large-block-grid-3 prd-blk-minimal">
  <li>
    <a href="#">
      <ul>
        <li>
          <div class="label color-orange">50% OFF</div>
          <img src="http://dummyimage.com/600x400/c0c0c0/fff">
        </li>
        <li><strong>Photo book Square</strong><br>Starting at 19.95
          <li>
      </ul>
    </a>
    </li>
    <li>
      <ul>
        <li>
          <div class="label color-green">50% OFF</div>
          <img src="http://dummyimage.com/600x400/c0c0c0/fff">
        </li>
        <li><strong>Photo book Square</strong><br>Starting at 19.95</li>
      </ul>
    </li>
    <li>
      <ul>
        <li><img src="http://dummyimage.com/600x400/c0c0c0/fff"></li>
        <li><strong>Photo book Square</strong><br>Starting at 19.95</li>
      </ul>
    </li>
</ul>

minimal-product-block.markdown

Minimal Product Block

A Pen by AP Ecom FE on CodePen.

License.

scripts

<script src="https://cdn-files.cloud/arc/js/jquery.arc.min.js"></script>
<script src="https://cdn-files.cloud/arc/js/custom.modernizr.js"></script>
<script src="https://cdn-files.cloud/arc/js/arc.discovery.min.js"></script>

styles

<link href="https://cdn-files.cloud/arc/css/arc.discovery.min.css" rel="stylesheet" />